2

I am using react-highcharts and trying to implement ReactHighstock. My charts are showing 'G' instead of 'B'(billions), to fix this I have to set numericSymbols in Highcharts.setOptions but I am not finding a way on how to implement it.

Thanks

krishna teja
  • 159
  • 2
  • 9

2 Answers2

3

You can define Highcharts.setOptions just before coding the class component.

Demo: https://codesandbox.io/s/highcharts-react-demo-n3mes

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

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

Sebastian Wędzel
  • 11,417
  • 1
  • 6
  • 16
  • Hi @Sebastin thanks for the answer, I am using react-highcharts npm package. May I know how can we do it in same way for react-highcharts? I have tried implementing this but it is not working. – krishna teja Feb 18 '20 at 15:33
  • 1
    I encourage to use official Highcharts React official npm package which is fully supported by Highcharts. https://www.npmjs.com/package/highcharts-react-official – Sebastian Wędzel Feb 18 '20 at 16:16
1

If you are using a functional component then this might helps.

import ReactHighcharts from 'react-highcharts/ReactHighstock.src';

useEffect(() => {
 ReactHighcharts.Highcharts.setOptions({
  lang: {
    numericSymbols: ["k", "M", "B", "T", "P", "E"]
  }
 });
}, []);
Rahul Darji
  • 43
  • 6