react-chartjs-2の例 （幅と高さの固定方法）

概要

手軽にグラフを描けるライブラリChart.jsを、
Reactのコンポーネントとして扱うことができるライブラリ、react-chartjs-2を使用する際に、幅と高さを固定幅にする際にハマったのでメモにしました。

環境

npm install --save react-chartjs-2@2.6 chart.js@2.6

ハマったところ

react-chartjs-2の公式サイトでは、幅と高さをカスタマイズするためには、optionとしてmaintainAspectRatio: falseとすると書いてあります。
しかし、その通りにして実行すると、heightは設定した通りになるのですが、widthは横幅いっぱいに広がってしまいます。
この解決方法としては、optionに responsive: falseを加えることで、レスポンシブルデザインをオフにすることで固定幅にすることができます。

例

実際のコードと実行例は次の通りです。

コード

index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import { Line } from 'react-chartjs-2';

const App = () => {
  const chartData = {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [
      {
        label: 'My First dataset',
        fill: false,
        lineTension: 0.1,
        backgroundColor: 'rgba(75,192,192,0.4)',
        borderColor: 'rgba(75,192,192,1)',
        borderCapStyle: 'butt',
        borderDash: [],
        borderDashOffset: 0.0,
        borderJoinStyle: 'miter',
        pointBorderColor: 'rgba(75,192,192,1)',
        pointBackgroundColor: '#fff',
        pointBorderWidth: 1,
        pointHoverRadius: 5,
        pointHoverBackgroundColor: 'rgba(75,192,192,1)',
        pointHoverBorderColor: 'rgba(220,220,220,1)',
        pointHoverBorderWidth: 2,
        pointRadius: 1,
        pointHitRadius: 10,
        data: [65, 59, 80, 81, 56, 55, 40],
      }
    ]
  };

  const options = {
    maintainAspectRatio: false,
    responsive: false,
  };

  return (
    <Line
      data={chartData}
      options={options}
      width={200}
      height={200}
    />

  );
};

ReactDOM.render((
  <App />
), document.getElementById('app'));

実行例