rechartsを使ってちょっと複雑なグラフを描いてみる

今回は、rechartsというReact向けのグラフ描画ライブラリを使って少し複雑なグラフを作ってみます。
rechartsはexampleやAPIドキュメントが整備されており、比較的はじめやすいライブラリではありますが、ドキュメントに記載されていない機能もちょこちょこあります。

今回やってみる内容

グリッドをストライプにする
グラフ内に複数のデータソースから複数の種類のグラフを表示する

作ってみたグラフは、生後0 ~ 24ヶ月の乳幼児の体重、身長の平均値から算出したガイドとその上に実際の子供のデータをプロットするというようなことをイメージしています。

グラフのグリッドをストライプにする

まずは、簡単な方から

グラフに表示されるグリッドの帯に互い違いに色をつけてストライプにすることができます。

<CartesianGrid
  horizontalFill={['#C0C0C0', '#FFFFFF']}
  fillOpacity={0.2}
  stroke="lightgrey"
/>

グラフにグリッドを表示させるには、CartesianGrid を用います。
このコンポーネントには、 horizontalFill , verticalFill という属性が用意されており、ここに配列で希望する色を配列で指定することでグリッドをストライプにすることができます。
ただ、その際何もしないとグリッドのストロークが消えてしまうので fillOpacity を使って調整する必要があります。

github.com

複数のデータソースから複数の種類のグラフを表示する

ということでここで具体的に実現する内容は以下になります。

y軸をふたつ表示する
AreaChartとLineChartを両方表示する
AreaChartとLineChartで別々のデータソースを使用する

y軸をふたつ表示する

y軸をふたつ表示するには、まさに YAxis をふたつ用意すれば良いのですが、その際 orientation 属性で表示位置を指定した上で yAxisId 属性でそれぞれの軸の識別子を定義します。
その後、それぞれのコンポーネントでも明示的に yAxisId を指定することで軸とデータを紐付けます。

<YAxis
  yAxisId="weight" 
  orientation="left"
/>
<YAxis
  yAxisId="height"
  orientation="right"
/>
<Area
  dataKey="weight"
  yAxisId="weight"
/>
<Area
  dataKey="height" 
  yAxisId="height" 
/>

AreaChartとLineChartを両方表示する

ComposedChart を使うと複数の種類のチャートを同時に表示することができます。
ただ、今回の場合ガイドである AreaChart はツールチップや凡例の表示から除外したいですね。
その際、 tooltipType="none" , legendType="none" を指定することでツールチップ、凡例を非表示にすることができます。

<ComposedChart
  data={guides}
>
  <Tooltip />
  <Legend />
  ...
  <Area
    type="monotone"
    dataKey="weight"
    yAxisId="weight"
    tooltipType="none"
    legendType="none"
  />
  <Area
    type="monotone"
    dataKey="height"
    yAxisId="height"
    tooltipType="none"
    legendType="none"
  />
 ...
</ComposedChart>

AreaChartとLineChartで別々のデータソースを使用する

グラフのガイドは事前に定義したものを使い、実際のデータと別々の状態で扱いたいですよね。
データソースがひとつに限定される場合、ふたつのデータをうまくマージしなければいけません。

recharts では、基本的に AraaChart などの基本的なラッパーコンポーネントの方にデータを指定して各コンポーネントで参照するキーを指定する形なので複数のデータソースが利用できないように見えますが、 data 属性を使って Line などのコンポーネントに直接データを入れることもできます。今回の例では、ガイドのデータは Chart コンポーネントに指定し実際のデータを Line コンポーネントに直接入れています。

<Line
  type="linear"
  data={records}
  dataKey="weight"
/>

終わりに

今回は、rechartsを使って公式のexamplesにもないようなグラフを作ってみました。 rechartsは、高機能で使いやすくドキュメントもある程度整備されていますが、凝った機能はドキュメントにも載っていなかったりするのでstackoverfllowや実際のソースから自分の要求する機能が存在するかどうか確認する必要がありますね。