JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="chartContainer" style="width: 930px;height:300px"></div>
<button id="b1"> update one point</button>
JavaScript
var chart = null,
jsonData = {};
jsonData.xAxis = ["Aug 2011", "Jun 2011", "Jul 2011", "Aug 2011", "Sep 2011", "Aug 2011", "Nov 2011", "Dec 2011", "Jan 2012", "Feb 2012", "Mar 2012", "Apr 2012"];
jsonData.yAxis = [7, 7, 13.5, 15.75, 12.5, 8, 4, 4, 3, 0, 0, 0];
function initializeChart() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'chartContainer',
animation: false
},
series: [{
id: 'Example',
name: 'Example',
data: [],
type: 'column'
}]
});
}
function updateChartData() {
initializeChart();
chart.xAxis[0].setCategories(jsonData.xAxis, false);
chart.get('Example').setData(jsonData.yAxis, false);
chart.redraw();
}
updateChartData();
$('#b1').click(function() {
chart.get('Example').data[0].update(1, true);
});