MUI(Material-UI)に合うようなChartライブラリはどれだろうか？
Webアプリでチャートをゼロから作成するのは難しく、非常に時間がかかります
そのため、開発者は外部のライブラリを使用してチャートを作成するのが一般的です
ですが、Reactで使用できる外部のチャートライブラリというのはたくさんあるのです…
プロジェクトに最適なものを選べるのは嬉しいですが、多数の中から１つを選ぶ作業というもの大変です
そこで当サイトでオススメしているUIフレームワーク「MUI（Material-UI）」に合うようなチャートライブラリを４つピックアックしました
商用利用が有償なライブラリは除外しています
- Visual Studio Code：1.76.0
- Node.js：8.15.0
ReactプロジェクトはCreate React Appで作成しており、TypeScriptテンプレートを使用しています
詳しくはこちらの記事を参照してください
人気比較
今回ピックアップしたチャートライブラリは次の４つです
- ApexCharts
- Apache ECharts
- Recharts
- react-chartjs-2（Chart.js）
次にnpm trendsで5年間のダウンロード数を比較してみました
Rechartsとreact-chartjs-2の人気がともに高いことが分かります
ApexChartsとApache EChartsも徐々に人気が出てきているようです
今回は比較のためにそれぞれレーダーチャートを作成してみました
それぞれのチャートライブラリについて解説します
ApexCharts
ApexChartsはMUI(Material-UI)のテンプレートにも使われているライブラリででMITライセンスになっています
- MITライセンスとは？
-
MITライセンスとは、オープンソースソフトウェアのライセンスのひとつで、無料で自由につかうことができるのが特徴です。MITライセンスのもとで配布されているものは、改変でも、再配布でも、商用利用でも、有料販売でも、どんなことにでも自由に無料でつかうことができます
最小限のオプションで、拡大/縮小機能、領域の選択、SVG、PNG、および CSV 形式へのインポート オプションを備えたグラフを作成できるのが特徴です
インストール方法は次の通り
npm install apexcharts react-apexchartsレーダーチャートを作成するサンプルはこちらを参照してください
ApexChartsのサンプルソース
import * as React from 'react';
import ReactApexChart from 'react-apexcharts';
function ApexChartRader() {
const series = [
{
name: 'Series 1',
data: [80, 50, 30, 40, 100, 20],
},
];
const options = {
chart: {
id: 'simple-rader',
},
xaxis: {
categories: ['January', 'February', 'March', 'April', 'May', 'June'],
},
colors: ['#606DC2'],
};
return <ReactApexChart options={options} type="radar" series={series} />;
}
export default ApexChartRader;Apache ECharts
Apache EChartsは百度（Baidu）が開発元、現在はApache Software Foundationで管理されており、ライセンスはApache License 2.0となっています
- Apache License 2.0とは？
-
Apacheライセンスは、Apacheソフトウェア財団（ASF）によって作成されたオープンソースソフトウェアを開発・配布する際に用いられる代表的なオープンソースライセンスのひとつ。ソフトウェアを自由に扱ってよいこと、再頒布時に著作権表示とライセンス表示を含めること、オリジナルから修正点がある場合には明示すること、作者や著作権者はいかなる責任も負わないことが規定されています
非常に高性能で、線グラフだけでも20種以上、もちろん棒グラフ、円グラフ、地図タイプや折れ線グラフ、3Dなグラフなども同じように多様なグラフの可視化を実装することが可能です
特徴としてはインタラクティブ性が非常に高いこと、ビッグデータ分析で利用できるチャートが豊富であること、ラベルのカスタマイズがしやすいこと、Canvas と SVG の両方をサポートしていることです
インストール方法は次の通り
npm install echarts echarts-for-reactレーダーチャートを作成するサンプルはこちらを参照してください
Apache EChartsのサンプルソース
import ReactEcharts from 'echarts-for-react';
import * as React from 'react';
function EChartBarRader() {
const option = {
radar: {
indicator: [
{ name: 'January', max: 120 },
{ name: 'June', max: 120 },
{ name: 'May', max: 120 },
{ name: 'April', max: 120 },
{ name: 'March', max: 120 },
{ name: 'February', max: 120 },
],
},
series: [
{
type: 'radar',
areaStyle: { color: '#606DC2', opacity: 0.2 },
data: [
{
value: [80, 20, 100, 40, 30, 50],
},
],
},
],
};
return <ReactEcharts option={option} opts={{ renderer: 'svg' }} />;
}
export default EChartBarRader;Recharts
Rechartsは最も人気のあるライブラリでMITライセンスになっています
再利用可能なコンポーネントを使用してチャートを作成できるようになっており、カスタマイズ性が高いライブラリです
デフォルトの構成では、グラフはレスポンシブではありませんが、ラッパーコンポーネントを追加することでレスポンシブにすることができます
ResponsiveContainerを追加することでグラフが表示されないケースがあったので初心者には使いづらいかもしれません
インストール方法は次の通り
npm install rechartsレーダーチャートを作成するサンプルはこちらを参照してください
Rechartsのサンプルソース
import * as React from 'react';
import {
Radar,
RadarChart,
PolarGrid,
PolarAngleAxis,
PolarRadiusAxis,
ResponsiveContainer,
} from 'recharts';
function RechartRader() {
const data = [
{
subject: 'January',
A: 80,
fullMark: 120,
},
{
subject: 'February',
A: 50,
fullMark: 120,
},
{
subject: 'March',
A: 30,
fullMark: 120,
},
{
subject: 'April',
A: 40,
fullMark: 120,
},
{
subject: 'May',
A: 100,
fullMark: 120,
},
{
subject: 'June',
A: 20,
fullMark: 120,
},
];
return (
<ResponsiveContainer width="100%" height="100%">
<RadarChart cx="50%" cy="50%" outerRadius="80%" data={data}>
<PolarGrid />
<PolarAngleAxis dataKey="subject" />
<PolarRadiusAxis />
<Radar
dataKey="A"
stroke="#606DC2"
fill="#606DC2"
fillOpacity={0.2}
/>
</RadarChart>
</ResponsiveContainer>
);
}
export default RechartRader;react-chartjs-2（Chart.js）
react-chartjs-2は人気のあるJavaScriptライブラリ「Chart.js」のラッパーになっており、Chart.jsはMITライセンスになっています
今回紹介したライブラリで唯一HTML5 Canvasの要素を使用するタイプのライブラリです
CanvasとSVGのどちらが良いと一概には言えませんが、CanvasはCSSによるカスタマイズがしにくい傾向にあります
インストール方法は次の通り
npm install chart.js react-chartjs-2レーダーチャートを作成するサンプルはこちらを参照してください
react-chartjs-2のサンプルソース
import {
Chart as ChartJS,
RadialLinearScale,
PointElement,
LineElement,
Filler,
Tooltip,
Legend,
} from 'chart.js';
import * as React from 'react';
import { Radar } from 'react-chartjs-2';
function ChartJsRader() {
ChartJS.register(
RadialLinearScale,
PointElement,
LineElement,
Filler,
Tooltip,
Legend,
);
const data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
datasets: [
{
label: '# of Votes',
data: [80, 50, 30, 40, 100, 20],
backgroundColor: 'rgba(96, 109, 194, 0.2)',
borderColor: 'rgba(96, 109, 194, 1)',
borderWidth: 1,
},
],
};
return <Radar data={data} />;
}
export default ChartJsRader;まとめ
今回紹介したライブラリはどれも基本的な折れ線、面グラフ、棒グラフ、パイ・ドーナッツ、レーダーを使用することができますし、多軸や複合タイプのグラフを作成することができます
ApexChartsやApache ECharts、react-chartjs-2は初心者にも使いやすく、RechartsはReactに慣れた人向けという印象です