Render multiple Highchart's to 1 PDF with page breaks after each.

[iii-james]

The chart renders but only the last chart in the array is displayed. Not sure how to use a page-break in this situation.

Here it is in the playground.

Template:

<style>
    html,
    body {
        height: 100%;
        width: 100%;
    }
    .page-break { display: block; page-break-before: always; }
</style>

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.highcharts.com/8.0.4/highcharts.js"></script>
<script src="http://code.highcharts.com/8.0.4/highcharts-3d.js"></script>

<div id="container" >
    <div id="chart" style="width:1024px;height:768px"></div>
</div>

<script>
    $(function () {
        var data = {{{toJSON this}}}
        data.charts.forEach(function(data)  {
var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'chart',
        type: 'column',
    },
    colors: ['#7cb5ec'],
    title: {
        text: data.teamMember +'('+ data.dateRange +')',
         style: {
            fontSize: '40px'
        }
    },
    subtitle: {
        text: 'Operations Scanned',
              style: {
            fontSize: '20px'
        }
    },
       legend: {
        enabled: false
    },
    xAxis: {
        categories: data.categories,
        crosshair: true,
         labels: {
            rotation: -60,
            style: {
                color: 'black',
               fontSize: '16px',
                // fontSize: 11px
            }
        },
    },
    yAxis: {
        min: 0,
        tickInterval: 10,
        title: {
            text: ''
        },
            stackLabels: {
            enabled: true,
            style: {
                fontSize: '16px',
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
            }
        },
    },
    plotOptions: {
         series: {
            animation: false,
        },
        column: {
            stacking: 'normal',
             dataLabels: {
                enabled: false,
                color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                 formatter:function() {
                    if(this.y != 0) {
                      return this.y;
                    }
                }
            },
            pointPadding: 0.2,
            borderWidth: 0
        }
    },
    series: data.series
});
        })
       
    });
</script>

Data:

{
    "charts": [
        {
            "series": [
                {
                    "data": [
                        29,
                        20,
                        19,
                        9,
                        27,
                        67
                    ]
                }
            ],
            "categories": [
                "12/06/17",
                "12/07/17",
                "12/08/17",
                "12/11/17",
                "12/12/17",
                "12/13/17"
            ],
            "teamMember": "Jane D.",
            "dateRange": "12/06/17-12/13/17"
        },
                {
            "series": [
                {
                    "data": [
                        30,
                        19,
                        20,
                        11,
                        25,
                        99
                    ]
                }
            ],
            "categories": [
                "12/06/17",
                "12/07/17",
                "12/08/17",
                "12/11/17",
                "12/12/17",
                "12/13/17"
            ],
            "teamMember": "John D.",
            "dateRange": "12/06/18-12/13/18"
        }
    ]
}

[iii-james]

I found a solution. See the playground above and the "multiple-highcharts-fix" template.