Highcharts: "Print all" button

Question

Is it possible to create a "Print all" button for Highcharts, where more that one chart is printed?

I know that exporting multiple charts is possible, as demonstrated in the jFiddle: http://jsfiddle.net/highcharts/gd7bB/1/ but I'm not sure Highcharts allows a similar method with printing.

Answer 1

The exportChart method accepts parameters so you can send it more than one chart. However, the print method does not accept any parameters. So, to print you have to specify each chart separately like chart1.print(); and chart2.print(); which prints them each separately.

There are two workarounds:

1. Printing the whole page without using Highcharts printing. Here is an example.

2. You could export both of the charts to a pdf file and then print form there. Here is an example on how to export multiple charts to one pdf.

Answer 2

Here is an alternative solution that does the printing directly. It's based on the chart.print() function, but it works on multiple charts.

See the demo here: http://jsfiddle.net/jim31415/q5Rzu/150/

        //--------------------------------------------------------------------
        $("#print").click(function () {
            printCharts([chart1, chart2, chart3]);
        });


        //--------------------------------------------------------------------
        function printCharts(charts) {

            var origDisplay = [],
                origParent = [],
                body = document.body,
                childNodes = body.childNodes;

            // hide all body content
            Highcharts.each(childNodes, function (node, i) {
                if (node.nodeType === 1) {
                    origDisplay[i] = node.style.display;
                    node.style.display = "none";
                }
            });

            // put the charts back in
            $.each(charts, function (i, chart) {
                origParent[i] = chart.container.parentNode;
                body.appendChild(chart.container);
            });

            // print
            window.print();

            // allow the browser to prepare before reverting
            setTimeout(function () {
                // put the charts back in
                $.each(charts, function (i, chart) {
                    origParent[i].appendChild(chart.container);
                });

                // restore all body content
                Highcharts.each(childNodes, function (node, i) {
                    if (node.nodeType === 1) {
                        node.style.display = origDisplay[i];
                    }
                });
            }, 500);
        }
    });