Maulik Paghdal

Posted on Feb 1 • Originally published at scriptbinary.com

React Chart.js: Building Interactive Charts with Ease

#react #web #javascript #webdev

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.

DEV Community