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

Websolutionstuff | Jul-26-2023 | Categories : React 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!

Installing Dependencies

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

 

Creating a Chart in React Component

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.

 

 

Customizing the Charts in React Component

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;

 

Conclusion

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:

Recommended Post
Featured Post
Laravel tips DB Models and Eloquent - Part 3
Laravel tips DB Models and Elo...

Welcome back to the third installment of our series on Laravel tips for database models and Eloquent. If you've been...

Read More

Oct-16-2023

How to Use Laravel Factory in Seeder
How to Use Laravel Factory in...

Laravel is a popular PHP framework known for its elegance and simplicity in building web applications. When it comes to...

Read More

Sep-13-2023

How to Convert Excel File into JSON in Javascript
How to Convert Excel File into...

Today in this small post i will show you how to convert excel file into json in javascript. Many time we have requi...

Read More

Jul-07-2021

How To Install LAMP Server In Ubuntu 22.04
How To Install LAMP Server In...

In today's digital landscape, hosting dynamic websites and powerful web applications is essential for individuals an...

Read More

Jul-31-2023