Page 1 of 1

Labels on x-axis and tickInterval

Posted: Tue Oct 26, 2021 10:14 am
by dktg
Hi, we have a line chart with csv-data where the values define a mean of a periode that includes to years. We therefore included a string for the year (i. e. "2001/02" for data from the year 2001 and 2002). To keep the labels short, we didn't write out the second year. However, this results in labels that are plotted differently. Those that could also be years and months, the labels are written with a "-" as separator, the others still with a slash, even if I try to format the labels as text. The second odd thing is, that only every second label is plottet, even when I set the tickInterval to 1. Here is the example code: https://jsfiddle.net/statistik_tg/kqs2b0u9/2/
How can I fix those two points?

Thanks for your support and kind regards,

Re: Labels on x-axis and tickInterval

Posted: Thu Oct 28, 2021 7:38 am
by magdalena
Hi,

Thanks for contacting us with your question!

The reason why not all labels are displayed is simply not enough space To fix that you need to remove max-width rule and expand chart width or use options like allowOverlap.

When it comes to separators, it is hard to say what caused this behaviour, but I would suggest changing labels format in the formatter.

Code: Select all

  formatter: function() {
        var label = this.value.toString();
        var newLabel = label.replace(/-/g, '/');
        return newLabel
      },

API References
https://api.highcharts.com/highcharts/x ... lowOverlap
https://api.highcharts.com/highcharts/x ... .formatter

Demo:
https://jsfiddle.net/BlackLabel/c4anr2zb/

Let me know if you have any further questions!
Regards!

Re: Labels on x-axis and tickInterval

Posted: Thu Oct 28, 2021 9:19 am
by dktg
Hi, thank you for your answer and the code. That works perfectly. Is there a similar way to include this formatting option for the tooltip as well?

Kind regards,

Re: Labels on x-axis and tickInterval

Posted: Thu Oct 28, 2021 12:40 pm
by magdalena
Hi,

Yes, there is an analogical formatter function for the tooltip.

API Reference:
https://api.highcharts.com/highcharts/tooltip.formatter

Demo:
https://jsfiddle.net/BlackLabel/pxwmz9da/

Regards!

Re: Labels on x-axis and tickInterval

Posted: Thu Oct 28, 2021 1:05 pm
by dktg
Hi, thank you for your answer and the code. I confused key and value in the tooltip formatter, therefore didn't get a proper result. Now it works like we wished :).

Thank you and kind regards,

Re: Labels on x-axis and tickInterval

Posted: Thu Oct 28, 2021 2:12 pm
by magdalena
You're welcome! :wink: In case of any further questions, feel free to contact us again.