ApexChartsの良さを語りたい

作成日：2022年03月02日 23:38

react

本記事で扱う内容

本記事では、ApexChart とは何かを説明し、使用できる基本的なグラフを紹介します。そして、実際に折線グラフを作成するところまでを行います。

環境

macOS Big Sur バージョン 11.5.2

ApexCharts とは

まず ApexChart とは、Web ページに簡単にグラフを作成するライブラリです。このライブラリは、オープンソースプロジェクトであるので、商用アプリケーションなどに自由に使うとことができます。

ApexCharts でできること

まず、ApexCharts で扱うことができる基本的なグラフを紹介します。

折れ線グラフ（line chart)

まずは折線グラフです。基本的に時間経過に伴うデータの変動を見ることができます。

ドーナッツグラフ（donut chart)

ドーナツグラフは、データの比率を視覚化するグラフです。アンケート結果の比率などをみやすくすることができます。円の中央には合計などを表示させることもできます。

棒グラフ（bar chart)

棒グラフはカテゴリ別に、データの比較を行うことができます。

他にも使えるグラフは色々あるので、公式のドキュメントを参照してください。基本的に本記事で説明するオプションを使えば問題なく他のグラフも作成できると思います。

ApexCharts の良さ

ApexCharts の良さは色々あるのですが、私が実際に使ってみて良いと思ったのは、

簡単にグラフ作成ができる
グラフが綺麗
グラフの拡大・縮小機能がある
グラフをエクスポートできる
グラフのクリック時などに簡単にイベントを発生させることができる

というポイントが使っていて感動しました。

便利なオプション

基本的便利なオプションを紹介します。

series

series はグラフに表示させたいデータを格納するオプションです。これさえ使えれば何かしらグラフに表示させることはできます。

 {
      name: "series-1",
      data: [30, 40, 45, 50, 49, 60, 70, 91],
    },

colors

colors ではグラフの色を自由に変えることができます。扱うグラフが多くなっても、識別することができます。

  colors: [
    "#FF0000",
    "#0000FF",
    "#008000",
    "#808080",
  ],

xaxis もしくは yaxis

xaxis ではグラフの x 軸、yaxis では y 軸の変更ができます。例えば、以下のように書くことで x 軸の font サイズを 12px にすることができます。

xaxis{
    labels:{
        style:{
            fontSize:'12px'
        }
    }
}

chart の event

chart では、グラフの色や大きさなどを設定することができます。しかし、その中でも event が便利です。下記のように書くことで、グラフ上のクリックした箇所の情報を取得することができます。他にも、スクロールするときに発火する scrole やグラフがマウントされたときに発火する mounted などもあります。

chart:{
    events:{
        click:(event,chartContexxt,config)=>{
            console.log(event)
        }
    }
}

実際にグラフを表示してみよう

折線グラフを描画してみましょう。とりあえずアプリの準備をしましょう。

$ npx create-react-app line-chart
$ cd line-chart
$ yarn add react-apexcharts apexcharts

これでアプリの準備は完了です。次に、コードを変更していきましょう。とりあえず、App.jsx を下記のコードに置き換えてください。下記のコードは ApexCharts の公式ドキュメントに書かれているコードです。

App.js

import Chart from "react-apexcharts";
import { useState } from "react";

function App() {
  const options = {
    chart: {
      id: "basic-bar",
    },
    xaxis: {
      categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999],
    },
  };
  const [series, setSeries] = useState([
    {
      name: "series-1",
      data: [30, 40, 45, 50, 49, 60, 70, 91],
    },
  ]);
  return (
    <div className="app">
      <div className="row">
        <div className="mixed-chart">
          <Chart options={options} series={series} type="line" width="500" />
        </div>
      </div>
    </div>
  );
}

export default App;

これでとりあえず、実行してみましょう。

$ yarn start

下記のように折線グラフが描画されていると思います。実行結果1.png
次はこれを修正していこうと思います。options を下記のように修正してください。これによって、グラフの色を赤に変えることができます。



const options = {
  colors: ["#ff0000"], //追加
  chart: {
    id: "basic-bar",
  },
  xaxis: {
    categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999],
  },
};

実行結果2.png

最後に、グラフをクリック時のイベントの発火を試したいと思います。



const options = {
  colors: ["#ff0000"],
  chart: {
    id: "basic-bar",
    //以下追加
    events: {
      click: (event, chartContext, config) => {
        const categories = config.globals.categoryLabels;
        const datas = config.config.series[0].data;
        const dataPoint = config.dataPointIndex;
        alert(`x座標：${categories[dataPoint]}\ny座標：${datas[dataPoint]}`);
      },
    },
    //ここまで
  },
  xaxis: {
    categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999],
  },
};

実行結果3.png

今回追加したイベントクリックでは、クリックした座標の x 座標と y 座標の値をアラートで表示するようにしています。今回はアラートに表示するだけですが、グラフの値を取得できているのでもっと違うことにも応用できるかもしれませんね。

終わりに

今回は ApexCharts について紹介させていただきました。なんといってもグラフが綺麗なのがとても良いなと個人的には思います。とても使いやすいライブラリなので是非使ってみてくださ。今後 ApexCharts の便利な使い方を見つけることができたら、また ApexCharts についてのブログを更新しようと思います。

参考資料

ApexCharts の公式ドキュメント

By kiyo