Highcharts step & offset x axis labels?

3
votes

I've got some charts where I'm passing date values as the x axis labels. They could start and end on any date range.

If the date range is >2 months then I need the x axis to only show label values on the 1st of each month.

I know I can achieve the spacing with a tickinterval option, but I can't seem to force the labels to start on the 1st of the month or the first Monday, they always start from the first value in the range.

Here's an example of what I have now. The date range is 13th Nov to 3rd Feb:

enter image description here

And this is what I want the x axis to look like (this is photoshopped):

enter image description here

Is there a way to achieve this?

1
javascripthighcharts
Step option? Do you mean tickInterval? And what does "If the date range is is" mean? - Mark
The angle bracket had hidden some of my text - updated - hud

1 Answers

7
votes

Does a combination of tickInterval and dateTimeLabelFormats achieve what you want?

xAxis: {
    type: 'datetime',
    dateTimeLabelFormats: {
                    month: '%d %b',
                },
    tickInterval: 86400000 * 31  // one month
}

Sample (fiddle here):

enter image description here