JavaScript
$(function () {
$('#container').highcharts({
chart: {
type: 'area',
plotBackgroundColor: '#00B417'
},
xAxis: {
categories: ['Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov'],
endOnTick: false,
startOnTick: false,
min: 0,
max: 7.5
},
yAxis: {
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
plotOptions: {
area: {
pointPlacement: 'on'
}
},
series: [{
showInLegend: false,
data: [194, 194, 194, 194, 194, 194, 194, 194, 194],
marker: {
enabled: false
},
fillColor: '#D9B900',
lineColor: '#D9B900'
}, {
showInLegend: false,
data: [180, 180, 180, 180, 180, 180, 180, 180, 180],
marker: {
enabled: false
},
fillColor: '#B80006',
lineColor: '#B80006'
}, {
type: 'line',
name: 'Actual Values',
lineColor: '#000000',
color: '#000000',
data: [225, 215, 200, 185, 175, 185, 200, 215, 225]
}, {
type: 'line',
name: 'Target Values',
lineColor: '#0000ff',
color: '#0000ff',
data: [200, 200, 200, 200, 200, 200, 200, 200, 200]
}]
});
});