Reply To: Print with text underneath

[JD26]

Thank you. Unfortunately the chart and table overlap when I print it..

My code:

        window.onload = function () {
            CanvasJS.addCultureInfo("de",
                {
                    decimalSeparator: ",",
                    savePNGText: "Als PNG speichern",
                    saveJPGText: "Als JPEG speichern",
                    printText: "Drucken"
                });

            var chart1 = new CanvasJS.Chart("column-chart", {
                animationEnabled: true,
                exportEnabled: true,
                theme: "light1",
                culture: "de",
                title: {
                    text: "Durchschnittliches Ergebnis je Aufgabe",
                    fontFamily: "Verdana",
                    fontSize: "23",
                    padding: 12
                },
                subtitles: [{
                    text: < ? php echo json_encode($subtitle);?>,
                    fontFamily: "Verdana"
                }, {
                    text: < ? php echo json_encode($anzahl);?>,
                    fontFamily: "Verdana",
                    padding: 4
                }
                ],
                axisY: {
                    includeZero: true
                },
                toolTip: {
                    shared: true
                },
                legend: {
                    cursor: "pointer"
                },
                axisX: {
                    labelAngle: 0
                },
                data: [{
                    type: "column",
                    axisYType: "primary",
                    indexLabel: "{y}",
                    indexLabelPlacement: "inside",
                    yValueFormatString: "###.##",
                    name: "1. Testung",
                    legendText: "1. Testung",
                    showInLegend: true,
                    dataPoints:
                    < ? php echo json_encode($dataPoints1, JSON_NUMERIC_CHECK);?>
                }, {
                    type: "column",
                    axisYType: "primary",
                    indexLabel: "{y}",
                    indexLabelPlacement: "inside",
                    yValueFormatString: "###.##",
                    name: "2. Testung",
                    legendText: "2. Testung",
                    showInLegend: true,
                    dataPoints:
                    < ? php echo json_encode($dataPoints2, JSON_NUMERIC_CHECK);?>
                }]
            });
            chart1.render();

            $("#exportButton").click(function(){
                window.print();
            });
        }

<div id="chartsContainer">
    <div class="chart mt-4 ml-4 mb-4" id="column-chart"></div>
                    <article class="col-md-5 mt-4 small-font">
                        <br><br><br>
                        <b>Legende</b>

                        <table class="table table-sm">
                            <tbody>
                            <tr>
                                <td class="text-center">Lautfehler</td>
                                <td>=</td>
                                <td>Lautüberprüfung (Wieviele Laute von 46 waren falsch?)</td>
                            </tr>
                            <tr>
                                <td class="text-center">PD</td>
                                <td>=</td>
                                <td>Phonematische Differenzierung</td>
                            </tr>
                           [ ..... ]
                            </tbody>
                        </table>
                        <button id="exportButton" type="button">Print The Page</button>
                    </article>
            </div>