Next.jsでHighChartsを使用する

チャート系のパッケージは多数存在しているが、やはりGoogleやMicrosoftが使用しているHighchartsが安定している。
近年ではUberのチャートreact-visなんかも存在しており、React Componentベースで実装されていてよいが、まだ公式がTypeScriptに対応しきれていない(有志で.d.tsファイルを提供してもいるが)ので無難にHighchartsを使用するのがよいという印象。

公式がReactをサポートしているのでnpmパッケージをプロジェクトにインストールして使用する
highcharts-react-official

$ npm install highcharts highcharts-react-official

Next.jsにおいてはSSRに対応するための処理が必要になるので以下のコードを追記する必要がある

import React from 'react'
import Highcharts from 'highcharts'
import HighchartsExporting from 'highcharts/modules/exporting'
import HighchartsReact from 'highcharts-react-official'

...

  if (typeof Highcharts === 'object') {
    HighchartsExporting(Highcharts);
  }

...

Tips

カスタマイズする時注意したいのがimport元です
例えばレーダーチャートを作りたい場合は

import Highcharts from 'highcharts';
import HighchartsMore from 'highcharts/highcharts-more';
import HighchartsReact from 'highcharts-react-official'

HighchartsMore(Highcharts)

のように'highcharts/highcharts-more'からHighchartsMoreを呼び出す必要があり、作り方がピュアなhighchartsパッケージと少し異なります。

公式のサンプルとして上がっているpolar-spiderをNext.jsに合わせて作ってみます。

import React from 'react';
import Highcharts from 'highcharts';
import HighchartsMore from 'highcharts/highcharts-more';
import HighchartsReact from 'highcharts-react-official';

const RadarChart: React.FunctionComponent = (): JSX.Element => {
  if (typeof Highcharts === 'object') {
    HighchartsMore(Highcharts);
  }
  const options = {
    chart: {
      polar: true,
      type: 'line'
    },

    accessibility: {
      description:
        'A spiderweb chart compares the allocated budget against actual spending within an organization. The spider chart has six spokes. Each spoke represents one of the 6 departments within the organization: sales, marketing, development, customer support, information technology and administration. The chart is interactive, and each data point is displayed upon hovering. The chart clearly shows that 4 of the 6 departments have overspent their budget with Marketing responsible for the greatest overspend of $20,000. The allocated budget and actual spending data points for each department are as follows: Sales. Budget equals $43,000; spending equals $50,000. Marketing. Budget equals $19,000; spending equals $39,000. Development. Budget equals $60,000; spending equals $42,000. Customer support. Budget equals $35,000; spending equals $31,000. Information technology. Budget equals $17,000; spending equals $26,000. Administration. Budget equals $10,000; spending equals $14,000.'
    },

    title: {
      text: 'Budget vs spending',
      x: -80
    },

    pane: {
      size: '80%'
    },

    xAxis: {
      categories: ['Sales', 'Marketing', 'Development', 'Customer Support', 'Information Technology', 'Administration'],
      tickmarkPlacement: 'on',
      lineWidth: 0
    },

    yAxis: {
      gridLineInterpolation: 'polygon',
      lineWidth: 0,
      min: 0
    },

    tooltip: {
      shared: true,
      pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>'
    },

    legend: {
      align: 'right',
      verticalAlign: 'middle',
      layout: 'vertical'
    },

    series: [
      {
        name: 'Allocated Budget',
        data: [43000, 19000, 60000, 35000, 17000, 10000],
        pointPlacement: 'on'
      },
      {
        name: 'Actual Spending',
        data: [50000, 39000, 42000, 31000, 26000, 14000],
        pointPlacement: 'on'
      }
    ],

    responsive: {
      rules: [
        {
          condition: {
            maxWidth: 500
          },
          chartOptions: {
            legend: {
              align: 'center',
              verticalAlign: 'bottom',
              layout: 'horizontal'
            },
            pane: {
              size: '70%'
            }
          }
        }
      ]
    }
  };
  return <HighchartsReact highcharts={Highcharts} options={options} />;
};

export default RadarChart;

のようになります。
レーダーチャートの場合は、HighchartsMoreでラップして機能拡張をする必要があるようで、もしHighchartsMoreをしなかった場合、例えchart: { polar: true},を指定したとしても折れ線グラフで表示されます。
HighchartsはAPIが数多く存在しているのでAPIドキュメントを読みながら進めていきましょう。

最初は自分の作りたいものに近いサンプルコードをベースに進めてあとはAPIドキュメントを見ながらカスタマイズしていくという方法が一番の近道です。

関連記事