Search code examples
anychart

How to format x labels for a datetime scale


I have this chart https://playground.anychart.com/D7okDBpO/4

AFAIK the x labels are automatically formatted according to the anychart.format.outputDateFormat(), so the only way to format them is to call anychart.format.outputDateFormat("someformat"). The problem is that I have multiple charts on a page and they all need different formats, and changing this global setting from multiple charts leads to concurrency issues (on some charts, the x labels are formatted with multiple different formats).

Is there some other way to format them? Having access to the original data from the formatting function for x labels would be enough, but it's not there:

chart.xAxis().labels().format(function () {
    console.log(this); // only contains the already formatted date
    return this.value;
});

Solution

  • this.tickValue contains unformatted dates, so you can use the {%tickValue} and {%x} string tokens to format the axes labels and the tooltip respectively. Please check this sample, pay attention to lines 35-36.