Home › Forums › Chart Support › Print with text underneath › Reply To: Print with text underneath
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>