React Chartjs 2

React Chartjs 2 is a library that allows developers to easily create beautiful and interactive data visualizations in their React applications using Chart.js. Chart.js is a popular open-source library for creating responsive and customizable charts and graphs.

Installation

To install React Chartjs 2, simply run the following command in your terminal:

npm install react-chartjs-2 chart.js

This will install both React Chartjs 2 and the Chart.js library.

Usage

To use React Chartjs 2 in your React application, you will first need to import the necessary components and Chart.js options:

import { Line, Bar, Pie } from 'react-chartjs-2';
import { Chart } from 'chart.js';

The Line, Bar, and Pie components are used to create different types of charts. The Chart import is necessary to customize the appearance and behavior of the charts.

Next, you can create a new chart by passing data and options as props to the appropriate component:

<Line data={data} options={options} />
<Bar data={data} options={options} />
<Pie data={data} options={options} />

The data prop is an object that contains the actual data to be displayed in the chart, while the options prop is an object that contains the customizable chart options.

Example

Here is an example of a simple Line chart created using React Chartjs 2:

import React from 'react';
import { Line } from 'react-chartjs-2';

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: {
    yAxes: [
      {
        ticks: {
          beginAtZero: true,
        },
      },
    ],
  },
};

const ChartComponent = () => (
  <>
    <div className='header'>
      <h1 className='title'>Line Chart</h1>
    </div>
    <Line data={data} options={options} />
  </>
);

export default ChartComponent;

In this example, we are passing an object for data that contains an array of labels, and an array of data for a single dataset. We are also passing an empty object for options. The resulting Line chart will display the data points for each label on the x-axis, with a line connecting them on the y-axis.

Conclusion

React Chartjs 2 is a powerful library for creating stunning data visualizations in your React applications. With a simple and intuitive API, you can create customizable and responsive charts and graphs that will bring your data to life.