Rechartsのグラフにグラデーションをかけてイイ感じにする

はじめに

Rechartsというチャートライブラリを使って↓こんな感じのグラフを作る。

実装

まずチャートに表示するデータはこう。

const data = [
  { name: "2016", a: 44, b: 28 },
  { name: "2017", a: 48, b: 35 },
  { name: "2019", a: 36, b: 27 },
  { name: "2020", a: 14, b: 3 },
  { name: "2021", a: 5, b: 3 },
];

次にチャートの設定を書いていく。

<div>
  <ResponsiveContainer width="100%" height={350}>
    <BarChart data={data}>
      <CartesianGrid vertical={false} />
      <XAxis dataKey="name" axisLine={false} tickLine={false} />
      <YAxis axisLine={false} tickLine={false} />
      <Bar dataKey="a" fill="url(#gradationColorA)" radius={[6, 6, 0, 0]} label={{ position: "top" }} />
      <Bar dataKey="b" fill="url(#gradationColorB)" radius={[6, 6, 0, 0]} label={{ position: "top" }} />
      <defs>
        <linearGradient id="gradationColorA" gradientTransform="rotate(90)">
          <stop offset="0%" stopColor="#ff4e50" />
          <stop offset="98%" stopColor="#f9d423" />
        </linearGradient>
        <linearGradient id="gradationColorB" gradientTransform="rotate(90)">
          <stop offset="0%" stopColor="#495aff" />
          <stop offset="98%" stopColor="#0acffe" />
        </linearGradient>
      </defs>
    </BarChart>
  </ResponsiveContainer>
</div>

<ResponsiveContainer />で囲むとチャートをレスポンシブ対応にすることができる。

<BarChart />のdataに表示する情報を渡す

<CartesianGrid />はチャートに表示される縦線と横線設定をする。
今回は縦線がいらなかったのでverticalをfalseにしてる。

<XAxis />のdataKeyでチャートの下に表示するラベルを指定する。

<XAxis />と<YAxis />のaxisLineとtickLineをfalseにしているのは目盛り線を消すため。

<Bar />のdataKeyはdataのプロパティ名を指定する。
fillにurl(#gradationColorA)を設定するとこの後記述する<linearGradient />の設定が反映される。

Rechatsが生成するのは<svg>なのでdefsでいろいろ設定できる。

<linearGradient />でグラデーションを作成する。
gradientTransform="rotate(90)"とすると上下でグラデーションを設定できる。

最後に<stop />で色と範囲を指定して完成。

さいごに

さっと調べただけだから、もっとイイ書き方あるかもです。

参考

https://recharts.org/en-US/