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
우선 설치를 한다.
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";
를 추가해준다.
<Line
ref="chart"
data={data}
options={{
legend: {
display: false,
},
}}
style={this.styles}
width={this.state.width}
height={this.state.height}
/>
</div>
만약에 구현하고 customizing 하고싶은것이 options 에 없다면 ,
라이브러리 코드를 뜯어봐야한다.