JavaScript
Highcharts.chart('predictedmarginchart', {
chart: {
type: 'area',
margin: [5, 5, 15, 5],
},
title: {
text: null
},
credits: {
enabled: false
},
xAxis: {
padding: 0,
lineWidth: 1,
tickWidth: 0,
type: 'datetime',
tickInterval: 24 * 3600 * 1000, // interval of 1 day
pointStart: Date.UTC(2018, 0, 2),
labels: {
y: 8,
step: 90,
format: '{value:%e-%m}',
style: {
font: 'normal 8px Arial',
color: "#999",
}
},
plotLines: [{
color: '#666666',
dashStyle: 'line',
value: Date.UTC(2018, 3, 1),
width: 1,
zIndex: 1
}],
},
yAxis: {
opposite: true,
minorGridLineWidth: 0,
gridLineWidth: 0,
floor: 4,
ceiling: 6,
max: 7,
title: {
enabled: false
},
labels: {
enabled: false
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: '<b>€ {point.y}</b><br/>',
valueSuffix: ' Predicted Margin',
},
plotOptions: {
area: {
fillOpacity: 0.2,
pointPadding: 0,
borderWidth: 0,
groupPadding: 0.1,
pointStart: Date.UTC(2018, 0, 2),
},
series: {
pointStart: Date.UTC(2018, 0, 2),
pointInterval: 24 * 3600 * 1000, // one day
}
},
series: [{
name: 'Predicted Margin',
color: '#009900',
lineWidth: 1.5,
data: [4.83,
4.86,
4.87,
4.84,
4.84,
4.87,
4.85,
4.87,
4.89,
4.92,
4.94,
4.94,
4.94,
4.92,
4.91,
4.95,
4.97,
4.99,
5.00,
4.99,
4.97,
4.99,
4.97,
4.97,
4.96,
4.97,
4.98,
4.98,
4.97,
4.96,
4.98,
4.96,
4.94,
4.91,
4.92,
...