Highcharts label format with tickPositioner in a datetime x Axis

Question

In my chart ,I try to display only 5 ticks in a datetime axis, I use the tickPositioner function and set only 5 ticks ,this work perfect but the data labels loss it's format and show only numbers.

I use the formatter function but i need a grouping labels for the zoom.

Answer 1

It's little hacky, but you need also calculate information about labels and add them, for example: http://jsfiddle.net/AVhaL/

        tickPositioner: function (min, max) {
            var ticks = this.getLinearTickPositions(this.tickInterval, min, max),
                tLen = ticks.length;

            ticks.info = {
                unitName: "week",
                higherRanks: {},
                totalRange: ticks[tLen - 1] - ticks[0]
            };
            return ticks;
        }

So according to totalRange , you need to pass unitName - it's information which format should be taken from dateTimeLabelFormats .

Answer 2

You only need format label, after put ticks.

  Options.xAxis.tickPositioner = function () {
    const ticks = this.series[0].xData;
    let result = [];

    for (let index = 0; index < ticks.length; index++) {
      result.push(ticks[index]);
    }
    return result;
  };

and format xAxis

labels: {
    format: "{value:%b-%Y}",
    align: "center"
}

to tooltips

tooltip: {
    valueSuffix: "",
    valuePrefix: "",
    xDateFormat: "%B - %Y",
    valueDecimals: 0
},