HighCharts Advanced format lang to change the X-Axis label "G" for Giga to "B"

HighCharts Advanced format lang to change the X-Axis label "G" for Giga to "B"

  

I am doing HighChart column graph on mobile for a system dealing in currency.

WHen the figures are over 1 000 000 000, then it displays the shorthand version of the numnebr in the Y-axis suffixed with "G" instead of "B" for Billion. My client wants me to change this. How can I do this please?

I can see from the HighCharts API it is set in the following:

Highcharts.setOptions({
lang: {numericSymbols: [ 'k' , 'M' , 'B' , 'T' , 'P' , 'E'] }
});


I created a graph widget on the mobile page with a local variable assigned for the AdvancedFormat attribute which I set after the data was fetched (using AdvancedFormat_Init) to set the color and labels of the legend and some other formatting, this formatting all works fine. I tried setting this "lang: {numericSymbols: [ 'k' , 'M' , 'B' , 'T' , 'P' , 'E'] }" in this variable in the "Highcharst.JSON" field before I call AdvancedFormat_Init, but it does nothing.


Please, how can I change this?

Hi, can you share a simple oml.

I'm sure you are on the right track :)


Solution

Hi Elize,

Those options are global ones (for all charts). Thus, you have to set them up using the Highcharts.setOptions and not the AdvanceFormat parameter (which is for that particular chart).

To do what you want do this:

  • Add an handler action to the OnRender event for your screen.
  • In that action add a Javascript statement
  • In the javascript do:
Highcharts.setOptions({lang: {numericSymbols: [ 'k' , 'M' , 'B' , 'T' , 'P' , 'E']}});

See if it works for you.

Cheers,

José

Solution

José Costa wrote:

Hi Elize,

Those options are global ones (for all charts). Thus, you have to set them up using the Highcharts.setOptions and not the AdvanceFormat parameter (which is for that particular chart).

To do what you want do this:

  • Add an handler action to the OnRender event for your screen.
  • In that action add a Javascript statement
  • In the javascript do:
Highcharts.setOptions({lang: {numericSymbols: [ 'k' , 'M' , 'B' , 'T' , 'P' , 'E']}});

See if it works for you.

Cheers,

José

Hi José,


Thank you, that makes absolute sense. Why did I not think of that? :) 

I even today added Javascript to replace in the innerHTML of the YaxisLabels 'G' with 'B' in OnRender, which works, but I would prefer to be able to rather setOptions, which is the correct way. I am going to try this tomorrow, will let you know.


Hi Elize,

Glad to help.

Cheers,

José