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

​​React is a really cool tool that helps programmers make awesome user interfaces using JavaScript. 

When it comes to showing data in the form of charts, there are lots of libraries to choose from. 

One of the most popular libraries for making charts in React is called react-chartjs-2, which is based on Chart.js.

In this blog post, we'll learn how to use react-chartjs-2 to create charts in a React application. It's going to be a fun adventure where we'll explore the world of charts and discover how to bring them to life in our React projects. 

So, join us and let's dive into the wonderful world of charting!

Before we start, we need to make sure we have everything we need. We have to install two important libraries, react-chartjs-2 and Chart.js, to use react-chartjs-2.

To install them, we just need to use a command called npm:

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

 

To make our charts look amazing in our React application, we're working on a special component. It's like a container that holds our charts and makes them come alive. 

We're using a cool library called Chart.js and a handy tool called react-chartjs-2 to make it happen. Take a look at this illustration to get an idea of what we're building:

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 example, we're making a simple line chart that shows data for seven months. First, we set up the chart's settings and the data we want to display. Then, we use a component called React-Chartjs-2 Line to create the chart using the settings and data we defined.

 

 

We can make different changes to the Line component's options to modify our chart in various ways. 

For example, if we replace the Line component with the Bar component, we can change the chart from showing lines to showing bars:

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, instead of using the Line component, we use the Bar component to create a chart.

By changing the options we give to the Bar component, we can make different changes to our chart. 

For example, if we replace the Bar component with the Pie component, we can change 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;

 

React-chartjs-2 and Chart.js are tools that help you create beautiful and interactive charts in a React application. With just a few lines of code, you can make custom charts that show complex data in a simple and clear way.

Charts are great for sharing information. Whether you're making a dashboard, showing financial data, or working on an app with lots of data, charts can help you communicate the information effectively.

If you want to start making your own charts in React, you can follow the instructions in this blog post. It will show you how to use react-chartjs-2 and Chart.js to get started.

 

---

You might also like:

• Read Also: How To Validate Form In React JS
• Read Also: How To Upload And Preview Image In React JS
• Read Also: How To Get Multiple Checkbox Value In React JS
• Read Also: How To Get Current Date And Time In React JS