CODEWITHSUNDEEP
highcharts
user471317
user471317

Reputation: 1231

Highstock xAxis label formatting

We have a requirement to display the x-axis labels in different formats depending on the timeframe. User has the ability to change the timeframe using navigation bar (or zoom bar) that appears beneath the chart.

For example, for less than 1 day timeframe, the labels should be in hours and mins - "09:45", for 1 day to 1 month timeframe, the labels should be month and date - "Jul 21", etc.

I am using 'tickPositioner' to return the right number of ticks, calculated using min and max values. Now I want to use 'formatter' to display the ticks in the format we need, but it doesn't look like I can access min/max values from within this function. Is that correct? If yes, how can I do the custom formatting like we want to?

Thanks.

Upvotes: 0

Views: 851

Answers (1)

Halvor Holsten Strand
Halvor Holsten Strand

Reputation: 20536

You can find the min and max of the axis through the formatter like this:

xAxis: {
    type: 'datetime',
    labels: {
        formatter: function() {
            console.log(this.axis.min);
            console.log(this.axis.max);
            return this.value; // Default. Return something relevant instead
        },
    }
}

See the API (or console.log) for all values of this in the formatter. The axis might here be the y-axis as well. You can always access the x-axis through this.chart.xAxis[0] if necessary.

Note however that unless you want to be very specific with your formatting you might want to consider customizing dateTimeLabelFormats (API).

Upvotes: 2

Related Questions