Reactのライブラリ「Recharts」について - SO Technologies 開発者ブログ

こんにちは。AG-Boost事業部開発部の宇野です。最近「Recharts」というグラフを簡単に描けるライブラリを使用する機会がありました。色々とカスタマイズできるのですが公式ドキュメントを見てもピンとこない点があったりしました。中でもX,Y軸をカスタマイズする辺りで悩んだ部分をまとめてみようと思います。サンプルはAreaChartという面グラフを使用してます。

特にカスタマイズしていないコードとその画像

const data = [
  {
    month: 1,
    '売上': 100000,
    '目標': 200000
  },
  {
    month: 2,
    '売上': 400000,
    '目標': 300000
  },
  {
    month: 3,
    '売上': 300000,
    '目標': 400000
  },
  {
    month: 4,
    '売上': 800000,
    '目標': 500000
  },
  {
    month: 5,
    '売上': 200000,
    '目標': 600000
  },
  {
    month: 6,
    '売上': 300000,
    '目標': 800000
  },
];
  
return (
  <AreaChart
    width={600}
    height={400}
    data={data}
  >
    <XAxis
      dataKey="month"
    />
    <YAxis
      yAxisId={1}
    />
    <Area yAxisId={1} dataKey="売上" />
    <Area yAxisId={1} dataKey="目標" />
  </AreaChart>
  );

これだけでこんなグラフができます。

XAxis / YAXis コンポーネント

グラフのX軸、Y軸のことです。

orientation

Y軸を右に表示させたい場合の例です。

<YAxis
  yAxisId={1}
  orientation="right"
/>

tickCount

軸の数を決めれるやつです。今回はY軸の数を3本にしたいと思います。

<YAxis
  yAxisId={1} 
  orientation="right"
  tickCount={3}
/>

tick

軸のstyleを指定できたりします。

<YAxis
  yAxisId={1}
  orientation="right"
  tickCount={3}
  tick={{
    fontSize: 18,
    fontWeight: 700,
    fill: 'red'
  }}
/>

tickMargin

軸にmarginを指定できます。軸とキーの間に余白ができます。

<YAxis
  yAxisId={1}
  orientation="right"
  tickCount={3}
  tick={{
    fontSize: 18,
    fontWeight: 700,
    fill: 'red'
  }}
  tickMargin={20}
/>

width

軸の幅を指定できます。キーが長すぎると文字が見切れるのでこれで調整します。

<YAxis
  yAxisId={1}
  orientation="right"
  tickCount={3}
  tick={{
    fontSize: 18,
    fontWeight: 700,
    fill: 'red'
  }}
  tickMargin={20}
  width={100}
/>

tickLine

軸の表示を指定できます。今回は非表示にしてみます。

<YAxis
  yAxisId={1}
  orientation="right"
  tickCount={3}
  tick={{
    fontSize: 18,
    fontWeight: 700,
    fill: 'red'
  }}
  tickMargin={20}
  width={100}
  tickLine={false}
/>

axisLine

下記だとY軸のベースの線の表示を指定できます。こちらも非表示にしてみます。

<YAxis
  yAxisId={1}
  orientation="right"
  tickCount={3}
  tick={{
    fontSize: 18,
    fontWeight: 700,
    fill: 'red'
  }}
  tickMargin={20}
  width={100}
  tickLine={false}
  axisLine={false}
/>

tickFormatter

軸のキーのところの表示をカスタムできます。今回はカンマと¥マークを先頭につけたいと思います。

<YAxis
  yAxisId={1}
  orientation="right"
  tickCount={3}
  tick={{
    fontSize: 18,
    fontWeight: 700,
    fill: 'red'
  }}
  tickMargin={20}
  width={100}
  tickLine={false}
  axisLine={false}
  tickFormatter={value => `¥${value.toLocaleString()}`}
/>

おまけ

面グラフの面部分の色をグラデーションカラーにさせてみたいと思います。 defsタグでグラデーションを作成してそのidをAreaコンポーネントにサンプルの場合だとfill="url(#areaColor)"と書くと実現できます。

<defs>
  <linearGradient id="areaColor" x1="0" y1="0" x2="0" y2="1">
    <stop offset="0%" stopColor="red" stopOpacity={1} />
    <stop offset="100%" stopColor="yellow" stopOpacity={0} />
  </linearGradient>
</defs>

<Area yAxisId={1} dataKey="売上" fill="url(#areaColor)" />

最後に

今回はXAxis、YAxisコンポーネントの割と使いそうな部分と悩んだ部分をまとめてみました。他にも色々なコンポーネントがあってカスタマイズできる部分があるのでみなさんも色々試してみてください！