Compact labels with correct precision

[floatingrock]

I'm encountering a challenge with the customization of my Y-axis labels in a Highcharts Stock chart. Specifically, I'm trying to feed a dynamic precision parameter to a custom numCompact() method, which is responsible for formatting the Y-axis labels. The aim is to ensure that no two labels on the Y-axis are identical by intelligently adjusting the decimal precision based on the range of values being displayed.

Screenshot at Sep 26 20-29-38.png (88.5 KiB) Viewed 711 times

Chart Options in Use
Here's a snippet of my current chart options related to the Y-axis:

Code: Select all

{
  yAxis: {
    opposite: false,
    gridLineColor: "#F3F4F5",
    tickWidth: 0,
    gridLineWidth: 1,
    labels: {
      formatter: function () {
        return '$' + numCompact(this.value, 0);
      },
      y: 6,
      style: {
        fontSize: 15,
        color: "#606367",
      },
    },
  }
}

numCompact Function Definition

I'm using the following function to format the Y-axis labels in a more compact form, like "1.2k", "1.2m", etc.

Code: Select all

function numCompact(num: number, precision = 2) {
  const map = [
    { suffix: "t", threshold: 1e12 },
    { suffix: "b", threshold: 1e9 },
    { suffix: "m", threshold: 1e6 },
    { suffix: "k", threshold: 1e3 },
    { suffix: "", threshold: 1 },
  ];

  const found = map.find((x) => Math.abs(num) >= x.threshold);
  if (found) {
    const formatted = (num / found.threshold).toFixed(precision) + found.suffix;
    return formatted;
  }

  return num;
}

Issue Description
With the current setup, I've fixed the precision parameter to zero in the numCompact() method. As a result, there is a possibility of having identical labels on the Y-axis. I'm looking for a way to dynamically adjust this precision parameter based on the values displayed to ensure uniqueness among Y-axis labels.

Questions
1. Is there a native Highcharts way to achieve this level of dynamic customization for Y-axis labels?
2. If not, can you recommend an optimal strategy to feed a dynamic precision parameter into numCompact() to ensure unique Y-axis labels? This would require knowing all the label values ahead of time, and I haven't found a way to get that in the docs.

I would really appreciate your expertise on this matter. Thank you in advance for your assistance.

[jedrzej.r]

Hi!

Thanks for reaching out to us with your question!

1. I don't think there is any built-in function that provides such level of labels customization. The formatter function is provided to allow users possibility of customizing the ouptut of labels. Although there is a Highcharts numberFormat function that provides a rounding of decimal points, it isn't exactly what could help in your problem: https://api.highcharts.com/class-refere ... ckFunction

2. If you would know the ticks value before setting the labels format, than it wouldn't be an issue at all. But assuming the data provided is dynamic, and the y-axis extremes can vary, I can reccomend you to iterate through the ticks after the initial chart load, and if the label is duplicated, update the y-axis labels with different precision for the duplicated ticks.

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

API:
https://api.highcharts.com/highstock/chart.events.load
https://api.highcharts.com/class-refere ... Axis#ticks
https://api.highcharts.com/class-refere ... xis#update

Let me know if you have any further questions!
Best regards!