📊

Rechartsの折れ線グラフカスタマイズ方法

2025/01/24に公開

株式会社 Rehab for JAPAN エンジニアのもじゃ(@moja_moja)です。

前回は折れ線・棒・円・折れ線 + 棒グラフの実装例を紹介しました。

今回は紹介しきれなかった折れ線グラフのカスタマイズ方法をサンプルコード付きで紹介していきたいと思います。

なお、基本の折れ線グラフ実装例や一部の説明については、前回紹介しているので省きます。

サンプルコードの実行方法についてはこちらに記載しています。

線の形状を変更する方法

<Line/>コンポーネントの線の形状を変更するには”type”のプロパティを使用します。

type"linear""monotone""step"などの文字列で設定する場合と関数で定義することもできます。

定義しない場合、デフォルトは'linear’になりますので、今回は'step’'monotone’にした場合を紹介します。

実装例

 <Line
+   type="monotone"
    dataKey="pv"
    stroke="#8884d8"/>

"monotone"の場合

 <Line
+   type="step"
    dataKey="pv"
    stroke="#8884d8"/>

"step"の場合

点線にする方法

点線に変更するには<Line/>コンポーネントにstrokeDasharrayを追加します。

実装例

  <Line
    dataKey="uv"
    stroke="#82ca9d"
+   strokeDasharray="5 5"
  />

"5 5" はあまり見慣れない記述方法ですが、左の値は破線の長さ・右の値は隙間の長さを設定するようになっています。

実際に値を変更したパターンを紹介します。

strokeDasharray="8 2"の場合

strokeDasharray="4 8"

dot の変更方法

折れ線のドットはデフォルトでは ⚪︎ ですが、複数の折れ線グラフを表示する場合、ドットを ⚪︎ 以外に変更したいケースもあるかと思います。

そのような場合は<Line/>コンポーネントのプロパティにあるdotactiveDotを使用します。

dotは描画時のドットでactiveDotはカーソルがドットに当たった時に描画されるものになっています。

次に紹介するサンプルコードでは dot を ✖︎ に変更するコードの実装例になります。

dot を ✖︎ にする実装例

import React, { PureComponent } from "react";
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
} from "recharts";

const data = [
  {
    name: "Page A",
    uv: 4000,
    pv: 2400,
    amt: 2400,
  },
  {
    name: "Page B",
    uv: 3000,
    pv: 1398,
    amt: 2210,
  },
  {
    name: "Page C",
    uv: 2000,
    pv: 9800,
    amt: 2290,
  },
  {
    name: "Page D",
    uv: 2780,
    pv: 3908,
    amt: 2000,
  },
  {
    name: "Page E",
    uv: 1890,
    pv: 4800,
    amt: 2181,
  },
  {
    name: "Page F",
    uv: 2390,
    pv: 3800,
    amt: 2500,
  },
  {
    name: "Page G",
    uv: 3490,
    pv: 4300,
    amt: 2100,
  },
];

const CustomizedCrossDot = (props) => {
  const { cx, cy, fill } = props;
  return (
    <svg width={12} height={12} viewBox="0 0 8 10" x={cx - 6} y={cy - 6}>
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M3.18569 5.00011L0.000267329 8.18553L0.707374 8.89264L3.8928 5.70722L7.28124 9.09566L7.98834 8.38855L4.5999 5.00011L7.98861 1.6114L7.2815 0.904297L3.8928 4.29301L0.707107 1.10732L0 1.81442L3.18569 5.00011Z"
        fill={fill}
      />
    </svg>
  );
};

export default class Example extends PureComponent {
  render() {
    return (
      <ResponsiveContainer width="100%" height="100%">
        <LineChart
          width={500}
          height={300}
          data={data}
          margin={{
            top: 5,
            right: 30,
            left: 20,
            bottom: 5,
          }}
        >
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="name" />
          <YAxis />
          <Tooltip />
          <Line
            dataKey="pv"
            stroke="#82ca9d"
            fill="#82ca9d"
            dot={<CustomizedCrossDot />}
            isAnimationActive={false}
          />
        </LineChart>
      </ResponsiveContainer>
    );
  }
}

サンプルコードを実行するとドットが ✖︎ に変更されていることが確認できます。

ポイント

<Line /> コンポーネントに dotfill を追加します。

CustomizedCrossDot の props で fill を取得するために<Line />コンポーネントにfillを追加しましたが、色が統一されている場合は CustomizedCrossDot<path/>にある fillに直接記述しても問題ありません。

<svg/>の x と y にはそれぞれ、cx - 6cy - 6 と記述しています。

これは props で取得した cx と cy のみで反映すると dot の位置がずれて表示するため、減算して微調整しています。

減算しなかった場合の dot の位置

activeDotの変更方法

dot の変更はできましたがカーソルをあてると dot が ⚪︎ に戻ってしまいます。

次にactiveDotを ✖︎ に変更する実装例を紹介します。

activeDotの実装例

const CustomizedCrossDot = (props) => {
  const { cx, cy, fill, active } = props;
  return (
    <svg
      width={active ? 20 : 12}
      height={active ? 20 : 12}
      viewBox="0 0 8 10"
      x={active ? cx - 10 : cx - 6}
      y={active ? cy - 10 : cy - 6}
    >
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M3.18569 5.00011L0.000267329 8.18553L0.707374 8.89264L3.8928 5.70722L7.28124 9.09566L7.98834 8.38855L4.5999 5.00011L7.98861 1.6114L7.2815 0.904297L3.8928 4.29301L0.707107 1.10732L0 1.81442L3.18569 5.00011Z"
        fill={fill}
      />
    </svg>
  );
};

export default class Example extends PureComponent {
  render() {
    return (
      <ResponsiveContainer width="100%" height="100%">
        <LineChart
          width={500}
          height={300}
          data={data}
          margin={{
            top: 5,
            right: 30,
            left: 20,
            bottom: 5,
          }}
        >
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="name" />
          <YAxis />
          <Tooltip />
          <Line
            type="linear"
            dataKey="pv"
            stroke="#82ca9d"
            fill="#82ca9d"
            dot={<CustomizedCrossDot active={false} />}
            activeDot={<CustomizedCrossDot active />}
            isAnimationActive={false}
          />
        </LineChart>
      </ResponsiveContainer>
    );
  }
}

activeDot の定義は dot と同じなので、<CustomizedCrossDot/>の中身を変更して使用しました。

コンポーネントにactiveを追加し、activeを条件に width・height・x・y の値を変更するようにすれば、カーソルが当たった時に ✖︎ の dot になります。

✖︎ 以外の dot 変更例

サンプルコードでは dot を ✖︎ に変更しましたが、四角・三角・ひし形の実装例も紹介したいと思います。

四角

const Rectangle = (props) => {
  const { cx, cy, fill, active } = props;
  return (
    <svg
      width={active ? 12 : 10}
      height={active ? 12 : 10}
      viewBox="0 0 8 8"
      x={active ? cx - 6 : cx - 5}
      y={active ? cy - 6 : cy - 5}
      stroke={active ? "#ff0000" : "none"}
      strokeWidth={2}
    >
      <rect width="8" height="8" fill={fill} />
    </svg>
  );
};

dot

activeDot

三角

const Polygon = (props) => {
  const { cx, cy, fill, active } = props;
  return (
    <svg
      width={active ? 18 : 14}
      height={active ? 16 : 12}
      viewBox="0 0 8 6"
      x={active ? cx - 9 : cx - 7}
      y={active ? cy - 9 : cy - 7}
      stroke={active ? "#ff0000" : "none"}
      strokeWidth={1}
    >
      <path d="M4 0L7.4641 6H0.535898L4 0Z" fill={fill} />
    </svg>
  );
};

dot

activeDot

ひし形

const Diamond = (props) => {
  const { cx, cy, fill, active } = props;
  const size = active ? 16 : 12;
  return (
    <svg x={cx - size / 2} y={cy - size / 2} width={size} height={size}>
      <path
        d={`M ${size / 2} 0 L ${size} ${size / 2} L ${size / 2} ${size} L 0 ${
          size / 2
        } Z`}
        fill={fill}
        stroke={active ? "#ff0000" : "none"}
        strokeWidth={2}
      />
    </svg>
  );
};

dot

activeDot

終わりに

今回は Recharts の折れ線グラフカスタマイズ方法について紹介しました。

折れ線グラフは利用するケースが多いと思いますので、今回紹介した内容が少しでも参考になると幸いです。

Rehab Tech Blog

Discussion