We're implementing line charts with Highchart's API and have a requirement to end the xAxis scale with the last value provided in the data and display its tick label.
Data: [[2014-08-28, .434], [2014-10-17, .234], [2014-11-5, .134], [2015-01-12, .274]]
Expected:
Last plot on the xAxis: 2015-01-12 (Chart ends at this point)
Last tick label for xAxis: Jan '12
Actual (http://jsfiddle.net/u2pa6qqL/3/):
Last plot on the xAxis: 2015-01-12 (gap before the end of the chart area)
Last tick label for xAxis: Feb'15
$(function () {
$('#container').highcharts({
title: {
text: 'Chart reflow is set to true'
},
subtitle: {
text: 'When resizing the window or frame, the chart should resize accordingly'
},
xAxis: {
type: 'datetime',
endOnTick: true,
dateTimeLabelFormats: {
day: '%b %e'
},
},
series: [{
data: [[new Date('2014-08-28').getTime(),.434],[new Date('2014-10-17').getTime(),.234],[new Date('2014-11-5').getTime(),.134],[new Date('2015-01-12').getTime(),.274]]
}]
});
});
I've tried adjusting highchart settings like showLastLabel, endOnTick, setting xAxis extremes with MAX & Min values but nothing has resolved it.
If anyone can provide insight into this issue, it would be greatly appreciated.
Thanks, Sarath