#概要
手軽にグラフを描けるライブラリ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'));