Rechartsの折れ線グラフカスタマイズ方法
株式会社 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/>
コンポーネントのプロパティにあるdot
とactiveDot
を使用します。
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 />
コンポーネントに dot
と fill
を追加します。
CustomizedCrossDot
の props で fill
を取得するために<Line />
コンポーネントにfill
を追加しましたが、色が統一されている場合は CustomizedCrossDot
の <path/>
にある fill
に直接記述しても問題ありません。
<svg/>
の x と y にはそれぞれ、cx - 6
、cy - 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 の折れ線グラフカスタマイズ方法について紹介しました。
折れ線グラフは利用するケースが多いと思いますので、今回紹介した内容が少しでも参考になると幸いです。
Discussion