Question

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:

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

Is there a way to achieve this?

Answer 1

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):