Rechartsの複合グラフで2種類のY軸を表示する

こんにちは、CX事業本部 IoT事業部の若槻です。

今回は、ReactのグラフライブラリRechartsにて、複合グラフ（Composed Chart）で2種類のY軸を表示してみました。

環境

• React：17.0.1
• Recharts：2.0.6

やってみた

デモ

ソースコードは上記のCodeSandboxのサンドボックスをご確認ください。

コード

src/App.tsx

import "./styles.css";
import React from "react";
import {
  Bar,
  Line,
  ComposedChart,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
} from "recharts";

const dailyData = [
  {
    date: "7/23",
    "4. とても満足": 40,
    "3. 満足": 24,
    "2. 不満": 24,
    "1. とても不満": 15,
    平均スコア: 4.1,
  },
  {
    date: "7/24",
    "4. とても満足": 30,
    "3. 満足": 13,
    "2. 不満": 22,
    "1. とても不満": 30,
    平均スコア: 3.2,
  },
  {
    date: "7/25",
    "4. とても満足": 20,
    "3. 満足": 98,
    "2. 不満": 22,
    "1. とても不満": 30,
    平均スコア: 2.3,
  },
  {
    date: "7/26",
    "4. とても満足": 27,
    "3. 満足": 39,
    "2. 不満": 20,
    "1. とても不満": 18,
    平均スコア: 2.7,
  },
  {
    date: "7/26",
    "4. とても満足": 18,
    "3. 満足": 48,
    "2. 不満": 21,
    "1. とても不満": 20,
    平均スコア: 1.8,
  },
  {
    date: "7/27",
    "4. とても満足": 23,
    "3. 満足": 38,
    "2. 不満": 25,
    "1. とても不満": 3,
    平均スコア: 2.3,
  },
  {
    date: "7/28",
    "4. とても満足": 34,
    "3. 満足": 43,
    "2. 不満": 21,
    "1. とても不満": 30,
    平均スコア: 3.4,
  },
];

export default function App() {
  return (
    <>
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        <h1>今日の会社説明会はどうでしたか？</h1>
      </div>
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        <h2>アンケート回答数、平均スコア（日毎）</h2>
      </div>
      <ResponsiveContainer width="95%" height={500}>
        <ComposedChart width={750} height={300} data={dailyData}>
          <XAxis dataKey="date" padding={{ right: 50, left: 50 }} />
          <YAxis yAxisId={1} label={{ value: "回答数", angle: -90, dx: -20 }} />
          <YAxis
            yAxisId={2}
            orientation="right"
            domain={[0, 5]}
            tickCount={6}
            label={{ value: "平均スコア", angle: -90, dx: 20 }}
          />
          <Tooltip />
          <Legend />
          <CartesianGrid strokeDasharray="3 3" />
          <Bar
            yAxisId={1}
            dataKey="1. とても不満"
            stackId="a"
            barSize={50}
            fill="#FF8042"
          />
          <Bar yAxisId={1} dataKey="2. 不満" stackId="a" fill="#FFBB28" />
          <Bar yAxisId={1} dataKey="3. 満足" stackId="a" fill="#00C49F" />
          <Bar yAxisId={1} dataKey="4. とても満足" stackId="a" fill="#0088FE" />
          <Line yAxisId={2} dataKey="平均スコア" />
        </ComposedChart>
      </ResponsiveContainer>
    </>
  );
}

ポイントとしては、まずY軸のコンポーネント<YAxis />を2つ追加し、それぞれにyAxisId={1}およびyAxisId={2}とY軸IDを振ります。

src/App.tsx

          <YAxis yAxisId={1} label={{ value: "回答数", angle: -90, dx: -20 }} />
          <YAxis
            yAxisId={2}
            orientation="right"
            domain={[0, 5]}
            tickCount={6}
            label={{ value: "平均スコア", angle: -90, dx: 20 }}
          />

そして<Bar />や<Line />のグラフ描画のコンポーネントに、対応させたいY軸と同じIDをyAxisId={1}、yAxisId={2}のように振ります。

src/App.tsx

          <Bar yAxisId={1} dataKey="2. 不満" stackId="a" fill="#FFBB28" />
          <Bar yAxisId={1} dataKey="3. 満足" stackId="a" fill="#00C49F" />
          <Bar yAxisId={1} dataKey="4. とても満足" stackId="a" fill="#0088FE" />
          <Line yAxisId={2} dataKey="平均スコア" />

これにより2種類のY軸を表示し、それぞれに複合グラフ中のチャートを別々に対応させることができます。

またY軸の単位は<YAxis />のdomainプロパティでそれぞれ指定、または対応させたチャートのデータの大きさによりそれぞれ個別に自動調整されます。

おわりに

Rechartsの複合グラフ（Composed Chart）で2種類のY軸を表示してみました。

公式サイトのExampleには実装例が無かったので最初は困りましたが、Stack Overflowでサンプルを示している方がいたので助かりました。

参考

• ComposedChart | Recharts
• reactjs - Recharts ComposedChart two different data types / data baselines (value / percentage) - Stack Overflow

以上