Chart그리는 툴 - react-chartjs-2(TypeScript관련 에러처리)

간단하게 Chart를 그려야해서 찾아보니, react-chartjs-2라는게 있었다. 기반은 Chart.js이고 이 라이브러리의 React Wrapper이다. 

 

 

react-chartjs-2

https://github.com/reactchartjs/react-chartjs-2

reactchartjs/react-chartjs-2

설치는 react-chartjs-2, chart.js 둘다 해야하고, TypeScript를 쓰는 프로젝트면 이것도 필요해서 설치를 했다. 

 

 

type관련 설치

https://www.npmjs.com/package/@types/chart.js

@types/chart.js

 

 

 

 

TypeScript관련 문제 해결

그런데 아래처럼 기본예제를 따라했는데도Type관련해서 계속 에러가 났다. 문서를 보면 어떤 데이터 항목을 채워줘야하는지 알수 있다. 

 

상세한 에러 메시지는 아래와 같다. 

여기서 보면 'type' 이 없다는데, 문서에 보면 type이 어떤 값을 필요로 하는지 확인할수 있다.

 

 

 

문서에서 type이 뭔지 정의해두었다. 

<Line type={"line"} data={data} options={options} />

 

문서를 보고 해당 값을 채워준다. 간단하게 Type관련 에러처리가 끝난다!

 

 

https://github.com/reactchartjs/react-chartjs-2/blob/master/example/src/charts/Line.js 의 예제 따라하기