Reactでファネルチャートを実装できるライブラリを試してみた

北川慶太

2022.05.17

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

こんにちは。データアナリティクス事業本部サービスソリューション部の北川です。

今回はReactプロジェクトで、ファネルチャートが実装できるライブラリを、いくつか試してみました。

ファネルチャートとは

ファネルチャートとは、ある目的を達成するまでのプロセスを、ステージごとに分割して表現した図表のことを指します。例えばセールスファネルチャートなら、認知されてから顧客を得るまでの一連の活動のことを指します。逆三角形の形をしているのが特徴です。

ファネルチャート (Funnel chart) は、1 つのプロセスの連続するステージを示す連続チャートを追加できるコントロールです。各ステージは減少していき、前の段階のサブセットを含みます。チャートは徐々に減少して狭まり続けるファネル形状になります。

Recharts

フレームワークには、Next.jsを採用しています。

Reactのチャートライブラリの中では、react-chartjs-2と並ぶ知名度の高いライブラリになります。React、D3.jsで構築されています。

Rechartsをインストール。

$ yarn add recharts

import { NextPage } from "next";
import { FunnelChart, Tooltip, Funnel, LabelList } from "recharts";

type Data = {
  value: number;
  name: string;
  fill: string;
};

const data: Data[] = [
  {
    value: 100,
    name: "Sent",
    fill: "#8884d8",
  },
  {
    value: 80,
    name: "Viewed",
    fill: "#83a6ed",
  },
  {
    value: 50,
    name: "Clicked",
    fill: "#8dd1e1",
  },
  {
    value: 40,
    name: "Add To Card",
    fill: "#82ca9d",
  },
  {
    value: 26,
    name: "Purchased",
    fill: "#a4de6c",
  },
];

const MyFunnel: NextPage = () => {
  return (
    <>
      <FunnelChart width={730} height={250}>
        <Tooltip />
        <Funnel dataKey="value" data={data} isAnimationActive>
          <LabelList
            position="right"
            fill="#000"
            stroke="none"
            dataKey="name"
          />
        </Funnel>
      </FunnelChart>
    </>
  );
};

export default MyFunnel;

動的インポートを使用します。

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

const SampleChart = dynamic(() => import("./MyFunnel"), { ssr: false });

const Sample: NextPage = () =>  {
  return <SampleChart />;
}

export default Sample;

nivo

コンポーネントの種類が豊富で、D3.jsで構築されています。多少実装が複雑な印象を持ちました。

nivoをインストール

$ yarn add @nivo/core @nivo/funnel

MyResponsiveFunnelというコンポーネントを作成し、Propsを渡します。

import React, { FC } from "react";
import { ResponsiveFunnel } from "@nivo/funnel";

const data = [
  {
    id: "step_sent",
    value: 88048,
    label: "Sent",
  },
  {
    id: "step_viewed",
    value: 78439,
    label: "Viewed",
  },
  {
    id: "step_clicked",
    value: 67628,
    label: "Clicked",
  },
  {
    id: "step_add_to_card",
    value: 50843,
    label: "Add To Card",
  },
  {
    id: "step_purchased",
    value: 40586,
    label: "Purchased",
  },
];


const MyResponsiveFunnel: FC = () => (
  <ResponsiveFunnel
    data={data}
    margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
    borderWidth={10}
    labelColor={{ from: "color", modifiers: [["darker", 3]] }}
    currentPartSizeExtension={10}
  />
);

export default MyResponsiveFunnel;

こちらもRecharts同様、動的インポートを使用します。

import React from "react";
import dynamic from "next/dynamic";
import { NextPage } from "next";

const SampleChart = dynamic(() => import("./MyFunnel"), {
  ssr: false,
});

const Sample: NextPage = () => {
  return (
    <div style={{ width: 600, height: 300 }}>
      <SampleChart />
    </div>
  );
};

export default Sample;

react-funnel-pipeline

マイナーですが、ファネルチャート用のライブラリがあったので使用してみました。シンプルですが、必要なPropsは揃っています。

react-funnel-pipelineをインストール

$ yarn add react-funnel-pipeline

スタイルは外部ファイルを読み込みます。

import { NextPage } from "next";

import { FunnelChart } from "react-funnel-pipeline";
import "react-funnel-pipeline/dist/index.css";

const data = [
  { name: "Sent", value: 252 },
  { name: "Viewed", value: 105 },
  { name: "Clicked", value: 84 },
  { name: "Add To Card", value: 59 },
  { name: "Purchased", value: 19 },
];

const Sample: NextPage = () => {
  return (
    <FunnelChart
      data={data}
    />
  );
};

export default Sample;