📊
React のチャートライブラリ選定
はじめに
画面上にチャートが 5 個程度で、そこまでデータも大きくない管理画面を作成予定です
そこで利用するチャートライブラリを選定しました
そこまで要件の難易度が高くない画面なので、公式ドキュメントのデモなどをベースに軽く調査しました
先に結論からですが、recharts にしました
理由は後述の選定基準を満たしていて、利用する上での実装方法が好みだったからです
以下は recharts の公式ドキュメントのラインチャートの HTML です
<ResponsiveContainer width="100%" height="100%">
<LineChart
width={500}
height={300}
data={data}
margin={{
top: 5,
right: 30,
left: 20,
bottom: 5,
}}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis />
<Tooltip />
<Legend />
<Line type="monotone" dataKey="pv" stroke="#8884d8" activeDot={{ r: 8 }} />
<Line type="monotone" dataKey="uv" stroke="#82ca9d" />
</LineChart>
</ResponsiveContainer>
Legend、X/Y 軸、Tooltip、Chart とコンポーネント単位で責務が分割されているのが良いです
選定基準
- SVG ベースのツールにする（Canvas ベースのツールは除外）
- チャートを拡大縮小しても画質が劣化しない
- SVG は描画後も Chrome DevTools などの開発ツールで操作できる
- SVG の方がパフォーマンス良さそう
- 利用するチャートライブラリ次第ですが、、
- React でラップされているチャートライブラリにする
- TypeScript で書かれている
- 実装のしやすさ
ライブラリ候補
react-chartjs-2
- たぶん 1 番メジャーなやつ
- Canvas ベース
- labels と datasets の配列、options を用意すればいいだけなので実装が簡単そう
- chart.js に依存している
- chart.js と react-chartjs-2 の両方のインストールが必要
- Google の検索結果にもこれらが混在して出てきそう
recharts
- React と SVG（D3）ベース
- Legend、X/Y 軸、Tooltip、Chart とコンポーネント単位で責務が分割されている
react-apexcharts
- SVG ベース
- グラフデータの形式がオブジェクトの配列ではなく、string や number の配列のみサポートなので、扱いづらそう
- GitHub のスターが他のライブラリに比べて少ない
- グラフ領域の拡大や Legend のアイテムを画面上で非表示にするなどの機能が簡単に使えそう
- apexcharts に依存している
- apexcharts と react-apexcharts の両方のインストールが必要
- Google の検索結果にもこれらが混在して出てきそう
- 公式ドキュメントの初回のページ表示がなんか重い
victory
- React と SVG（D3）ベース
-
公式ドキュメントのデモで紹介されている Example がなんかトリッキーなチャートになっている
- てか全体的にドキュメントが見づらい（個人的感想）
- eventHandlers を使えば、グラフをクリックした際などのイベントハンドラーを実装できそう
- Native サポートされている（React Native）
react-vis
- SVG ベース
- デモの Example のコードを見ようとすると GitHub に飛ばされるの辛い
- あまり更新されてなさそう
- TypeScript 非対応
Discussion