記事作成時の recharts のバージョン: 2.12.7 はじめに 前回の記事recharts の円グラフ入門（TypeScript）では、recharts の円グラフの基本的な使い方を紹介しました。 今回のテーマとなるCustomActiveShapePieChartは、rechats の公式サイトの samples の中でも発展的な内容になっており、また、TypeScript への変換も少しコツが必要です。 ということで、早速本題です。 CustomActiveShapePieChart ドーナツ型の円グラフです。とてもおしゃれですね。 ドーナツの穴の部分にデータのラベルが、ドーナツの外側の部分にデータの値が表示されるようになっています。 下の公式サイトに飛んでみると分かりますが、円グラフをホバーすると表示されるラベルも変化するとてもインタラクティブなグラフです。 公式のサンプルコ

記事作成時の recharts のバージョン: 2.12.7 はじめに React でグラフを描画するライブラリの１つにrechartsがあります。 今回、業務で recharts を使って円グラフを作成する機会があったので、公式サイトのサンプルコードの読み解きと自分なりのカスタマイズを行いました。 下記で記載するコードはすべて github 上にアップしています。 （recharts や React, TypeScript のバージョンなども github のコードを見てください） TwoLevelPieChart 公式のサンプルコード：https://recharts.org/en-US/examples/TwoLevelPieChart ドーナッツ状の円グラフの中に、普通の形の円グラフが入っている形状をしています。 一見２つの円グラフは何かしらの関係を持っていそうですが、実際は完全に