JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<button id="btn">Trigger</button>
JavaScript
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'area',
marginTop: 200
},
title: {
text: 'Chart title'
},
xAxis: {
labels: {
formatter: function() {
return this.value; // clean, unformatted number for year
}
}
},
yAxis: {
title: {
text: 'Nuclear weapon states'
},
labels: {
formatter: function() {
return this.value / 1000 +'k';
}
}
},
plotOptions: {
area: {
pointStart: 1940,
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
},
series: [{
name: 'F',
data: [6 , 11, 32, 110, 235, 369, 640, 1005, 1436 ]
}, {
name: 'C',
data: [5, 25, 50, 120, 150, 200, 426, 660, 869, 1060]
}]
});
});
var btn = $('#btn');
btn.click(function(){
chart.optionsMarginTop += 20;
chart.isDirtyBox = true;
chart.redraw();
});
});