How to Use Chart.js in React? (Complete Guide)

Creating interactive charts is crucial for data-driven websites, and Chart.js makes it simple with support for a variety of chart types. Integrating it with React enhances flexibility by using React’s state and component-driven structure, allowing seamless updates to charts. This makes Chart.js ideal for creating dashboards and analytics tools in React.

In this blog, we’ll guide you through setting up Chart.js in React and creating basic charts in React. We’ll cover the basic understanding of Chart.js components and props in React. Plus, we’ll help you learn how ReactJS development experts create various types of charts using Chart.js in React. So, with that, first, let’s understand what exactly Chart.js is.

What is Chart.js?

Chart.js is a popular open-source JavaScript library used to create interactive charts and graphs. It offers a wide range of chart types, including line charts, bar charts, pie charts, radar charts, and more. Chart.js is known for its ease of use, flexibility, and performance.

It is widely used in web development projects to visualize data in a visually appealing and informative way. Chart.js is lightweight (only about 60 KB when minified) and easy to use, making it a popular choice among developers.

Key Features of Chart.js

• Variety of Chart Types: Chart.js supports many chart types, such as line, bar, pie, doughnut, radar, polar area, and bubble charts. This makes it versatile for different data visualization needs.
• Responsive and Interactive: Charts created with Chart.js are responsive by default, meaning they adjust to different screen sizes. They also offer interactive features like tooltips, animations, and legends.
• Customization: Chart.js offers extensive customization options, allowing developers to modify chart properties like colors, fonts, labels, tooltips, and animations. This flexibility makes it easy to customize charts to match the design and needs of your application.
• Lightweight and Simple: The library is lightweight, making it ideal for web applications where performance is critical. It also has a simple and intuitive API, making it easy to integrate with various frameworks like React.
• Cross-Browser Compatibility: Chart.js is compatible with all modern browsers, ensuring that charts display correctly across different devices.

These features of Chart.js make it a versatile and powerful tool for data visualization in websites. Now, let’s understand why you should use Chart.js to represent visual data on your website.

Why Use Chart.js with React?

Using Chart.js in React is beneficial for several reasons because of Chart.js’s charting capabilities and React’s component-based architecture. Here are the key reasons to use Chart.js in React:

• Seamless Integration with React: The react-chartjs-2 library provides a convenient wrapper for integrating Chart.js with React. That makes it easy to use Chart.js as a React component. This allows you to treat charts like any other React component, leveraging React’s component lifecycle, props, and state.
• Declarative Syntax: In React, you can define a chart in a declarative way, meaning the chart is a direct reflection of the data in the component’s state or props. If the state changes, the chart automatically re-renders, making it easier to manage dynamic or real-time data.
• Component-Based Structure: React’s component-based approach allows you to modularize your code. You can create chart components (like PieChart, BarChart, LineChart) that can be reused throughout your application. This promotes clean, maintainable code and makes it easy to isolate and manage individual charts.
• Interactive Features: Chart.js supports animations, tooltips, and legends, making charts more interactive and engaging for users. These interactive features can be controlled using React’s event-handling mechanisms, allowing developers to create a more dynamic and user-friendly experience.
• Responsive Design: Both React and Chart.js are designed with responsiveness in mind. Charts created with Chart.js automatically adjust their size to fit the container they are placed in. React’s flexible layout system further enhances this responsiveness, allowing you to create adaptive and user-friendly interfaces.

Using Chart.js in React applications provides an easy, responsive, and efficient way to visualize data. The combination of Chart.js charting features with React library makes it ideal for building interactive dashboards for websites. Now, you may want to know how you can use Chart.js in React, right? So, let’s dive into how professional ReactJS developers set up Chart.js in React.

How to Use Chart.js in a React Project?

To set up Chart.js in a React project, you will need to install both Chart.js and the react-chartjs-2 wrapper. That will make it easier to integrate Chart.js with React. Here’s a step-by-step guide on how to do it:

Step 1: Create a New React Project

If you don’t already have a website, you can create a React project using Create-React-App. Open your terminal and run the following command:

npx create-react-app chartjs-react-app
cd chartjs-react-app

This will create a new React project in a folder named chartjs-react-app and change into that directory.

Step 2: Install Chart.js and react-chartjs-2

Next, you need to install both Chart.js and the react-chartjs-2 wrapper that makes it easy to use Chart.js in React components. You can install them by running the following commands in your project directory:

npm install chart.js
npm install react-chartjs-2

Step 3: Import Chart Components in React

Once you’ve installed the necessary packages, you can start using them in your React components. In your React component file (e.g., App.js), import the required chart components from react-chartjs-2 and Chart.js. For example, let’s import a Line Chart to get started:

import React from 'react';
import { Line } from 'react-chartjs-2';
import 'chart.js/auto';

Here, the chart.js/auto import automatically registers the necessary components for Chart.js.

Step 4: Create Sample Chart Data and Options

import React from 'react';
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js';
import { Line } from 'react-chartjs-2';
import faker from 'faker';
ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
);
export const options = {
  responsive: true,
  plugins: {
    legend: {
      position: 'top' as const,
    },
    title: {
      display: true,
      text: 'Chart.js Line Chart',
    },
  },
};
const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
export const data = {
  labels,
  datasets: [
    {
      label: 'Dataset 1',
      data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
      borderColor: 'rgb(255, 99, 132)',
      backgroundColor: 'rgba(255, 99, 132, 0.5)',
    },
    {
      label: 'Dataset 2',
      data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
      borderColor: 'rgb(53, 162, 235)',
      backgroundColor: 'rgba(53, 162, 235, 0.5)',
    },
  ],
};
export function App() {
  return <Line options={options} data={data} />;
}

Step 5: Render the Chart in React

Now that you have the data and options set, you can render the chart in your React component by returning the chart component (in this case, Line) and passing the data and options as props:

function App() {
  return (
    <div>
      <h1>Sales Data</h1>
      <Line data={data} options={options} />
    </div>
  );
}
export default App;

Step 6: Run the React Project

Now, start your React app to see the chart in action. In your terminal, run the following command:

npm start

This will start the development server, and you should be able to view your chart in the browser at http://localhost:3000. If you had successfully setup Chart.js in React and implemented correctly you will see the chart as given below:

With that, we have learned how to set up and make basic use of Chart.js in React. The basic charting is easy but if you want to make further customizations consider hiring a ReactJS development company.

Understanding Chart.js Components and Props in React

When using Chart.js in a React project via the react-chartjs-2 wrapper, understanding the core components and how to work with props is crucial for building customized charts. Let’s break down the key components and props:

Chart Components in react-chartjs-2

The react-chartjs-2 library provides ready-to-use chart components that you can import and use in your React app. Each component corresponds to a specific chart type provided by Chart.js. Here are the most common chart components:

• Line Chart: <Line />
• Bar Chart: <Bar />
• Pie Chart: <Pie />
• Doughnut Chart: <Doughnut />
• Radar Chart: <Radar />
• Polar Area Chart: <PolarArea />
• Bubble Chart: <Bubble />
• Scatter Chart: <Scatter />

Props for Chart Components

Each chart component in react-chartjs-2 accepts three important props that control the data and configuration of the chart. These props are essential for customizing your chart’s appearance and behavior.

data Prop

The data prop is the most important one, as it defines the actual information to be displayed in the chart. It typically consists of labels and datasets. Here’s the basic structure for the data prop:

const data = {
  labels: ['January', 'February', 'March', 'April', 'May'],
  datasets: [
    {
      label: 'Sales 2023 (in USD)',
      data: [5000, 10000, 15000, 20000, 25000],
      backgroundColor: 'rgba(75,192,192,0.4)',
      borderColor: 'rgba(75,192,192,1)',
      borderWidth: 1,
    },
  ],
};

Here is the code explanation:

• labels: These are the labels that appear on the X-axis (for most charts). They describe what each data point represents.
• datasets: An array of datasets where each dataset represents one line (for line charts), one bar series (for bar charts), or segments (for pie charts).
  • data: The actual values corresponding to each label.
  • backgroundColor: The fill color for the chart elements.
  • borderColor: The color of the borders of the chart elements.
  • borderWidth: The width of the borders.

options Prop

The options prop allows you to customize various aspects of the chart, such as axes, scales, tooltips, legends, and animations. Here’s an example of how you can use the options prop:

const options = {
  scales: {
    y: {
      beginAtZero: true, // Ensures Y-axis starts at zero
    },
  },
  plugins: {
    legend: {
      display: true, // Show or hide legend
      position: 'top', // Position legend at the top of the chart
    },
    tooltip: {
      enabled: true, // Enable tooltips
    },
  },
};

Common Customizable Options:

• scales: Controls the axes and their configurations (for line, bar, and other chart types that use axes).
  • y: Configuration for the Y-axis.
  • x: Configuration for the X-axis.
• plugins: This section controls chart plugins like tooltips and legends.
  • legend: Configures the display and positioning of the legend.
  • tooltip: Customizes the tooltip that appears when hovering over data points.

type Prop (for Dynamic Chart Types)

If you’re dynamically creating different chart types, you can use the type prop to specify which chart to render. For instance:

<Chart type="line" data={data} options={options} />

While this is less common in a basic React setup where the chart type is determined by the component (e.g., <Line /> or <Bar />), using the type prop can allow for dynamic chart switching.

By understanding these components and props, you can effectively create and customize various types of charts using Chart.js in React. Now let’s dive into how expert ReactJS developers create different types of charts using React Chart.js.

Creating Different Types of Charts Using React Chart.js

The most commonly used charts include Line, Bar, Pie, and Doughnut charts. Each chart type has its own component and requires slightly different configuration for data and options. Here’s a step-by-step guide on how to create Pie, Bar, and Doughnut charts in React using Chart.js and react-chartjs-2:

Prerequisite Steps

Step 1: First, ensure you have a React project set up. If not, you can create one using Create-React-App by running the following command:

npx create-react-app react-chartjs-app

Step 2: Next, navigate to your project directory:

cd react-chartjs-app

Step 3: Now, install Chart.js and react-chartjs-2:

npm install chart.js react-chartjs-2

These libraries will help you integrate Chart.js components within React. Once you are done we can begin to create different types of charts using Chart.js in React.

Creating a Pie Chart in React with Chart.js

A Pie Chart is used to represent data in proportion to the whole, making it ideal for visualizing percentage-based data. Here is how you can create Pie Chart:

Step 1: Create a new component for the Pie Chart (e.g., PieChart.js).

import React from 'react';
import { Pie } from 'react-chartjs-2';
import 'chart.js/auto'; // Required to automatically register chart types
const PieChart = () => {
  const data = {
    labels: ['Red', 'Blue', 'Yellow', 'Green'],
    datasets: [
      {
        label: 'Colors Distribution',
        data: [30, 20, 25, 25],
        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)',
        ],
        borderColor: [
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
        ],
        borderWidth: 1,
      },
    ],
  };
  const options = {
    responsive: true,
    plugins: {
      legend: {
        position: 'top', // Places the legend at the top
      },
    },
  };
  return <Pie data={data} options={options} />;
};
export default PieChart;

Explanation:

• labels: Defines the labels for the chart (Red, Blue, etc.).
• datasets: Contains the data and styling for the chart.
• backgroundColor: Sets the colors of the pie sections.
• borderColor and borderWidth: Outlines each section.

Step 2: To use the Pie Chart component import it to the App.js file. Here is the code of App.js file:

import React from 'react';
import PieChart from './PieChart'; // Import the PieChart component
function App() {
  return (
    <div>
      <h1>Pie Chart Example</h1>
      <PieChart />
    </div>
  );
}
export default App;

Creating a Bar Chart in React with Chart.js

A Bar Chart is used to compare different categories or groups, typically used for showing sales or other data comparison.

Step 1: Create a new component for the Bar Chart (e.g., BarChart.js).

import React from 'react';
import { Bar } from 'react-chartjs-2';
import 'chart.js/auto';
const BarChart = () => {
  const data = {
    labels: ['Product A', 'Product B', 'Product C', 'Product D'],
    datasets: [
      {
        label: 'Sales (Units)',
        data: [150, 200, 120, 170],
        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)',
        ],
        borderColor: [
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
        ],
        borderWidth: 1,
      },
    ],
  };
  const options = {
    scales: {
      y: {
        beginAtZero: true, // Ensures the y-axis starts from 0
      },
    },
  };
  return <Bar data={data} options={options} />;
};
export default BarChart;

Explanation:

• labels: Represents each category (Product A, B, C, etc.).
• data: Contains sales data for each category.
• backgroundColor: Sets a different color for each bar.
• options: Contains additional configuration such as setting the y-axis to start at 0.

Step 2: Now to use the Bar Chart import it to the App.js file. Here is the code of App.js file:

import React from 'react';
import BarChart from './BarChart'; // Import the BarChart component
function App() {
  return (
    <div>
      <h1>Bar Chart Example</h1>
      <BarChart />
    </div>
  );
}
export default App;

Creating a Doughnut Chart in React with Chart.js

A Doughnut Chart is similar to a Pie Chart but with a hole in the center, useful for visualizing proportions with added visual appeal.

Step 1: Create a new component for the Doughnut Chart (e.g., DoughnutChart.js).

import React from 'react';
import { Doughnut } from 'react-chartjs-2';
import 'chart.js/auto';
const DoughnutChart = () => {
  const data = {
    labels: ['Apples', 'Oranges', 'Bananas', 'Grapes'],
    datasets: [
      {
        label: 'Fruit Consumption',
        data: [300, 150, 100, 50],
        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)',
        ],
        borderColor: [
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
        ],
        borderWidth: 1,
      },
    ],
  };
  const options = {
    responsive: true,
    plugins: {
      legend: {
        position: 'bottom', // Positions legend at the bottom
      },
    },
  };
  return <Doughnut data={data} options={options} />;
};
export default DoughnutChart;

Explanation:

• labels: Represents the different types of fruits.
• data: Contains the consumption data for each fruit.
• backgroundColor: Assigns colors to each section of the doughnut.

The Doughnut component behaves similarly to a Pie Chart but has a hole in the center for a different visual appeal.

Step 2: To use the Doughnut Chart component import it to your App.js file. Here is the code you may add to the App.js file:

import React from 'react';
import DoughnutChart from './DoughnutChart'; // Import the DoughnutChart component
function App() {
  return (
    <div>
      <h1>Doughnut Chart Example</h1>
      <DoughnutChart />
    </div>
  );
}
export default App;

With that, we covered how to set up Chart.js in a React project and the process of creating various types of charts in React using Chart.js. If you want more customization with the charts and to use them in an optimized way, consider hiring ReactJS developers.

FAQs About Using Chart.js in React

Wrapping Up

Using Chart.js in your React projects is a highly effective way to add visually appealing and interactive data representations. By using Chart.js, you can create various types of charts like Pies, Bars, Doughnuts, and more.

To use Chart.js in React more effectively and easily, using the react-chartjs-2 library is recommended. It provides you with various components that you can directly use and also customize its props. With a better understanding of Chart.js components and props of React, you will be able to handle customization.

If you are looking to build a visually appealing site while maintaining performance with customized charts, hire ReactJS developers.