dktg
Posts: 127
Joined: Mon Jan 29, 2018 2:19 pm

Labels on x-axis and tickInterval

Tue Oct 26, 2021 10:14 am

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,

magdalena
Posts: 227
Joined: Tue Aug 24, 2021 1:32 pm

Re: Labels on x-axis and tickInterval

Thu Oct 28, 2021 7:38 am

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!

dktg
Posts: 127
Joined: Mon Jan 29, 2018 2:19 pm

Re: Labels on x-axis and tickInterval

Thu Oct 28, 2021 9:19 am

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,

magdalena
Posts: 227
Joined: Tue Aug 24, 2021 1:32 pm

Re: Labels on x-axis and tickInterval

Thu Oct 28, 2021 12:40 pm

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!

dktg
Posts: 127
Joined: Mon Jan 29, 2018 2:19 pm

Re: Labels on x-axis and tickInterval

Thu Oct 28, 2021 1:05 pm

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,

magdalena
Posts: 227
Joined: Tue Aug 24, 2021 1:32 pm

Re: Labels on x-axis and tickInterval

Thu Oct 28, 2021 2:12 pm

You're welcome! :wink: In case of any further questions, feel free to contact us again.

Return to “Highcharts Usage”