This content originally appeared on DEV Community and was authored by Maulik Paghdal
Visualizing data is essential for modern web applications. Chart.js, combined with React, provides a powerful way to create interactive and visually appealing charts. In this guide, we’ll walk through how to integrate Chart.js in a React project and build interactive charts effortlessly.
1. What is Chart.js?
Chart.js is a popular JavaScript library for creating responsive and animated charts. It supports various chart types such as line, bar, pie, and more.
Why Use Chart.js in React?
- Lightweight and easy to use.
- Supports multiple chart types.
- Provides built-in animations and tooltips.
- Highly customizable with plugins and options.
2. Setting Up React with Chart.js
First, ensure you have a React project. If you don’t, create one using:
npx create-react-app react-chartjs-app
cd react-chartjs-app
Now, install Chart.js and the React wrapper:
npm install chart.js react-chartjs-2
3. Creating a Simple Line Chart
Let’s start by creating a Line Chart component.
Step 1: Import Dependencies
Create a new file LineChart.js inside the components folder:
import React from "react";
import { Line } from "react-chartjs-2";
import { Chart, registerables } from "chart.js";
// Register necessary chart elements
Chart.register(...registerables);
const LineChart = () => {
const data = {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
datasets: [
{
label: "Sales ($)",
data: [1200, 1900, 3000, 5000, 2800, 4000],
fill: false,
backgroundColor: "rgba(75, 192, 192, 0.6)",
borderColor: "rgba(75, 192, 192, 1)",
},
],
};
const options = {
responsive: true,
plugins: {
legend: {
display: true,
position: "top",
},
},
};
return <Line data={data} options={options} />;
};
export default LineChart;
4. Using the Line Chart in App.js
Now, import and use the LineChart component in App.js:
import React from "react";
import LineChart from "./components/LineChart";
function App() {
return (
<div className="App">
<h2>Sales Data</h2>
<LineChart />
</div>
);
}
export default App;
5. Adding a Bar Chart
For a Bar Chart, create BarChart.js:
import React from "react";
import { Bar } from "react-chartjs-2";
const BarChart = () => {
const data = {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [
{
label: "Votes",
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
"rgba(255, 99, 132, 0.6)",
"rgba(54, 162, 235, 0.6)",
"rgba(255, 206, 86, 0.6)",
"rgba(75, 192, 192, 0.6)",
"rgba(153, 102, 255, 0.6)",
"rgba(255, 159, 64, 0.6)",
],
borderWidth: 1,
},
],
};
const options = {
responsive: true,
plugins: {
legend: {
display: true,
position: "top",
},
},
};
return <Bar data={data} options={options} />;
};
export default BarChart;
Then, import it in App.js:
import BarChart from "./components/BarChart";
...
<h2>Voting Results</h2>
<BarChart />
6. Making Charts Interactive
You can add tooltips, hover effects, and animations to make charts interactive.
Modify the options object to include hover and animation effects:
const options = {
responsive: true,
plugins: {
legend: {
display: true,
position: "top",
},
tooltip: {
enabled: true,
},
},
hover: {
mode: "nearest",
intersect: true,
},
animation: {
duration: 1000,
easing: "easeInOutBounce",
},
};
7. Customizing the Charts
Chart.js provides various customization options. You can:
- Change chart colors dynamically.
- Modify tooltip appearance.
- Update labels and legends.
- Use different chart types like Pie, Radar, Doughnut.
Example of a Pie Chart:
import { Pie } from "react-chartjs-2";
const PieChart = () => {
const data = {
labels: ["Apple", "Samsung", "Google", "OnePlus"],
datasets: [
{
data: [300, 500, 100, 150],
backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56", "#4BC0C0"],
},
],
};
return <Pie data={data} />;
};
export default PieChart;
8. Deploying the React Chart.js App
Once your app is ready, deploy it using Vercel, Netlify, or GitHub Pages.
Deploy with Vercel
-
Install Vercel CLI:
npm install -g vercel -
Run:
vercel
Your app will be live instantly!
9. Final Thoughts
Chart.js is a powerful and lightweight tool for data visualization in React. With the flexibility of customization and interactivity, you can create stunning dashboards and real-time charts for your web applications.
🔗 Learn More
For a detailed tutorial and advanced customizations, check out the full article on Script Binary.
This content originally appeared on DEV Community and was authored by Maulik Paghdal
Maulik Paghdal | Sciencx (2025-02-01T18:48:14+00:00) React Chart.js: Building Interactive Charts with Ease. Retrieved from https://www.scien.cx/2025/02/01/react-chart-js-building-interactive-charts-with-ease/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.