Print with text underneath

[JD26]

I have this chart with text underneath:

Is there a way to print the chart AND the text when using the print export feature?
When I try to print the whole page via the browser (Firefox and Chrome), it looks like this:

Is there any way to print both the chart and the text underneath on one page?

[Manoj Mohan]

@jd26,

You can print the contents of window using print() as shown in this JSFiddle.

—-
Manoj Mohan
Team CanvasJS

[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>

[Manoj Mohan]

@jd26,

Defining height and width of the chart container should work fine in your case.

If you are still facing the issue, kindly create a sample project reproducing the issue and share it with us over Google-Drive or Onedrive so that we can look into your code, understand the scenario better and help you out?

—-
Manoj Mohan
Team CanvasJS

[JD26]

Thank you, I defined the height and width in my css file. For some reason, that was the problem when printing. It works now, after I put it directly into the code. There’s just one thing now:

The options icon covers the title when printing.. is there a fix for this?

[Manoj Mohan]

@jd26,

It seems to be working fine. Can you kindly create a sample project reproducing the issue and share it with us over Google-Drive or Onedrive so that we can look into your code, understand the scenario better and help you out?

—-
Manoj Mohan
Team CanvasJS

[JD26]

I managed to hide the icon when printing using css media queries

@media print {
    .canvasjs-chart-toolbar {
       display: none;
     }
}