Best Practices for Creating Charts in ReactJS
One of the most popular JavaScript libraries that developers use for front-end development, ReactJS, is used for multiple applications, including the creation of charts. A StackOverflow survey in 2017 stated that ReactJS’ popularity has gone up by 311 percent among developers.
Charts are a graphical representation of data and help us analyze, predict, and understand the data according to the chart’s values and outcomes. There are many npm packages with which you can create charts in react, and the chart.js package makes chart creation quite easy.
In this blog, we will learn how to create a React chart using chart.js.
What is chart.js?
Chart.js is a widely-used chart library for JavaScript that will allow you to make everything from basic line or bar charts to advanced radar or nonlinear scale charts. You get multiple customizations for styles, colors, tooltips, etc., and the charts made are fully interactive and responsive.
Right now, the latest version is chart.js version 2, and it runs perfectly with ReactJS. You need to install this version before using it through an npm command.
npm install react-chartjs-2 chart.js –save
Creating a Line Chart
In a basic line chart, data points are plotted on the line, and it is mostly used for showing data trends or comparing a pair of data sets. The following is the App.js file that will be used to show the charts.
import React from "react";
import { Line } from "react-chartjs-2";
const Chart = () => {
const lineChartData = {
labels: ["October", "November", "December"],
datasets: [
{
data: [8137119, 9431691, 10266674],
label: "Infected",
borderColor: "#3333ff",
fill: true,
lineTension: 0.5
},
{
data: [1216410, 1371390, 1477380],
label: "Deaths",
borderColor: "#ff3333",
backgroundColor: "rgba(255, 0, 0, 0.5)",
fill: true,
lineTension: 0.5
}
]
};
return (
<Line
type="line"
width={160}
height={60}
options={{
title: {
display: true,
text: "COVID-19 Cases of Last 6 Months",
fontSize: 20
},
legend: {
display: true, //Is the legend shown?
position: "top" //Position of the legend.
}
}}
data={lineChartData}
/>
);
};export default Chart;
Explanation
All the line chart’s styling properties and data are contained in the lineChartData variable. This object has various properties that are used to display the data in the form of a line chart.
The lineChartData variable has a labels property array that assigns names to each bar in the chart. The datasets property array has subsets of information like the bar color, width, border, and height of the bars. In every set of object datasets, there is a lineTension property that controls the curvature of lines joining the points in the chart.
The Line element has a chart legend property that displays information regarding the datasets which appear on your line chart.
Final Output of the Chart
Other Charts You Can Create
Apart from the basic line chart, there are many other charts you can make in React JS using the chart.js library. Let’s know about some other popular charts.
A bar chart represents data values as vertical bars and helps denote data trends or compare multiple datasets simultaneously. It follows a similar syntax to a line chart, but it does not use the lineTension property.
A pie chart is divided into various segments, and every segment’s arc represents a data type’s proportional value. It is perfect if you want to know the relational proportions between different data sets.
Conclusion
As discussed above, React JS is one of the most used JavaScript libraries, and with chart.js, we can create a React chart. We learned how to make a basic line chart, and similarly, you can create a bar, pie, doughnut, or polar area chart.
There are many other libraries you can use to create visualizations in ReactJS. Just remember to install any library you want to use beforehand, and you will be good to go.
