JavaScript
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: "container",
type: "column"
},
plotOptions: {
series: {
pointWidth: 25
},
line: {
marker: {
type: 'dot'
}
}
},
title: {
text: null
},
series: [{"name":"india","data":[{y:1, color: 'red'},{y:3, color: '#f99820'},{y:3, color: '#f1da37'},{y:2, color:'#965129'}]},
{"name":"usa","data":[0,0,0,0,{y:3, color: 'red'},{y:2, color: '#f99820'},{y:3, color: '#f1da37'},
{y:1, color: '#965129'}]},
{"name":"china","data":[0,0,0,0,0,0,0,0,{y:3, color: 'red'},{y:2, color: '#f99820'},{y:3.1, color: '#f1da37'},{y:1.9, color: '#965129'}
]},{"name":"target","data":[3,1,3,2,2, 1, 1.9,2.4,2.8,1.9, 2.9, 1.6],yAxis:1, type: 'line'},
{"name":"baseline","data":[1.3,.1,1.3,0,1.2, .5, 1.2,.2,.5,1.2, 2.1, .2],yAxis:1, type: 'line'}],
xAxis: {
categories:[{"name":"india","categories":["june 2016","july 2016","august 2016","september 2016"]},{"name":"usa","categories":["may 2017", "june 2016","july 2016","august 2016"]},{"name":"china","categories":["may 2017", "june 2017","july 2017","august 2017"]}]
},
yAxis: [{ // Primary yAxis
labels: {
format: '{value}',
style: {
color: '#89A54E'
}
},
title: {
text: 'Temperature',
style: {
color: '#89A54E'
}
}
}, { // Secondary yAxis
title: {
text: 'Rainfall',
style: {
color: '#4572A7'
}
},
labels: {
format: '',
style: {
color: '#4572A7'
...