HighchartsをReactで使う

ReactなWebアプリケーション内に、Hightchartsでグラフを描画するときのメモ。

基本的には、Hightcharts公式のReact用ラッパーライブラリを使えば良い。
GitHub - highcharts/highcharts-react: The official Highcharts supported wrapper for React

npmにあるので、Highcharts本体とこのライブラリを入れる。

npm install highcharts highcharts-react-official

• ミニマムなexampleは上記の公式GitHubリポジトリにあるとおり
• 実際は、チャートだけを独立したコンポーネントにすることがほとんど
• チャートのoptionパラメータが多いので、別のファイルに書いたり、サーバからJSONで取ってきたりする
• グラフデータのフォーマットが想定されているものと合っていないと、コンソールに Uncaught ReferenceError: Highcharts is not definedエラーが出る
• 開発時に、とりあえずで空配列を渡してもこのエラーが出るので、最初から描画可能なモックデータを渡すのが良さそう
• テンプレートにしてるコード：GitHub - yuw27b/react-highcharts-template　（2020/07/05更新）