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

Labels on x-axis and tickInterval

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: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: Labels on x-axis and tickInterval

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!
Magdalena Gut
Developer and Highcharts Support Engineer
dktg
Posts: 151
Joined: Mon Jan 29, 2018 2:19 pm

Re: Labels on x-axis and tickInterval

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: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: Labels on x-axis and tickInterval

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!
Magdalena Gut
Developer and Highcharts Support Engineer
dktg
Posts: 151
Joined: Mon Jan 29, 2018 2:19 pm

Re: Labels on x-axis and tickInterval

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: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: Labels on x-axis and tickInterval

You're welcome! :wink: In case of any further questions, feel free to contact us again.
Magdalena Gut
Developer and Highcharts Support Engineer

Return to “Highcharts Usage”