chartjs-chart-sankeyをNext.jsで動かしてみた

大高大輔

2022.04.04

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは！DA(データアナリティクス)事業本部サービスソリューション部の大高です。

chartjs-chart-sankeyというSankey Chartを描画できるライブラリがあります。

このSankey Chartが「Reactではうまく動くのに、Next.jsで動かそうとするとうまく動かない」という相談をチームメンバーから受けたので少し調べてみました。

エラー内容

まずはじめに、単純に動かそうとした場合に発生したエラー内容です。

TypeError: Cannot read properties of undefined (reading 'prototype')
    at TypedRegistry.isForType (/foo-bar/hello-chartjs-with-nextjs/node_modules/chart.js/dist/chart.js:6005:74)
    at Registry._getRegistryForType (/foo-bar/hello-chartjs-with-nextjs/node_modules/chart.js/dist/chart.js:6148:15)
    at /foo-bar/hello-chartjs-with-nextjs/node_modules/chart.js/dist/chart.js:6128:41
    at Array.forEach (<anonymous>)
    at Registry._each (/foo-bar/hello-chartjs-with-nextjs/node_modules/chart.js/dist/chart.js:6127:15)
    at Registry.add (/foo-bar/hello-chartjs-with-nextjs/node_modules/chart.js/dist/chart.js:6085:10)
    at Function.value [as register] (/foo-bar/hello-chartjs-with-nextjs/node_modules/chart.js/dist/chart.js:7407:16)
    at Sankey (webpack-internal:///./components/sankey.tsx:15:49)
    at renderWithHooks (/foo-bar/hello-chartjs-with-nextjs/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5448:16)
    at renderIndeterminateComponent (/foo-bar/hello-chartjs-with-nextjs/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5521:15)

prototypeがundefinedなので読み込めないというエラーになっていますね。

単純なドーナツチャートを表示してみる

chartjs-chart-sankeyは、チャート表示のためのライブラリreact-chartjs-2のプラグインのようなライブラリです。問題の切り分けのために、まずはreact-chartjs-2で用意されている単純なドーナツチャートを表示してみます。

以下のコードでまずはNext.jsアプリを作成します。

$ yarn create next-app --typescript

作成したら以下のQuickstartドキュメントに従ってライブラリをインストールします。

$ yarn add chart.js react-chartjs-2

ここまで出来たら、新規に以下のファイルを作成します。

pages/doughnut-chart.tsx

import type { NextPage } from "next";
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
import { Doughnut } from "react-chartjs-2";

const DoughnutChart: NextPage = () => {
  ChartJS.register(ArcElement, Tooltip, Legend);

  const data = {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [
      {
        label: "# of Votes",
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: [
          "rgba(255, 99, 132, 0.2)",
          "rgba(54, 162, 235, 0.2)",
          "rgba(255, 206, 86, 0.2)",
          "rgba(75, 192, 192, 0.2)",
          "rgba(153, 102, 255, 0.2)",
          "rgba(255, 159, 64, 0.2)",
        ],
        borderColor: [
          "rgba(255, 99, 132, 1)",
          "rgba(54, 162, 235, 1)",
          "rgba(255, 206, 86, 1)",
          "rgba(75, 192, 192, 1)",
          "rgba(153, 102, 255, 1)",
          "rgba(255, 159, 64, 1)",
        ],
        borderWidth: 1,
      },
    ],
  };

  return <Doughnut data={data} />;
};

export default DoughnutChart;

準備ができたらアプリを起動して http://localhost:3000/doughnut-chart にアクセスして動作を確認してみます。

$ yarn dev

これは問題なさそうですね。ここまでで「react-chartjs-2は問題なく動く」という切り分けができました。

chartjs-chart-sankey を動かそうとしてみる

次にchartjs-chart-sankeyをインストールして動かそうとしてみます。

まずは該当ライブラリを追加インストールします。

$ yarn add chartjs-chart-sankey

先程と同様に以下のファイルを追加作成します。

pages/sankey-chart.tsx

import type { NextPage } from "next";
import {
  CategoryScale,
  Chart as ChartJS,
  LinearScale,
  Tooltip,
} from "chart.js";
import { Chart as C } from "react-chartjs-2";
import { SankeyController, Flow } from "chartjs-chart-sankey";

const SankeyChart: NextPage = () => {
  ChartJS.register(SankeyController, Flow, LinearScale, CategoryScale, Tooltip);

  const colors: any = {
    a: "red",
    b: "green",
    c: "blue",
    d: "gray",
  };

  const getColor = (key: string) => colors[key];

  const data = {
    datasets: [
      {
        label: "My sankey",
        data: [
          { from: "a", to: "b", flow: 10 },
          { from: "a", to: "c", flow: 5 },
          { from: "b", to: "c", flow: 10 },
          { from: "d", to: "c", flow: 7 },
        ],
        colorFrom: (c: any) => getColor(c.dataset.data[c.dataIndex].from),
        colorTo: (c: any) => getColor(c.dataset.data[c.dataIndex].to),
        colorMode: "gradient" as "gradient", // or 'from' or 'to'
        /* optional labels */
        labels: {
          a: "Label A",
          b: "Label B",
          c: "Label C",
          d: "Label D",
        },
        /* optional priority */
        priority: {
          b: 1,
          d: 0,
        },
        /* optional column overrides */
        column: {
          d: 1,
        },
        size: "max" as "max", // or 'min' if flow overlap is preferred
      },
    ],
  };

  return <C type="sankey" data={data} />;
};

export default SankeyChart;

こちらも準備ができたらアプリを起動してhttp://localhost:3000/sankey-chartにアクセスして動作を確認してみます。

$ yarn dev

すると、冒頭に記載したエラーが発生します。

怪しいところは？

エラーメッセージで怪しいと感じるところは以下の箇所です。

    at renderIndeterminateComponent (/foo-bar/hello-chartjs-with-nextjs/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5521:15)

レンダリングをしようとしているところでエラーが出ていそうです。Next.jsはSSRを行うので、恐らくこのあたりがReactとの差異でエラーが出ていそうと予想しました。

Dynamic Import をしてみる

ということで、Dynamic Importをしてみます。

まずは先程のファイルをコンポーネント化しました。

components/sankey.tsx

import {
  CategoryScale,
  Chart as ChartJS,
  LinearScale,
  Tooltip,
} from "chart.js";
import { Chart as C } from "react-chartjs-2";
import { SankeyController, Flow } from "chartjs-chart-sankey";

const Sankey = () => {
  ChartJS.register(SankeyController, Flow, LinearScale, CategoryScale, Tooltip);

  const colors: any = {
    a: "red",
    b: "green",
    c: "blue",
    d: "gray",
  };

  const getColor = (key: string) => colors[key];

  const data = {
    datasets: [
      {
        label: "My sankey",
        data: [
          { from: "a", to: "b", flow: 10 },
          { from: "a", to: "c", flow: 5 },
          { from: "b", to: "c", flow: 10 },
          { from: "d", to: "c", flow: 7 },
        ],
        colorFrom: (c: any) => getColor(c.dataset.data[c.dataIndex].from),
        colorTo: (c: any) => getColor(c.dataset.data[c.dataIndex].to),
        colorMode: "gradient" as "gradient", // or 'from' or 'to'
        /* optional labels */
        labels: {
          a: "Label A",
          b: "Label B",
          c: "Label C",
          d: "Label D",
        },
        /* optional priority */
        priority: {
          b: 1,
          d: 0,
        },
        /* optional column overrides */
        column: {
          d: 1,
        },
        size: "max" as "max", // or 'min' if flow overlap is preferred
      },
    ],
  };

  return <C type="sankey" data={data} />;
};

export default Sankey;

次に先程のページを修正して、このコンポーネントをDynamic Importして利用するように変更します。

pages/sankey-chart.tsx

import type { NextPage } from "next";
import dynamic from "next/dynamic";

const SankeyChart: NextPage = () => {
  const Sankey = dynamic(() => import("../components/sankey"));
  return <Sankey />;
};

export default SankeyChart;

この状態で、再度アプリを起動してhttp://localhost:3000/sankey-chartにアクセスしてみます。

$ yarn dev

今度はちゃんとSankey Chartが表示できました！

まとめ

以上、chartjs-chart-sankeyをNext.jsで動かしてみました。

以前に試したReact Leafletもそうなのですが、時折こういったDynamic Importする必要があるライブラリがあるので、似たようなケースが起きたときにはすぐに思い出せるようにしておきたいと思います。

どなたかのお役に立てば幸いです。それでは！

chartjs-chart-sankeyをNext.jsで動かしてみた

エラー内容

単純なドーナツチャートを表示してみる

chartjs-chart-sankey を動かそうとしてみる

怪しいところは？

Dynamic Import をしてみる

まとめ

イベント

EVENT【5/28（火）】AWSを最大活用するための1dayカンファレンス

EVENT【5/17（金）】認証機能の開発工数削減をデモで体験！次世代認証基盤サービス『Auth0 by Okta』導入実践ウェビナー

EVENT【5/14（火）】アノテーションの中途向けオンライン会社説明会を開催します

EVENT【5/23（木）】ユースケースに学ぶAWS運用のノウハウ～可視化から統制まで～

EVENT【5/16（木）】Snowflakeを触ってみよう！初めての方向けハンズオンセミナー

EVENT【4/18リモート】クラスメソッドのフリーランスエンジニア会社説明会〜AWS/システムアーキテクト/Android案件特集〜を開催します

EVENT【5/10（金）名古屋】クラスメソッドグループの会社説明会を開催します！

EVENT【4/25（木）リモート】Google Cloudに携わるエンジニアのキャリア～クラスメソッド会社説明会～

EVENT【4/30（火）リモート】クラスメソッドの会社説明会を開催します

EVENT【5/9（木）】組織的なクラウド統制はじめの一歩

chartjs-chart-sankeyをNext.jsで動かしてみた

エラー内容

単純なドーナツチャートを表示してみる

chartjs-chart-sankey を動かそうとしてみる

怪しいところは？

Dynamic Import をしてみる

まとめ

イベント

EVENT【5/28（火）】AWSを最大活用するための1dayカンファレンス

EVENT【5/17（金）】認証機能の開発工数削減をデモで体験！次世代認証基盤サービス『Auth0 by Okta』導入実践ウェビナー

EVENT【5/14（火）】アノテーションの中途向けオンライン会社説明会を開催します

EVENT【5/23（木）】ユースケースに学ぶAWS運用のノウハウ～可視化から統制まで～

EVENT【5/16（木）】Snowflakeを触ってみよう！初めての方向けハンズオンセミナー

EVENT【4/18リモート】クラスメソッドのフリーランスエンジニア会社説明会 〜AWS/システムアーキテクト/Android案件特集〜 を開催します

EVENT【5/10（金） 名古屋】クラスメソッドグループの会社説明会を開催します！

EVENT【4/25（木）リモート】Google Cloudに携わるエンジニアのキャリア～クラスメソッド会社説明会～

EVENT【4/30（火）リモート】クラスメソッドの会社説明会を開催します

EVENT【5/9（木）】組織的なクラウド統制 はじめの一歩

関連記事

Amplify Gen2のform generateを試してみた

NextJSのWebアプリをAmplify Gen2デプロイしてみた

Amplify Gen2でNextJSのアプリケーション作成まで

React Server Component에 Storybook 세팅하기

EVENT【4/18リモート】クラスメソッドのフリーランスエンジニア会社説明会〜AWS/システムアーキテクト/Android案件特集〜を開催します

EVENT【5/10（金）名古屋】クラスメソッドグループの会社説明会を開催します！

EVENT【5/9（木）】組織的なクラウド統制はじめの一歩