How To Render Charts In React: using react-chartjs-2 and Chart.js

React is a well-liked JavaScript package that gives programmers more effective and orderly ways to create user interfaces. There are many third-party libraries to pick from when it comes to data visualization in React. React-chartjs-2, which is based on Chart.js, is one of the most widely used libraries for rendering charts in React.

In this blog post, we’ll look at how to render charts in a React application using react-chartjs-2.

Installing Dependencies

Installing the required dependencies is essential before we can begin. We must install both the react-chartjs-2 and Chart.js libraries in order to use react-chartjs-2. By executing the following command, we can install them using npm:

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

These libraries can be used in our React application once the installation is complete.

Creating a Charts in React Component

We need to develop a new component that will act as the container for our chart in order to render a chart using react-chartjs-2. This component will produce the chart using the Chart.js library. And incorporate it into our React application using the react-chartjs-2 module.

Here is an illustration of how this component might appear:

import React from 'react';
import { Line } from 'react-chartjs-2';
const Chart = () => {
  const data = {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [
      {
        label: 'My First Dataset',
        data: [65, 59, 80, 81, 56, 55, 40],
        fill: false,
        borderColor: 'rgb(75, 192, 192)',
        tension: 0.1
      }
    ]
  };
  const options = {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  };
  return (
    <div>
      <Line data={data} options={options} />
    </div>
  );
};
export default Chart;

In this demonstration, a straightforward line chart with data for seven months is created. Within the element, the chart settings and data are defined as constants before being passed to the React-Chartjs-2 Line component.

Customizing the Charts in React Component

By changing the options object we supply to the Line component. We can alter our chart in a variety of different ways. For instance, by substituting the Bar component for the Line component, we may convert the chart type from a line chart to a bar chart:

import React from 'react';
import { Bar } from 'react-chartjs-2';
const Chart = () => {
  const data = {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [
      {
        label: 'My First Dataset',
        data: [65, 59, 80, 81, 56, 55, 40],
        backgroundColor: 'rgba(75, 192, 192, 0.2)',
        borderColor: 'rgba(75, 192, 192, 1)',
        borderWidth: 1
      }
    ]
  };
  const options = {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  };
  return (
    <div>
      <Bar data={data} options={options} />
    </div>
  );
};
export default Chart;

In this example, we use the Bar component instead of the Line component.

Now By changing the options object we supply to the Bar component. We can alter our chart in a variety of different ways. For instance, by substituting the Pie component for the Bar component, we may convert the chart type from a bar chart to a pie chart:

import React from 'react';
import { Pie } from 'react-chartjs-2';
const Chart = () => {
  const data = {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [
      {
        label: 'My First Dataset',
        data: [65, 59, 80, 81, 56, 55, 40],
        backgroundColor: 'rgba(75, 192, 192, 0.2)',
        borderColor: 'rgba(75, 192, 192, 1)',
        borderWidth: 1
      }
    ]
  };
  const options = {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  };
  return (
    <div>
      <Bar data={data} options={options} />
    </div>
  );
};
export default Chart;

In this example, we use the Pie component instead of the Bar component.

Conclusion

Let’s sum up by saying that react-chartjs-2 and Chart.js offer a quick and effective solution to build stunning and interactive charts in a React application. We can produce fully customized charts that may be used to succinctly and clearly portray complex data with just a few lines of code.

You may begin utilizing react-chartjs-2 and Chart.js to build your own charts in React by following the instructions provided in this blog post. Charts can be a useful tool for communicating data, whether you’re building a dashboard, visualizing financial data, or developing a data-intensive application.

Thus, feel free to experiment with various chart settings and types to produce the ideal chart for your application. There are countless possibilities when using Chart.js and React-ChartJS-2!

For more click here

For more updates on such topics, please follow our LinkedIn page- FrontEnd Studio.