Zenn
📊

rechartsにグラデーションを適用する

2020/10/29に公開
JavaScript
React
#
recharts
SVG
tech

reactでグラフを扱いたかったら候補に上がってくるのがrecharts
直感的でどの形態のグラフでも扱いやすいのですが、基本の色はベタ塗りなんですよね
それをグラデーションに変更する方法をご紹介します。

SVGのグラデーション方法を利用

出力内容を見ると<svg>なのでsvgでグラデーションを適用する際に利用する方法でそのままいけます
いろんなチャートありますが、今回はレーダーチャートを例にします。

<RadarChart cx={300} ...>
  <PolarGrid />
  <PolarAngleAxis dataKey="subject" />
  <PolarRadiusAxis />
  <Radar
    name="Mike"
    dataKey="A"
    stroke="#ffffff"
    fill="#8884d8"
    fillOpacity={0.6}
  />
</RadarChart>

これにsvgでグラデーション追加するときのようなコードを追加

<RadarChart cx={300} ...>
  <PolarGrid />
  <PolarAngleAxis dataKey="subject" />
  <PolarRadiusAxis />
  
  <defs>
    <linearGradient
      id="gradationColor"
      x1="0%"
      y1="0%"
      x2="100%"
      y2="100%"
    >
      <stop offset="0%" stopColor="#ff0000" />
      <stop offset="100%" stopColor="#ffa500" />
    </linearGradient>
  </defs>
  
  <Radar
    name="Mike"
    dataKey="A"
    stroke="#ffffff"
    fill="url(#gradationColor)"
    fillOpacity={0.6}
  />
</RadarChart>
  • <def></def>を挿入。位置は実際のチャートを描画する<Radar>の手前です。
  • <Radar />内のfillを<def>で指定したidにする

fillでなくstrokeをグラデーションしたいなら、stokeの方をidで指定すれば反映されます。

linerGradientだけでなくradialGradientもいける（推測）

書き方は<svg>のグラデーションと全く一緒なので、おそらくradialGradient（放射状グラデーション）も同じようにいけるのではないかと思います。

実務で使ったもの以外は全て推測で申し訳ない限りです、何か新たな発見ありましたらコメントもらえると嬉しいす。

サンプルコード

こちらからは以上です！ご意見ご感想お待ちしております！

参考

Discussion