Introduction
Chart.js is a popular open-source library for visualizing data. It allows you to create different types of charts from datasets such as bar charts, pie, line, donut, scatters, and many more.
Creating a React App with Chart.js
To get started, you need to install the React application first. You can browse for it: https://reactjs.org/docs/create-a-new-react-app.html
If you have installed the React application, now it is necessary to setup Chart Js for React. One line is enough for this.
Installation via NPM
npm install --save react-chartjs-2 chart.jscCreating a Simple Doughnut Chart in React
Pie and doughnut charts are probably the most commonly used charts. They are divided into segments, the arc of each segment shows the proportional value of each piece of data.
They are excellent at showing the relational proportions between data.
Pie and doughnut charts are effectively the same class in Chart.js, but have one different default value — their cutout. This equates to what portion of the inner should be cut out. This defaults to 0 for pie charts, and '50%' for doughnuts.
They are also registered under two aliases in the Chart core. Other than their different default value, and different alias, they are exactly the same.
Creating a Simple Line Chart in React
A line chart is a way of plotting data points on a line. Often, it is used to show trend data, or the comparison of two data sets.
Creating a Simple MultiType Chart in React
With Chart.js, it is possible to create mixed charts that are a combination of two or more different chart types. A common example is a bar chart that also includes a line dataset.
When creating a mixed chart, we specify the chart type on each dataset. In this example I use faker to create some fake data and make a mixed chart.
Conclusion
Yes, that’s it! I hope this article will be useful for you in React Js for data visualization.
Chart.js can do so much more and we have only scratched the surface. You can continue learning more about Chart.js by checking out their documentation.
