회사에서 일을 하다가 에너지 관련된 업무를 주된 업무로 하다보니 차트를 사용해야 하는 경우가 많았다.
운 좋게 차트관련 라이브러리를 사용할 기회가 생겼고 이번 기회를 통해 사용해보고 정리를 해보았다.
1 ) React-chartjs-2
https://www.npmjs.com/package/react-chartjs-2
react-chartjs-2
React components for Chart.js. Latest version: 4.0.1, last published: a month ago. Start using react-chartjs-2 in your project by running `npm i react-chartjs-2`. There are 603 other projects in the npm registry using react-chartjs-2.
www.npmjs.com
https://github.com/reactchartjs/react-chartjs-2
GitHub - reactchartjs/react-chartjs-2: React components for Chart.js, the most popular charting library
React components for Chart.js, the most popular charting library - GitHub - reactchartjs/react-chartjs-2: React components for Chart.js, the most popular charting library
github.com
2) Chart js
가장 유용하게 사용했던 라이브러리이다 .
실시간 데이터 real-time chart를 만들고 싶을 때는
chart js straming을 사용해 제작하면 실시간으로 데이터 반영 되는 커스텀 차트를 개발 할 수 있다 . 매우 유용~!
현재 기준으로는 streaming 관련 버전 호환 문제가 좀 있는거 같긴하다.
https://www.chartjs.org/docs/3.7.1/getting-started/installation.html
Installation | Chart.js
npm (opens new window) (opens new window) CDN CDNJS (opens new window) Chart.js built files are available on CDNJS (opens new window): https://cdnjs.com/libraries/Chart.js (opens new window) jsDelivr (opens new window) (opens new window) Chart.js built fil
www.chartjs.org
https://nagix.github.io/chartjs-plugin-streaming/master/
chartjs-plugin-streaming
nagix.github.io
3) Recharts
4) Apex Chart
ApexCharts.js - Open Source JavaScript Charts for your website
ApexCharts is a a free and open-source modern charting library that helps developers to create beautiful and interactive visualizations for web pages.
apexcharts.com
5) highcharts
나름 사용방법 간단하고 심플한거 같다. 디자인도 유용한게 많음
Interactive javascript charts library
Don't miss a byte Never miss important news, tips, and tricks that will help you get the most out of your Highcharts products. We won’t spam you, sell your contact info or do anything else that would betray your trust. By signing up you confirm to have r
www.highcharts.com
6) biz charts
https://github.com/alibaba/BizCharts
GitHub - alibaba/BizCharts: Powerful data visualization library based on G2 and React.
Powerful data visualization library based on G2 and React. - GitHub - alibaba/BizCharts: Powerful data visualization library based on G2 and React.
github.com
7) nivo chart
Home | nivo
nivo.rocks
8) Victory
https://formidable.com/open-source/victory/
Victory
Formidable is a global design and engineering consultancy and open source software organization, specializing in React.js, React Native, GraphQL, Node.js, and the extended JavaScript ecosystem. We have locations in Seattle, London, Toronto, Denver, and Pho
formidable.com
Victory의 경우 react-native관련하여 따로 라이브러리가 있는 점이 특징이라고 할 수 있겠다.
'지토의 개발일기 > React' 카테고리의 다른 글
| [React] react.js dashboard template 7가지 소개 (0) | 2022.02.23 |
|---|---|
| [React] node.js , npm, npx, yarn 이란?? (0) | 2022.02.10 |
| [React] Redux 라이브러리 (Action) (0) | 2021.09.22 |
| [React] Context Api란 ?? (0) | 2021.09.15 |
| [React] async / await (0) | 2021.09.09 |