hiroyannnnの雑記

エンジニアの雑記です。

ReactHighCharts 区切り文字の変更

素のHighchartsを使うとき、
桁区切りが' '(半角スペース)となっているため、
グラフ上の数値が
123 456 789のように表示されてしまう。
123,456,789 のようにしたい場合は、thousandsSep を変更することで、カンマ区切りで表示される。

参考
参考

Reactでreact-highchartsを使用する場合、 以下のようなラップコンポーネントを作成し、

import ReactHighcharts from 'react-highcharts';

const option = {
  lang: {
    thousandsSep: ',',
  },
};
ReactHighcharts.Highcharts.setOptions(option);

export default ReactHighcharts;

グラフを表示するコンポーネント

import ReactHighcharts from 'react-highcharts';

としていた部分を

import ReactHighcharts from 'xxx(ラップコンポーネントを指定)';

とすれば良い。