Highcharts.chart('container', {
title: {
text: 'Fee Collected'
},
subtitle: {
text: 'Actual Vs Budget'
},
yAxis: {
title: {
text: '%'
},
min: 80,
max: 120
},
xAxis: {
type: 'datetime',
labels: {
style: {
fontFamily: 'Tahoma'
},
rotation: -45
},
tickInterval: 24 * 3600 * 1000 * 7,
/*seven days*/
tickPositioner: function(min, max) {
var interval = this.options.tickInterval,
ticks = [],
count = 0;
while (min < max) {
ticks.push(min);
min += interval;
count++;
}
ticks.info = {
unitName: 'day',
count: 7,
higherRanks: {},
totalRange: interval * count
}
return ticks;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
pointStart: 0
}
},
series: [{
data: [88, 90, 88, 96, 97, 105, 106, 110, 118],
pointStart: Date.UTC(2009, 0, 1),
pointInterval: 24 * 3600 * 1000 * 7 // seven days
}]
});
#container {
min-width: 310px;
max-width: 800px;
height: 400px;
margin: 0 auto
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>