react-chartjs-2

react-chartjs-2 is a powerful React wrapper for Chart.js, a popular open-source JavaScript charting library. It allows developers to easily integrate various types of charts (like bar, line, pie, donut, bubble, radar, etc.) into their React applications with a declarative component-based approach.

Key Features:
* Component-based: Provides dedicated React components for each chart type (e.g., `<Bar>`, `<Line>`, `<Pie>`), making it straightforward to include charts in your JSX.
* Declarative Data and Options: Chart data and configuration options are passed as props to these components, aligning with React's declarative nature.
* Seamless Chart.js Integration: It leverages the full power and customization options of Chart.js, meaning anything you can do with Chart.js, you can do with react-chartjs-2.
* React Hooks Support: Integrates well with React hooks for managing state and effects related to chart data or options.
* Tree Shaking: Modern versions (v3 and above) are designed for better tree-shaking, requiring explicit registration of Chart.js components to keep bundle sizes small.

Why use react-chartjs-2?
* Simplicity: Simplifies the process of rendering complex charts in React by abstracting away direct DOM manipulation typically required by plain Chart.js.
* React Paradigm: Fits perfectly into the React ecosystem, allowing developers to manage chart state and updates using React's mechanisms.
* Rich Ecosystem: Benefits from the vast range of chart types, customization options, and community support available for Chart.js.

Installation:
To use react-chartjs-2, you need to install both `react-chartjs-2` and `chart.js`:
`npm install react-chartjs-2 chart.js`
or
`yarn add react-chartjs-2 chart.js`

Basic Usage:
1. Import the specific chart component (e.g., `Bar`, `Line`) from `react-chartjs-2`.
2. Import and register the necessary Chart.js components (scales, elements, plugins) to ensure tree-shaking works correctly.
3. Define your chart `data` (labels, datasets) and `options` (titles, tooltips, legends, scales configuration) as JavaScript objects.
4. Render the chart component in your JSX, passing the `data` and `options` as props.

Important Note for Chart.js v3+:
Chart.js v3 and later versions use a modular approach. To reduce bundle size, you must explicitly register the components you use (like scales, elements, plugins). `react-chartjs-2` automatically re-exports all Chart.js v3 components, making them easy to import and register. Failing to register required components will result in charts not rendering correctly or throwing errors.

import React from 'react';
import { Bar } from 'react-chartjs-2';
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js';

// Register Chart.js components for tree-shaking
ChartJS.register(
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend
);

const BarChartExample = () => {
  // Chart Data
  const data = {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [
      {
        label: 'Monthly Sales',
        data: [65, 59, 80, 81, 56, 55, 40],
        backgroundColor: 'rgba(75, 192, 192, 0.6)',
        borderColor: 'rgba(75, 192, 192, 1)',
        borderWidth: 1,
      },
      {
        label: 'Monthly Expenses',
        data: [28, 48, 40, 19, 86, 27, 90],
        backgroundColor: 'rgba(255, 99, 132, 0.6)',
        borderColor: 'rgba(255, 99, 132, 1)',
        borderWidth: 1,
      },
    ],
  };

  // Chart Options
  const options = {
    responsive: true,
    plugins: {
      title: {
        display: true,
        text: 'Monthly Performance Bar Chart',
        font: {
          size: 18
        }
      },
      legend: {
        position: 'top',
      },
      tooltip: {
        mode: 'index',
        intersect: false,
      },
    },
    scales: {
      x: {
        grid: {
          display: false,
        },
        title: {
          display: true,
          text: 'Month',
        },
      },
      y: {
        beginAtZero: true,
        title: {
          display: true,
          text: 'Value',
        },
      },
    },
  };

  return (
    <div style={{ width: '70%', margin: 'auto', padding: '20px' }}>
      <h2>React Chart.js 2 - Bar Chart Example</h2>
      <Bar data={data} options={options} />
    </div>
  );
};

export default BarChartExample;