react-chartjs-2 - JavaScript

React-chartjs-2 is a library that allows you to create charts using Chart.js in your React applications. It provides a simple and easy-to-use interface for creating a wide variety of charts, including bar charts, line charts, pie charts, and many more.

Installation

You can install react-chartjs-2 using npm:

npm install react-chartjs-2

Usage

To use react-chartjs-2, you first need to import it and the Chart.js library into your React component. You can then create a new chart by passing in data and options as props to the Chart component.

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

const data = {
  labels: ['January', 'February', 'March', 'April', 'May', 'June'],
  datasets: [
    {
      label: 'Sales',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1
    }
  ]
};

const options = {
  indexAxis: 'y',
  scales: {
    x: {
      ticks: {
        beginAtZero: true
      }
    },
    y: {
      ticks: {
        min: 0,
        max: 20,
        stepSize: 5
      }
    }
  }
};

const BarChart = () => {
  return (
    <div>
      <h2>Sales Chart</h2>
      <Bar data={data} options={options} />
    </div>
  );
};

export default BarChart;

Documentation

For more information on how to use react-chartjs-2, including details on how to customize charts and add animations, check out the official documentation.

Examples

There are also several examples available on the GitHub repository.

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
    },
    {
      label: 'My Second dataset',
      data: [80, 81, 56, 55, 40, 65, 59],
      fill: false,
      borderColor: 'rgb(255, 99, 132)',
      tension: 0.1
    }
  ]
};

const options = {
  scales: {
    y: {
      beginAtZero: true
    }
  }
};

const LineChart = () => {
  return (
    <div>
      <h2>Line Chart</h2>
      <Line data={data} options={options} />
    </div>
  );
};

export default LineChart;

import { Pie } from 'react-chartjs-2';

const data = {
  labels: ['Red', 'Blue', 'Yellow'],
  datasets: [
    {
      label: '# of Votes',
      data: [12, 19, 3],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)'
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)'
      ],
      borderWidth: 1
    }
  ]
};

const options = {
  scales: {
    y: {
      beginAtZero: true
    }
  }
};

const PieChart = () => {
  return (
    <div>
      <h2>Pie Chart</h2>
      <Pie data={data} options={options} />
    </div>
  );
};

export default PieChart;

Conclusion

React-chartjs-2 is a powerful and flexible library for creating charts in your React applications. It provides an easy-to-use interface and supports a wide variety of chart types, making it a great choice for data visualization. With its rich documentation and active community, it is a great addition to any React developer's toolkit.