Highcharts Demo

author(s): Torstein Hønsi

by hendrikdegraaf

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/offline-exporting.js"></script>

<button id="export-to-pdf">Export to PDF</button>
<button id="export-to-png">Export to PNG</button>
<div id="container"></div>

CSS

#container {
    height: 400px;
    margin: 0 auto;
    margin-top: 1em;
    min-width: 320px;
    max-width: 800px;
}

JavaScript

function renderCustomSVG() {
  /* Here I would like to check if currently a export to PDF is happening
   * and if so, I want to set the fontWeight to normal, so we don't end
   * up with a serif font in the PDF */
	this.renderer
  	.text('Hello world', 80, 100)
    .attr({
    	'font-size': '60px',
    	'font-weight': 'lighter'
    })
    .add()
}

const sharedExportOptions = {
    sourceHeight: 400,
    sourceWidth: 800,
    scale: 1,
    fallbackToExportServer: false,
}

const chart = Highcharts.chart('container', {

    chart: {
        type: 'column',
        events: {
        	load: renderCustomSVG
        }
    },
    title: {
        text: 'Data labels only visible on export'
    },

    xAxis: {
        categories: [
            'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep',
            'Oct', 'Nov', 'Dec'
        ]
    },

    series: [{
        data: [
            29.9, 71.5,
            106.4, 129.2,
            144.0, 176.0,
            135.6, 148.5,
            216.4, 194.1,
            95.6, 54.4
        ]
    }],

    exporting: {
			enabled: false,
				chartOptions: {
        	chart: {
          	events: {
            	load: renderCustomSVG,
            },
          },
        },
    }

});

document.getElementById('export-to-pdf').addEventListener('click', () => {
    console.log('clicked export to PDF')
    chart.exportChartLocal({
        ...sharedExportOptions,
        type: 'application/pdf',
        filename: 'my-pdf'
    });
});

document.getElementById('export-to-png').addEventListener('click', () => {
    console.log('clicked export to PNG')
    chart.exportChartLocal({
        ...sharedExportOptions,
        type: 'image/png',
        filename: 'my-png'
    });
});