개요

간편하게 그래프를 그릴 수 있는 라이브러리 Chart.js
React의 컴퍼넌트로서 취급할 수 있는 라이브러리, react-chartjs-2 를 사용할 때에, 폭과 높이를 고정폭으로 할 때에 빠졌으므로 메모로 했습니다.

환경

npm install --save [email protected] [email protected]

빠진 곳

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'));

실행 예