Chart.js + Reactでグラフを作成してみる【株式会社ライトコード】

はじめに

皆さんこんにちは。フロントエンドエンジニアのずおです！
本日は、現在所属しているプロジェクトで、グラフを用いたページを実装する必要が出てきそうなので、実験的にライブラリを使って、グラフを作成してみたいと思います。

トレンドを把握する

とりあえずnpm trendsで、グラフ作成ライブラリのトレンドを探ってみます。

↑を見ると、Chart.jsというライブラリが人気のようなので、こちらを使っていきたいと思います。

Chart.jsのドキュメントはこちら

インストール

今回はReactを使ってグラフを作成したいと考えています。
いろいろ調べていると、react-chartjs-2というWrapper Libraryを一緒にインストールしてあげると、より簡単にグラフを作成できそうです。

react-chartjs-2のドキュメントはこちら

では実際に、インストールします。

npm i react-chartjs-2 chart.js

インストールが終わったら実際に使っていきます。

グラフを作成

Chart.jsでは、円グラフや棒グラフ、折れ線グラフなどの定番のものから、極座標グラフや散布図などのチャートタイプも提供しているようです。

今回は、棒グラフと、レーダーチャートを作成してみたいと思います。

作成する流れは下記の通りです。

1. React Componentで必要となるモジュールをインポートする
2. ライブラリが提供しているチャートのオプションを定義する
3. グラフに描画するデータを取得する（今回はモックデータを使用したので、APIからデータを取得するロジックなどは組んでおりません）
4. チャートコンポーネントを作成する
5. ページに反映する

棒グラフ

作成するにあたり、以下の3点を要件として定めました。

• 棒グラフの上に数値を表示させる
• 縦、横表示を可変にできるようにする
• 縦（横）表示の時は、y軸(x軸)を非表示にする

実際のコードは下記です。

import { Bar } from 'react-chartjs-2'

import ChartDataLabels from 'chartjs-plugin-datalabels'

import 'chart.js/auto' // 今回はバンドルサイズ気にしないので、autoを使う



export const BarChart = ({ data, isHorizontal }) => {

  const options = {

    indexAxis: isHorizontal ? 'y' : 'x', // 棒グラフの向きを設定

    plugins: {

      datalabels: {

        align: 'end',

        anchor: 'end',

        color: 'orange',

        font: {

          size: 16,

          weight: 'bold',

        },

      },

    },

    scales: {

      y: {

        display: isHorizontal,

        ticks: {

          font: {

            size: 16,

            weight: 'bold',

          },

        },

      },

      x: {

        display: !isHorizontal,

        ticks: {

          font: {

            size: 16,

            weight: 'bold',

          },

        },

      },

    },

  }



  return (

      <Bar data={data} options={options} plugins={[ChartDataLabels]} />

  )

}

optionsの説明を簡単にしておくと、
1. indexAxis：グラフの方向（縦棒か横棒か）を設定
2. plugins: Chart.jsプラグインの設定
グラフの上に数値を表示させる要件を満たすためには、別途chartjs-plugin-datalabelsというライブラリを入れる必要がありましたので、こちらの設定を追加しました。
ドキュメントはこちらです。
3. scales:グラフ軸の設定(x,y軸の表示、非表示の設定や、フォントサイズなどを設定)

という感じです。結構簡単で、直感で理解しやすいものばかりだと思います。

実際にできたグラフがこちらです。

…

記事の続きは下のURLをクリック！

https://rightcode.co.jp/blogs/47456

エンジニア積極採用中です！

現在、WEBエンジニア、モバイルエンジニア、デザイナー、営業などを積極採用中です！

採用ページはこちら：https://rightcode.co.jp/recruit

社員の声や社風などを知りたい方はこちら：https://rightcode.co.jp/blogs?category=life

社長と一杯飲みながらお話しませんか？（転職者向け）

特設ページはこちら： https://rightcode.co.jp/gohan-sake-president-talk

もっとワクワクしたいあなたへ

現在、ライトコードでは「WEBエンジニア」「モバイルエンジニア」「ゲームエンジニア」、「デザイナー」「WEBディレクター」「営業」などを積極採用中です！

ライトコードは技術力に定評のある受託開発をメインにしているIT企業です。

有名WEBサービスやアプリの受託開発などの企画、開発案件が目白押しの状況です。

• もっと大きなことに挑戦したい！
• エンジニアとしてもっと成長したい！
• モダンな技術に触れたい！

現状に満足していない方は、まずは、エンジニアとしても第一線を走り続ける弊社代表と気軽にお話してみませんか？

ネット上では、ちょっとユルそうな会社に感じると思いますが（笑）、
実は技術力に定評があり、沢山の実績を残している会社ということをお伝えしたいと思っております。

• ライトコードの魅力を知っていただきたい！
• 社風や文化なども知っていただきたい！
• 技術に対して熱意のある方に入社していただきたい！

一度、【Wantedly内の弊社ページ】や【コーポレートサイト】をのぞいてみてください。

【コーポレートサイト】https://rightcode.co.jp/

【採用募集】https://rightcode.co.jp/recruit（こちらからの応募がスムーズ）

【wantedlyぺージ】https://www.wantedly.com/companies/rightcode