Zenn
📈

TypeScriptとReactでHighchartsのグラフを表示する

2023/01/09に公開
React
TypeScript
highcharts
可視化
tech

はじめに

Highchartsはグラフの作成やマップの描画を行うJavaScriptのライブラリです。
https://www.highcharts.com/

公式サイトではHighcharts Demosからグラフの描画を簡単に試すことができます。

しかし、「フレームワークからHighchartsを利用したい」「静的型付け言語であるTypeScriptで書きたい」という気持ちもあると思います。
そんな方々のためにnpmの公式サイトでTypeScriptとReactでHighchartsを使用するためのチュートリアルが記載されているのですが、指示通りの手順に従って手を動かしても動きません。

https://www.npmjs.com/package/highcharts-react-official

この記事ではnpm公式サイトをベースに、TypeScriptとReactでHighchartsのグラフを表示する方法について説明します。

対象読者

Highchartsの学習に取り組んでいる方
TypeScript, React初心者

実行環境

Windows 10 Home
Node v18.13.0

Nodeのインストールが済んでいない方はNodeの公式サイトからLTS版のNodeをインストールしてください。
https://nodejs.org/ja/

Reactプロジェクトの作成

まずはプロジェクトを作成します。
Power Shellを開き、下記のnpxコマンドを実行してください。

Power Shell
npx create-react-app highcharts_sample --template typescript

コマンド実行後にcreate-react-app Ok to proceed? (y)と表示された場合はyもしくはEnterを押してください。
しばらく待つとhighcharts_sampleという名前のフォルダが作成されるため、cdコマンドでディレクトリを移動してください。

Power Shell
cd highcharts_sample

Highchartsのインストール

下記のコマンドを入力し、npmからHighchartsのパッケージをインストールします。

Power Shell
npm install highcharts
Power Shell
npm install highcharts-react-official

グラフの作成

環境が整ったのでnpm公式サイトのチュートリアルが提供するグラフを作成します。
highcharts_sampleフォルダ直下のsrcフォルダの直下にあるindex.tsxを次のように書き換えます。

index.tsx
import React, { useRef } from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import './App.css';

function App(props: HighchartsReact.Props) {
  const options: Highcharts.Options = {
    title: {
      text: 'My chart'
    },
    series: [{
      type: 'line',
      data: [1, 2, 3]
    }]
  }

  const chartComponentRef = useRef<HighchartsReact.RefObject>(null);
  
  return (
    <HighchartsReact
      highcharts={Highcharts}
      options={options}
      ref={chartComponentRef}
      {...props} />
  )
}

export default App;

返り値となっているHighchartsreactコンポーネントの属性について説明します。
highcharts : モジュールの初期化後、Highchartsインスタンスを渡すために使用されます。設定されていない場合、コンポーネントはウィンドウからHighchartsを取得しようとします。
options : CSV, HTMLテーブル、グリッドビューなどのソースからHighchartsのグラフにデータを追加する設定オブジェクトです。
ref : グラフのインスタンスを取得しています。

グラフの表示

下記コマンドを入力し、プロジェクトを試験サーバで実行します。

Power Shell
npm start

グラフが表示されました。
読んでいただきありがとうございました🙌

Discussion