update 2021.02.01 chart js install base settigns

https://www.chartjs.org/docs/latest/charts/line.html
https://www.codota.com/code/javascript/modules/react-chartjs-2

chart js

우선 설치를 한다.

yarn add react-chartjs-2 chart.js

import { Bar } from 'react-chartjs-2'

<Bar
  data={data}
  options={options}
  height={300}
/>
    

기본적인 사용방법은
https://www.chartjs.org/docs/
에 나와있습니다.

import React, {Component} from 'react';
import { Line } from 'react-chartjs-2';

const data = {
  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]
    }
  ]
};

export default class LineDemo extends Component {
  render() {
    return (
      <div>
        <h2>Line Example</h2>
        <Line ref="chart" data={data} />
      </div>
    );
  }

  componentDidMount() {
    const { datasets } = this.refs.chart.chartInstance.data
    console.log(datasets[0].data);
  }
}

import { Line } from "react-chartjs-2";

를 추가해준다.

options

        <Line
          ref="chart"
          data={data}
          options={{
            legend: {
              display: false,
            },
          }}
          style={this.styles}
          width={this.state.width}
          height={this.state.height}
        />
      </div>

만약에 구현하고 customizing 하고싶은것이 options 에 없다면 ,
라이브러리 코드를 뜯어봐야한다.