JSFiddle - React, Tailwind, and code Playground
HTML
<div id="container" style="height: 400px; min-width: 310px"></div>
<button id="button1">PNG</button>
<button id="button2">CSV??</button>
<button id="button3">XLS??</button>
<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/export-data.js"></script>
<script src="https://code.highcharts.com/modules/offline-exporting.js"></script>
JavaScript
$(function () {
Highcharts.chart('container', {
title: {
text: 'Test export'
},
series: [{
name: 'series1',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: 'series2',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}],
});
// Export TO PNG
$('#button1').click(function () {
var chart = $('#container').highcharts();
chart.exportChartLocal({
type: 'image/png'
});
});
// Export TO CSV ??
$('#button2').click(function () {
var chart = $('#container').highcharts();
chart.exportChartLocal({
type: 'text/csv'
});
});
// Export TO XLS ??
$('#button3').click(function () {
var chart = $('#container').highcharts();
chart.exportChartLocal({
type: 'application/vnd.ms-excel'
});
});
});