自分用のメモ程度に書いているので、雑です。
やりたきこと
react(TypeScript)で、Highchartsの下記のデモページのようにpie drilldownグラフを描画したい。
pie drilldownデモページ
環境
├── highcharts-react-official@3.2.0
├── highcharts@10.3.3
├── next@13.1.6
├── react@18.2.0
└── typescript@4.9.5
Highchartsのインストール
npm i highcharts highcharts-react-official
メモ
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import HighchartsAccessibility from "highcharts/modules/accessibility";
import HighchartsExporting from 'highcharts/modules/exporting'
import drilldown from "highcharts/modules/drilldown";
export default function MyComponent(){
// 値のセットをする前に、drilldown関数を呼ぶだけでした
drilldown(Highcharts);
/* ---------------------------------------- *
* データセットはちょっと省略。
* ---------------------------------------- */
return(
<HighchartsReact
highcharts={Highcharts}
options={chartOptions}
ref={chartComponentRef}
/>
)
}