How to display months in x axis labels in highcharts - highcharts

Question

PROBLEM
I have data coming for x axis as xAxisLabel ['Jul 16', 'Oct 16', 'Jan 17', 'May 17', 'Jul 17', 'Oct 17', 'Jan 18', 'Apr 18','Aug 20','Sep 20'] whose length may vary. I have to display only 8 labels on the x-axis whatever the length of data may be i.e skip interval will be decided by dividing length of data by 8.
Solutions TRIED
I tried using tickPositioner to pass only 8 dates. But somehow, it is not getting displayed.
xAxis: {
tickPositioner: function() {
let dataDisplay=[]
let xAxisLabel=['Jul 16', 'Oct 16', 'Jan 17', 'May 17', 'Jul 17', 'Oct 17', 'Jan 18', 'Apr
18','Aug 20','Sep 20'];
let steps = xAxisLabel.length/8
for(let i=0,k=0;k<8;i+=steps,k++){
dataDisplay[k] = xAxisLabel[i]
}
return dataDisplay;
},
labels:{
enabled:true,
formatter: function(){
return this.value;
}
},
},
Can anyone help in achieving the desired result?
Here is the fiddle
https://jsfiddle.net/harshita_97/sd3trebz/20/

Answer 1

I have a full example here (any questions let me know).
https://jsfiddle.net/alexander_L/6p1nk73y/14/
Also, here in a Stack Overflow Snippet:
let xAxisLabel=['Jul 16', 'Oct 16', 'Jan 17', 'May 17', 'Jul 17', 'Oct 17', 'Jan 18', 'Apr 18','Aug 20','Sep 20', 'Oct 20', 'Dec 20'];
let yAxisData = [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4];
//const newDate = new Date('Jul 1 16'); //test it parses data correctly
const myData = xAxisLabel.map((child,index) => {
const modString = child.replace(/ /, " 1 ");
const newDate = new Date(modString);
const month = newDate.getMonth();
const year = newDate.getFullYear();
return [Date.UTC(year, month, 1),yAxisData[index]]
});
//console.log(myData)
Highcharts.chart('container', {
chart: {
type: 'spline'
},
title: {
text: 'Example data'
},
subtitle: {
text: 'Irregular time data in Highcharts JS'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // do display the year
month: '%b %y',
year: '%Y'
},
title: {
text: 'Date'
},
/*tickInterval: 1*/
tickPixelInterval: 100
},
yAxis: {
title: {
text: 'Some Example Values'
},
min: 0
},
series: [{
name: "my Example Data",
data: myData
}],
plotOptions: {
series: {
marker: {
enabled: true
}
}
},
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px; width: 500px"></div>
Output:
Important is to parse your strings to real dates and then add them in the data as a 2D array.
this is done with the .map(), essentially zipping the two arrays together:
let xAxisLabel=['Jul 16', 'Oct 16', 'Jan 17', 'May 17', 'Jul 17', 'Oct 17', 'Jan 18', 'Apr 18','Aug 20','Sep 20', 'Oct 20', 'Dec 20'];
let yAxisData = [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4];
//const newDate = new Date('Jul 1 16'); //test it parses data correctly
const myData = xAxisLabel.map((child,index) => {
const modString = child.replace(/ /, " 1 ");
const newDate = new Date(modString);
const month = newDate.getMonth();
const year = newDate.getFullYear();
return [Date.UTC(year, month, 1),yAxisData[index]]
});
Essentially giving this data structure:
[
[1467331200000, 29.9]
[1475280000000, 71.5]
[1483228800000, 106.4]
[1493596800000, 129.2]
[1498867200000, 144]
[1506816000000, 176]
[1514764800000, 135.6]
[1522540800000, 148.5]
[1596240000000, 216.4]
[1598918400000, 194.1]
[1601510400000, 95.6]
[1606780800000, 54.4]
]
Also to modify the ticks:
And to modify the ticks, you can modify like this (with tickPixelInterval: 60 etc.):
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%b',
year: '%Y'
},
title: {
text: 'Date'
},
/* tickInterval: 1 */
tickPixelInterval: 60
},
Then we get:
Or with tickPixelInterval: 20 we get:
To modify the ticks further you can try this:
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // do display the year
month: '%b %y',
year: '%Y'
},
title: {
text: 'Date'
},
/*tickInterval: 1*/
tickPixelInterval: 10
}
Then the output also includes the year in the month view like so:
Example:
let xAxisLabel=['Jul 16', 'Oct 16', 'Jan 17', 'May 17', 'Jul 17', 'Oct 17', 'Jan 18', 'Apr 18','Aug 20','Sep 20', 'Oct 20', 'Dec 20'];
let yAxisData = [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4];
//const newDate = new Date('Jul 1 16'); //test it parses data correctly
const myData = xAxisLabel.map((child,index) => {
const modString = child.replace(/ /, " 1 ");
const newDate = new Date(modString);
const month = newDate.getMonth();
const year = newDate.getFullYear();
return [Date.UTC(year, month, 1),yAxisData[index]]
});
//console.log(myData)
Highcharts.chart('container', {
chart: {
type: 'spline'
},
title: {
text: 'Example data'
},
subtitle: {
text: 'Irregular time data in Highcharts JS'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // do display the year
month: '%b %y',
year: '%Y'
},
title: {
text: 'Date'
},
/*tickInterval: 1*/
tickPixelInterval: 10
},
yAxis: {
title: {
text: 'Some Example Values'
},
min: 0
},
series: [{
name: "my Example Data",
data: myData
}],
plotOptions: {
series: {
marker: {
enabled: true
}
}
},
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px; width: 500px"></div>
or demo in jsfiddle: https://jsfiddle.net/alexander_L/6p1nk73y/20/