react-chartjs-2

React components for Chart.js

weekly downloads2.8M

versionv5.3.1

licenseMIT

categorydata-viz

chartchart-jschart.jsreact-chartjs-2react chart.jsreact-chart.js

Overview

react-chartjs-2 is a React wrapper library that bridges Chart.js with React's component model. Instead of manipulating canvas elements directly with Chart.js's imperative API, developers can render charts declaratively using React components. This eliminates the need for manual DOM manipulation and lifecycle management that comes with integrating vanilla Chart.js into React applications.

The library exposes individual chart types as React components (Line, Bar, Pie, Doughnut, Radar, etc.) that accept data and configuration as props. Under the hood, it handles Chart.js instance creation, updates, and cleanup through React's lifecycle methods. This approach fits naturally into React's data flow patterns, allowing charts to update automatically when props change.

With nearly 3 million weekly downloads, react-chartjs-2 is widely adopted in production applications ranging from admin dashboards to analytics platforms. It's maintained as the official React wrapper for Chart.js, ensuring compatibility with Chart.js updates and leveraging the full ecosystem of Chart.js plugins. The library requires explicit registration of Chart.js components, following Chart.js v3+'s tree-shakable architecture to reduce bundle size.

Developers choose react-chartjs-2 when they need the power and flexibility of Chart.js within React applications without writing integration code. It's particularly suited for projects that require complex customization options, animation controls, or integration with existing Chart.js plugins that aren't available in pure React charting libraries.

Quick Start

typescript

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

ChartJS.register(
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend
);

function SalesChart() {
  const [chartData] = useState({
    labels: ['January', 'February', 'March', 'April', 'May', 'June'],
    datasets: [
      {
        label: 'Revenue 2024',
        data: [12500, 19800, 15300, 21000, 18200, 24500],
        backgroundColor: 'rgba(53, 162, 235, 0.5)',
        borderColor: 'rgb(53, 162, 235)',
        borderWidth: 1
      },
      {
        label: 'Revenue 2023',
        data: [10200, 15400, 13100, 17200, 16800, 20100],
        backgroundColor: 'rgba(255, 99, 132, 0.5)',
        borderColor: 'rgb(255, 99, 132)',
        borderWidth: 1
      }
    ]
  });

  const options = {
    responsive: true,
    plugins: {
      legend: {
        position: 'top' as const,
      },
      title: {
        display: true,
        text: 'Monthly Revenue Comparison'
      }
    },
    scales: {
      y: {
        beginAtZero: true,
        ticks: {
          callback: function(value: number) {
            return '$' + value.toLocaleString();
          }
        }
      }
    }
  };

  return <Bar data={chartData} options={options} />;
}

export default SalesChart;

Use Cases

Business dashboards and analytics interfaces: Display key performance indicators, sales trends, and user metrics in admin panels. The library's responsive design and extensive customization options make it ideal for building professional data visualization tools that update in real-time as users filter or query data.

Financial data visualization: Render stock price charts, portfolio performance graphs, and trading volume indicators. Chart.js's extensive line chart capabilities combined with React's state management enable building interactive financial applications with zooming, panning, and real-time data updates.

Survey and poll result displays: Present survey responses, voting results, and statistical data using pie, doughnut, and bar charts. The component-based approach simplifies rendering multiple charts with different datasets while maintaining consistent styling across an application.

IoT and monitoring dashboards: Track sensor data, system metrics, and network statistics over time. The ability to update chart data through React state makes it straightforward to integrate with WebSocket streams or polling mechanisms for live monitoring interfaces.

Educational and data science applications: Build interactive data exploration tools, statistical visualization platforms, and learning management systems. The declarative API reduces complexity for teams building data-heavy applications without deep charting library expertise.

Pros & Cons

Pros

+Leverages the full power of Chart.js with all its features, plugins, and extensive documentation while providing React-friendly API
+Tree-shakable architecture with explicit component registration significantly reduces bundle size compared to importing entire charting libraries
+Official Chart.js React wrapper with active maintenance ensures compatibility with Chart.js updates and ecosystem plugins
+Supports complex customization through Chart.js options object, enabling fine-grained control over animations, scales, tooltips, and interactions
+Large community and widespread adoption means abundant examples, tutorials, and Stack Overflow solutions for common problems

Cons

−Requires understanding both React and Chart.js APIs, creating a steeper learning curve than pure React charting libraries
−Manual registration of Chart.js components (scales, elements, controllers) is verbose and easy to get wrong, causing runtime errors
−TypeScript support can be challenging with complex Chart.js configurations due to Chart.js's intricate type definitions
−Not as declarative as pure React charting libraries - still requires working with imperative Chart.js options objects rather than React-native patterns
−Performance can degrade with large datasets since Chart.js uses canvas rendering without built-in virtualization or data aggregation

Alternatives

React charts

Data viz for React

data-vizdata visualizationReact

367K / week

Install

bash

npm install react-chartjs-2

bash

pnpm add react-chartjs-2

bash

bun add react-chartjs-2

Overview

Quick Start

typescript

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

ChartJS.register(
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend
);

function SalesChart() {
  const [chartData] = useState({
    labels: ['January', 'February', 'March', 'April', 'May', 'June'],
    datasets: [
      {
        label: 'Revenue 2024',
        data: [12500, 19800, 15300, 21000, 18200, 24500],
        backgroundColor: 'rgba(53, 162, 235, 0.5)',
        borderColor: 'rgb(53, 162, 235)',
        borderWidth: 1
      },
      {
        label: 'Revenue 2023',
        data: [10200, 15400, 13100, 17200, 16800, 20100],
        backgroundColor: 'rgba(255, 99, 132, 0.5)',
        borderColor: 'rgb(255, 99, 132)',
        borderWidth: 1
      }
    ]
  });

  const options = {
    responsive: true,
    plugins: {
      legend: {
        position: 'top' as const,
      },
      title: {
        display: true,
        text: 'Monthly Revenue Comparison'
      }
    },
    scales: {
      y: {
        beginAtZero: true,
        ticks: {
          callback: function(value: number) {
            return '$' + value.toLocaleString();
          }
        }
      }
    }
  };

  return <Bar data={chartData} options={options} />;
}

export default SalesChart;

Use Cases

Pros & Cons

Pros

+Leverages the full power of Chart.js with all its features, plugins, and extensive documentation while providing React-friendly API
+Tree-shakable architecture with explicit component registration significantly reduces bundle size compared to importing entire charting libraries
+Official Chart.js React wrapper with active maintenance ensures compatibility with Chart.js updates and ecosystem plugins
+Supports complex customization through Chart.js options object, enabling fine-grained control over animations, scales, tooltips, and interactions
+Large community and widespread adoption means abundant examples, tutorials, and Stack Overflow solutions for common problems

Cons

−Requires understanding both React and Chart.js APIs, creating a steeper learning curve than pure React charting libraries
−Manual registration of Chart.js components (scales, elements, controllers) is verbose and easy to get wrong, causing runtime errors
−TypeScript support can be challenging with complex Chart.js configurations due to Chart.js's intricate type definitions
−Not as declarative as pure React charting libraries - still requires working with imperative Chart.js options objects rather than React-native patterns
−Performance can degrade with large datasets since Chart.js uses canvas rendering without built-in virtualization or data aggregation