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>
<button id="button"> click! </button>
<div id="con1" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
JavaScript
$(function () {
var chart;
$(document).ready(function () {
var colors = Highcharts.getOptions().colors,
categories1 = ['1011', '1112', '1213', '1415'],
name1 = 'Actual',
data1 = [{
y: 1674,
color: colors[0],
drilldown: {
name: '1011 Actual',
categories: ['BS', 'B', 'IT', 'C'],
data: [3, 32, 54, 50],
color: colors[0],
name1: '1011 Target',
data1: [0, 31, 50, 60],
color1: colors[1]
}
}];
var colors = Highcharts.getOptions().colors,
categories2 = ['1011', '1112', '1213', '1415'],
name2 = 'Target',
data2 = [{
y: 1633,
color: colors[1],
drilldown: {
name: '1011 Actual',
categories: ['BS', 'B', 'IT', 'C'],
data: [3, 32, 54, 50],
color: colors[0],
name1: '1011 Target',
data1: [0, 31, 50, 60],
color1: colors[1]
}
}];
function setChart(name, categories, data, color) {
console.log(name, categories, data, color);
chart.xAxis[0].setCategories(categories);
while (chart.series.length > 0) {
chart.series[0].remove(true);
}
for (var i = 0; i < data.length; i++) {
chart.addSeries({
name: name[i],
data: data[i],
color: color[i]
});
}
}
chart = new Highcharts.Chart({
chart: {
renderTo: 'con1',
type: 'column'
},
title: {
text: 'Learner Responsive 16-18'
},
...