highcharts / highcharts-react

The official Highcharts supported wrapper for React

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Setting numericSymbols to null or any other value than default has no effect

JWahlander opened this issue · comments

I'm trying to disable metric prefixes on axis labels in order to write the full number for high numbers but setting the numericSymbols to null, as described here (https://api.highcharts.com/highcharts/lang.numericSymbols), is not possible since numericSymbols is typed to string[].
I've aslo tried to enter other values in a string array but that does not have any effect.

Hi @JWahlander,

Thank you for contacting us!

You are right, the type should be: numericSymbols: Array<string | null>.
Please report it on the main repository: https://github.com/highcharts/highcharts/issues

However, you can set empty array to achieve the wanted result:

Highcharts.setOptions({
  lang: {
    numericSymbols: []
  }
});

Or you can also use format option, for example:

  yAxis: {
    labels: {
      format: '{value}'
    }
  }

Live demo: https://jsfiddle.net/BlackLabel/2mq53tvf/
API Reference: https://api.highcharts.com/highcharts/yAxis.labels.format

Best regards!

Thanks for getting back so fast!

I have submitted an issue as instructed.

I have also tested the suggested solutions but they do not work or do not work as expected.
Setting an empty array doesn't do anything. The default metric prefixes still renders.
Setting the labels to format: '{value}' does render the full number but without thousand separator. Eg. 200000 is not rendered as 200 000.

I can also add that setting the numericSymbols to other values also does not work. E.g.numericSymbols: [' thousands', ' millions']

@JWahlander, Using an empty array seems to work fine: https://jsfiddle.net/BlackLabel/wpbLnqx3/
Which Highcharts version do you use?

@ppotaczek "highcharts-react-official": "^3.2.1",

@ppotaczek I got it to work now but only if I use the Highchart.setOptions() function.
If I submit the value in the options property in the HighchartReact component it doesn't work.

@JWahlander, using the setOptions method is the proper way. In Highcharts API we can read:

lang
Language object. The language object is global and it can't be set on each chart initialization. Instead, use Highcharts.setOptions to set it before any chart is initialized.

API: https://api.highcharts.com/highcharts/lang

@ppotaczek Ah, my bad! Thanks for clarifying!