JSFiddle - React, Tailwind, and code Playground
by Fusher
HTML
<div id="container2" style="border:1px solid red"><div id="container"></div></div>
<script src="http://code.highcharts.com/master/highcharts.src.js"></script>
JavaScript
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'column'
},
plotOptions: {
series: {
stacking:'normal',
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000'
}
}
},
title: {
text: 'Indirect Cost Savings'
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Amount'
}
},
series: []
};
data = "Period,P01,P02,P03,P04,P05,P06,P07,P08,P09,P10,P11,P12,P13\nSavings,316348,129737,310532,88046,244480,276049,166262,65883,39780,184843,252477,258967,35614\nAvoidance,20897,32382,22864,43760,70854,4368,5265,107634,58846,16192,4427,6742,17571";
// Split the lines
var lines = data.split('\n');
$.each(lines, function(lineNo, line) {
var items = line.split(',');
// header line containes categories
if (lineNo == 0) {
$.each(items, function(itemNo, item) {
if (itemNo > 0) options.xAxis.categories.push(item);
});
}
// the rest of the lines contain data with their name in the first position
else {
var series = {
data: []
};
...