Building Charts with React and ChartJS
Introduction Data visualization tools are powerful for analyzing and communicating complex data sets in a more accessible and intuitive way. With the advent of modern web technologies, creating interactive data visualizations has become easier than ever before. React and Chart.js are two popular technologies developers can use to create dynamic and interactive data visualizations. React is a widely-used JavaScript library for building user interfaces. Its component-based architecture and declarative syntax make it easy to create reusable UI components and manage complex states. Chart.js is a popular, flexible, and easy-to-use open-source JavaScript library for creating responsive and customizable charts and graphs. Created and announced in 2013, it has ~60,000 Github stars and about 2.4 million weekly NPM downloads. In this article, we will build a simple single-page application (SPA) to showcase how Chart.js can be used with React to create Line, Bar, and Pie Charts. Prerequisite Before we proceed, basic knowledge of JavaScript and React is required to grasp the concepts discussed in this article fully. Come along and let's build together! Project Setup We start by first creating a new React application by running this NPM command: npx create-react-app react-chartjs This creates a new project folder react-chartjs with all the necessary files needed for a react application to run smoothly, then we proceed to remove all unnecessary files until we have a folder structure that looks like this: Using ChartJS After setting up our project, we now have to install the necessary packages to make Chart.js work in React. For that, we need to install two NPM packages. First, the chart.js package, which provides us with a set of frequently used chart types, plugins, and customization options that can be used for any type of application, not just react applications. And secondly, we need to install the react-chartjs-2 npm package, which is a wrapper for Chart.js in React applications and provides us with easy-to-use Chart.js components tailor-made for React. To install these two packages, we run the following command: npm install chart.js react-chartjs-2 After installation, the chart can not exist independently without some form of dataset being fed into it. Let's proceed to create this data file. For the sake of this tutorial, we will create a dummy and random set of data that shows the customer gains and losses of an online business over a period of years. To achieve this, in the src folder create a new file called data.js and populate it with the following code: export const CustomerData = [ { id: 1, year: 2017, customersLost: 820, customersGained: 60000 }, { id: 2, year: 2018, customersLost: 435, customersGained: 35000 }, { id: 3, year: 2019, customersLost: 565, customersGained: 48000 }, { id: 4, year: 2020, customersLost: 230, customersGained: 50000 }, { id: 5, year: 2021, customersLost: 120, customersGained: 40000 }, ]; Now that we have some data to work with, we can proceed to create the charts. Creating the Bar Chart A Bar Chart is a common statistical and data visualization tool. It is used to compare multiple datasets and to show trends in data side by side, represented by vertical bars. The react-chartjs-2 library exports a component Bar that is used for this purpose. In the src folder, we will create a new folder components that will house all our component files for this project. Inside the components folder, create a new file, and name it BarChart.js then add the following code to the file. import React from 'react'; import { Bar } from 'react-chartjs-2'; import { Chart, BarController, BarElement } from 'chart.js/auto'; import { CustomerData } from '../data'; Chart.register(BarController, BarElement); const BarChart = () => { const data = { labels: CustomerData.map((data) => data.year), datasets: [ { label: 'Cutomers Gained', data: CustomerData.map((data) => data.customersGained), backgroundColor: ['#4FD1C5', '#E9D8FD', '#FC8181', '#F3BA2F', '#2A71D0'], }, ], }; return ( Bar Chart ); }; export default BarChart; Let's walk through this code: We start by importing React from react which is typical for every React file. Then we imported the Bar component as a named export from react-chartjs-2 to give us access to the Chart.js Bar component tailored for React. We import Chart, which is the main Chart.js class from the special chart.js/auto path. It loads all available Chart.js components and also provides the register method, which we will use to register the BarController and BarElement classes that are required for the Bar com

Introduction
Data visualization tools are powerful for analyzing and communicating complex data sets in a more accessible and intuitive way. With the advent of modern web technologies, creating interactive data visualizations has become easier than ever before.
React and Chart.js are two popular technologies developers can use to create dynamic and interactive data visualizations.
React is a widely-used JavaScript library for building user interfaces. Its component-based architecture and declarative syntax make it easy to create reusable UI components and manage complex states.
Chart.js is a popular, flexible, and easy-to-use open-source JavaScript library for creating responsive and customizable charts and graphs. Created and announced in 2013, it has ~60,000 Github stars and about 2.4 million weekly NPM downloads.
In this article, we will build a simple single-page application (SPA) to showcase how Chart.js can be used with React to create Line, Bar, and Pie Charts.
Prerequisite
Before we proceed, basic knowledge of JavaScript and React is required to grasp the concepts discussed in this article fully.
Come along and let's build together!
Project Setup
We start by first creating a new React application by running this NPM command:
npx create-react-app react-chartjs
This creates a new project folder react-chartjs
with all the necessary files needed for a react application to run smoothly, then we proceed to remove all unnecessary files until we have a folder structure that looks like this:
Using ChartJS
After setting up our project, we now have to install the necessary packages to make Chart.js work in React. For that, we need to install two NPM packages. First, the chart.js
package, which provides us with a set of frequently used chart types, plugins, and customization options that can be used for any type of application, not just react applications. And secondly, we need to install the react-chartjs-2
npm package, which is a wrapper for Chart.js in React applications and provides us with easy-to-use Chart.js components tailor-made for React.
To install these two packages, we run the following command:
npm install chart.js react-chartjs-2
After installation, the chart can not exist independently without some form of dataset being fed into it. Let's proceed to create this data file.
For the sake of this tutorial, we will create a dummy and random set of data that shows the customer gains and losses of an online business over a period of years.
To achieve this, in the src
folder create a new file called data.js
and populate it with the following code:
export const CustomerData = [
{
id: 1,
year: 2017,
customersLost: 820,
customersGained: 60000
},
{
id: 2,
year: 2018,
customersLost: 435,
customersGained: 35000
},
{
id: 3,
year: 2019,
customersLost: 565,
customersGained: 48000
},
{
id: 4,
year: 2020,
customersLost: 230,
customersGained: 50000
},
{
id: 5,
year: 2021,
customersLost: 120,
customersGained: 40000
},
];
Now that we have some data to work with, we can proceed to create the charts.
Creating the Bar Chart
A Bar Chart is a common statistical and data visualization tool. It is used to compare multiple datasets and to show trends in data side by side, represented by vertical bars. The react-chartjs-2
library exports a component Bar
that is used for this purpose.
In the src
folder, we will create a new folder components
that will house all our component files for this project. Inside the components
folder, create a new file, and name it BarChart.js
then add the following code to the file.
import React from 'react';
import { Bar } from 'react-chartjs-2';
import { Chart, BarController, BarElement } from 'chart.js/auto';
import { CustomerData } from '../data';
Chart.register(BarController, BarElement);
const BarChart = () => {
const data = {
labels: CustomerData.map((data) => data.year),
datasets: [
{
label: 'Cutomers Gained',
data: CustomerData.map((data) => data.customersGained),
backgroundColor: ['#4FD1C5', '#E9D8FD', '#FC8181', '#F3BA2F', '#2A71D0'],
},
],
};
return (
<div>
<h1 style={{ color: '#319795' }}>Bar Chart</h1>
<Bar data={data} />
</div>
);
};
export default BarChart;
Let's walk through this code:
We start by importing React
from react
which is typical for every React file. Then we imported the Bar
component as a named export from react-chartjs-2
to give us access to the Chart.js Bar
component tailored for React. We import Chart
, which is the main Chart.js
class from the special chart.js/auto
path. It loads all available Chart.js components and also provides the register
method, which we will use to register the BarController
and BarElement
classes that are required for the Bar
component to be fully rendered. If this is not done, we get some errors in the console about some variables not being registered, so it's quite essential.
We proceed to create the BarChart
ES6 functional component, and in there, we declare the data
object. This is a Chart.js requirement as it holds the data and specifications that will be passed to the Chart.js Bar
component to enable it to render the necessary data.
The data
object takes in some properties, labels
and datasets
respectively. The labels
consists of the information we want to show on the x-axis of the BarChart, which must be an array
. In our case, this will be the year in review as specified in the CustomerData
variable in our data.js
file. We can extract the individual year into an array by simply running the javascript map
function on the CustomerData
variable and returning data.year
value.
The datasets
property also takes in an array of object with several properties. This is where the configuration and customization of the Bar Chart happens. Numerous properties can be set here depending on the developer's preference, but for the sake of this article, we're only going to use the necessary and needed ones. The label
property takes in a string that serves as a title for the Chart, the data
property like the labels
property discussed in the previous paragraph also takes in an array containing the set of data that will be represented on the y-axis, which in our case, is the number of customers gained by the business as given in our data.js
file, for this, we can also run a map
function again on the CustomerData
array, but this time return the data.CustomerGain
value.
We can specify different background colors for each bar in the Bar Chart through the backgroundColor
property. It takes in an array of color codes. The color code can be in various formats like color name, hex codes, or RGB values, the choice is yours. If only one color is specified, it will be applied to all the bars in the chart, and if two colors are specified, it will be alternated through the bars. Since we have a small dataset of only five elements, we can afford to set colors for each bar individually.
Finally, we return
our JSX element, which is a div
with a h1
tag for the chart heading, and the Bar
component that takes in a prop called data
and in there, we pass the data
variable. Then we export the BarChart
component as a default
export
to be imported and used elsewhere in our app.
And with that, the BarChart
component is done. We can then go into our App.js
file and render it with the following code:
import './App.css';
import BarChart from './components/BarChart';
function App() {
return (
<div className="App" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
<div style={{ width: '60vw', marginBottom: '2em' }}>
<BarChart />
</div>
</div>
);
}
export default App;
In the code above, we import the BarChart
component we've just created and render it so it can be visible in the browser.
We also added some inline styles to display and align things in place properly.
Way to go! Now when we view the project in the browser, we should have something like this:
And with that, we have successfully implemented the Chart.js Bar Chart.
In this article, I also want to show how we can use the line and pie charts from Chart.js. To do this, we will follow an identical approach to what we did with building the bar chart, with just a few changes. Come along as we explore them together.
Creating the Line Chart
A line chart is another type of data visualization tool, it is essentially a graph where intersections denote the data points on the x and y axis, and a line is drawn through them.
For the line chart, we will use another set of random data. This data represents an individual's account balance through the months of a year. So we add the following code to our data.js
file:
export const BalanceData = [
{
id: 1,
month: 'Jan',
balance: 500,
},
{
id: 2,
month: 'Feb',
balance: 300,
},
{
id: 3,
month: 'Mar',
balance: 400,
},
{
id: 4,
month: 'Apr',
balance: 500,
},
{
id: 5,
month: 'May',
balance: 800,
},
{
id: 6,
month: 'Jun',
balance: 650,
},
{
id: 7,
month: 'Jul',
balance: 700,
},
{
id: 8,
month: 'Aug',
balance: 690,
},
{
id: 9,
month: 'Sep',
balance: 1000,
},
{
id: 10,
month: 'Oct',
balance: 1200,
},
{
id: 11,
month: 'Nov',
balance: 1050,
},
{
id: 12,
month: 'Dec',
balance: 1300,
},
];
We create the line chart by first creating a component for it. In the components
folder, create a new file named LineChart.js
and in there, add the following code:
import React from 'react';
import { Line } from 'react-chartjs-2';
import { BalanceData } from '../data';
import { Chart, LineElement } from 'chart.js';
Chart.register(LineElement);
const LineChart = () => {
const data = {
labels: BalanceData.map((data) => data.month),
datasets: [
{
label: 'My Balance',
data: BalanceData.map((data) => data.balance),
lineTension: 0.5,
backgroundColor: '#9F7AEA',
borderColor: '#9F7AEA',
pointBorderColor: '#B57295',
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: '#D6BCFA',
pointHoverBorderColor: '#D6BCFA',
pointRadius: 3,
},
],
};
return (
<div>
<h1 style={{ color: '#805AD5' }}>Line Chart</h1>
<Line data={data} />
</div>
);
};
export default LineChart;
Just like we did in the BarChart.js
file, we import React from 'react'
, but this time around, we import the Line
component from the react-chartjs-2
library instead, this is the main Line
component provided by Chart.js
and it is what we will use to render the chart at the end. We then proceed to import the newly added BalanceData
variable from our data.js
file. Finally, for the imports, we import the Chart
and the LineElement
classes from the chart.js
library and register
them in the following line, similar to what we did while creating the BarChart
component.
After all the imports are settled, we then proceed to create the ES6 functional component for the LineChart
component. We declare the data
variable as an object with labels
and datasets
properties respectively. For the labels
property, as we did before, we map
over the BalanceData
array and extract out the data.month
values to be used on the x-axis of the chart. For the datasets
property, it takes in an array of object and in there, we specify the chart title with the label
property as a string 'My Balance'
and the data
property which also takes in an array, and to get the desired data, we map over the BalanceData
array again and extract the data.month
values. To further customize the appearance of the line chart, there are several other properties provided by Chart.js that you can set. I've chosen to set some in this project, including the lineTension
, backgroundColor
, pointRadius
, pointBorderColor
, pointHoverBackgroundColor
, etc. You can learn more about all the other properties provided by Chart.js in their official documentation.
Finally, we return a JSX element containing a h1
header for the title, and the Line
component, which takes a data
prop, and we then pass the data
variable into it. After that, we export the LineChart
as default
from the file to be used in other parts of the app. And with that, we are done with the line chart.
To render the beautiful line chart we have just created, we need to edit our App.js
file and add the following code to it:
import './App.css';
import BarChart from './components/BarChart';
import LineChart from './components/LineChart';
function App() {
return (
<div className="App" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
<div style={{ width: '60vw', marginBottom: '2em' }}>
<BarChart />
</div>
<div style={{ width: '60vw', marginBottom: '2em' }}>
<LineChart />
</div>
</div>
);
}
export default App;
As we've done before, we import the LineChart
component we just created and render it in our JSX with additional inline styling for proper display and alignment.
Now if we view our app in the browser to check our progress so far, we see our creation, and it looks like this:
Beautiful. And it's interactive also, as you can hover over a data point to reveal more detailed information.
Now let's move on to the last chart in this article.
Creating the Pie Chart
Way to go. One more chart, and we are done. If we've learned anything from the previous two charts, then this next one should be a piece of "pie" for us, right?