Is there a reliable way to have a 1 month auto gen

Question

High charts has a really nice way to generate dates for charts.

However since you need to specify a tickInterval to use generate the dates for each point, doing 1 month intervals is very difficult since they are irregular.

The recommended approach is to use a tick interval equal to 31 days, but there are a number of use cases where February gets skipped.

Is there a reliable way to have a 1 month auto generated tick interval with high charts ?

Answer 1

Seems like the example provided for irregular interval data would solve your problem: Highcharts Demo - Irregular Time Interval

The relevant code, from that example, for x-axis labeling is:

xAxis: {
   type: 'datetime',
   dateTimeLabelFormats: { // don't display the dummy year
      month: '%e. %b',
      year: '%b'
   }
},

Answer 2

This is pretty rough, but it should give you the basic idea. Relevant fiddle here.

xAxis: {
    minPadding: 0,
    // Ticks in binary positions
    tickPositioner: function(min, max) {

        var pos,
            tickPositions = [],
            tickStart = 0;

        var tick = 0;
        for (pos = 1; pos <= 12; pos++) {
            tick += new Date(2013, pos, 0).getDate();
            tickPositions.push(tick);
        }
        return tickPositions;

    },
    // Only show labels where there is room for them
    labels: {
        formatter: function() {
            var tick = 0;
            for (pos = 1; pos <= 12; pos++) {
                 if (tick == this.value) 
                     return monthNames[pos - 1];
                 tick += new Date(2013, pos, 0).getDate();
            }
        }
    }

The property 'tickPositioner' lets you set a custom function that generates ticks, and the property 'formatter' under labels lets you decide which ticks should generate labels, and what those should be. Between those two you will be able to generate months.

A few things to note:

• I hard-coded 2013 because I'm not really sure what your exact use case is; you'd have to account for different years having different numbers of days and what year the data belongs to.
• There may easily be off by one errors in my code related to what days the labels are set on, I put it together pretty quickly just to demonstrate the general concept.
• There's a decent amount of duplication that could be removed to make this example more DRY.

Answer 3

xAxis: {
    type: 'datetime',
    tickPositioner: function(min, max) {
        var ticks = [];
        var maxDate = new Date(max);
        var tickDate = new Date(min);
        while (tickDate <= maxDate) {
            ticks.push(tickDate.getTime());
            tickDate.setMonth(tickDate.getMonth() + 1);
        }
        ticks.info = {
            unitName: "month",
            higherRanks: {}
        };
        return ticks;
    },
    labels: {
        rotation: -45,
        align: 'right',
        x: 5
    }
}