{"id":11659,"library":"react-chartjs-2","title":"React Chart.js 2","description":"react-chartjs-2 provides React components that wrap the popular Chart.js library, enabling declarative data visualization within React applications. It supports Chart.js v4 and v3 (though v4 is recommended) and React versions 16.8.0 through 19.0.0. The current stable version is 5.3.1. Releases appear to be driven by Chart.js and React compatibility updates, with minor versions released every few months, and patch fixes as needed. Its key differentiator is providing a native React component API for Chart.js, abstracting away direct Chart.js instance management, and offering a robust integration with the React component lifecycle for dynamic chart updates.","status":"active","version":"5.3.1","language":"javascript","source_language":"en","source_url":"https://github.com/reactchartjs/react-chartjs-2","tags":["javascript","chart","chart-js","chart.js","react-chartjs-2","react chart.js","react-chart.js","typescript"],"install":[{"cmd":"npm install react-chartjs-2","lang":"bash","label":"npm"},{"cmd":"yarn add react-chartjs-2","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-chartjs-2","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core charting library that react-chartjs-2 wraps. Required for all chart functionality.","package":"chart.js","optional":false},{"reason":"Frontend library for building user interfaces. Required as react-chartjs-2 components are React components.","package":"react","optional":false}],"imports":[{"note":"Primary way to import individual chart components for ESM. While CommonJS was restored in v5.1.0, ESM is the recommended and modern approach.","wrong":"const Line = require('react-chartjs-2').Line;","symbol":"Line","correct":"import { Line } from 'react-chartjs-2';"},{"note":"When using `react-chartjs-2`, you often need to register elements from Chart.js itself. This is typically imported directly from 'chart.js', not 'react-chartjs-2'.","symbol":"Chart as ChartJS","correct":"import { Chart as ChartJS } from 'chart.js';"},{"note":"Chart.js v3+ introduced tree-shakable components. You must explicitly import and register the scales, elements, and plugins you intend to use. This is a common point of confusion.","symbol":"CategoryScale","correct":"import { CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend } from 'chart.js';"}],"quickstart":{"code":"import React from 'react';\nimport { Line } from 'react-chartjs-2';\nimport { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend } from 'chart.js';\n\nChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);\n\nexport const MyLineChart = () => {\n  const data = {\n    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],\n    datasets: [\n      {\n        label: 'My First dataset',\n        fill: false,\n        lineTension: 0.1,\n        backgroundColor: 'rgba(75,192,192,0.4)',\n        borderColor: 'rgba(75,192,192,1)',\n        borderCapStyle: 'butt',\n        borderDash: [],\n        borderDashOffset: 0.0,\n        borderJoinStyle: 'miter',\n        pointBorderColor: 'rgba(75,192,192,1)',\n        pointBackgroundColor: '#fff',\n        pointBorderWidth: 1,\n        pointHoverRadius: 5,\n        pointHoverBackgroundColor: 'rgba(75,192,192,1)',\n        pointHoverBorderColor: 'rgba(220,220,220,1)',\n        pointHoverBorderWidth: 2,\n        pointRadius: 1,\n        pointHitRadius: 10,\n        data: [65, 59, 80, 81, 56, 55, 40]\n      }\n    ]\n  };\n\n  const options = {\n    responsive: true,\n    plugins: {\n      legend: {\n        position: 'top'\n      },\n      title: {\n        display: true,\n        text: 'Chart.js Line Chart'\n      }\n    }\n  };\n\n  return <Line data={data} options={options} />;\n};","lang":"typescript","description":"This quickstart demonstrates how to create a basic line chart using `react-chartjs-2`, including the necessary Chart.js component registrations for tree-shaking."},"warnings":[{"fix":"Upgrade to v5.1.0 or later which restored CommonJS support, or migrate your project to use ESM imports if possible. For versions 5.0.0, ensure your bundler (e.g., Webpack, Rollup) is configured to handle ESM, and use `import` statements only.","message":"Version 5.0.0 of `react-chartjs-2` dropped CommonJS support entirely and became an ESM-only package.","severity":"breaking","affected_versions":"5.0.0"},{"fix":"Ensure you are using `chart.js@^4.0.0` or higher with `react-chartjs-2@^5.0.0`. If you need Chart.js v3, you should use `react-chartjs-2` v4.x.","message":"Version 5.0.0 introduced support for Chart.js v4. This meant dropping support for Chart.js v3 as a direct peer dependency, though the README states it supports both.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Always import and call `ChartJS.register(...)` for all necessary components (e.g., `CategoryScale`, `LinearScale`, `PointElement`, `LineElement`, `Title`, `Tooltip`, `Legend`) from `chart.js` before rendering any chart components.","message":"Chart.js v3+ introduced a tree-shaking friendly architecture where scales, elements, and plugins must be explicitly imported and registered with Chart.js.","severity":"gotcha","affected_versions":">=4.0.0"},{"fix":"Always install `chart.js` alongside `react-chartjs-2` and ensure their versions satisfy the peer dependency requirements specified in `react-chartjs-2`'s `package.json` (e.g., `chart.js: ^4.1.1` for `react-chartjs-2@5.x`).","message":"`react-chartjs-2` relies heavily on its peer dependency `chart.js`. Mismatched versions between `react-chartjs-2` and `chart.js` are a frequent source of errors.","severity":"gotcha","affected_versions":"all"},{"fix":"Ensure that `data` and `options` props are new objects (or deeply immutable updates) when changes occur, so React detects prop changes and `react-chartjs-2` can re-render or update the Chart.js instance. Using `useMemo` or `useState` to manage these objects effectively is common.","message":"When dynamically updating chart options or data, it's crucial to ensure React's reconciliation process properly triggers Chart.js updates. Simply mutating objects passed as props might not work as expected.","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Add `import { Chart as ChartJS, ... } from 'chart.js'; ChartJS.register(...);` at the top level of your application or component where charts are used.","cause":"Chart.js components (scales, elements, plugins) were not explicitly registered.","error":"TypeError: Cannot read properties of undefined (reading 'register')"},{"fix":"Ensure you import and register the corresponding controller from `chart.js`, for example `LineController` for the `Line` chart component: `ChartJS.register(LineController, ...);`.","cause":"The specific chart type component (e.g., LineController) was not registered with Chart.js.","error":"Error: \"Line\" is not a registered chart type."},{"fix":"For `react-chartjs-2@5.0.0`, convert `require()` to `import`. For any version, ensure `react-chartjs-2` and `chart.js` are correctly installed and that the import paths are correct. If using Webpack 4 with v5.x, ensure you're on at least v5.2.0 which restored compatibility.","cause":"CommonJS imports were used in a project configured for pure ESM when using `react-chartjs-2@5.0.0`, or vice-versa, or the package isn't installed.","error":"Module not found: Error: Can't resolve 'react-chartjs-2' in '...'"},{"fix":"Run `npm install chart.js` or `yarn add chart.js` and ensure the installed version satisfies the peer dependency range of your `react-chartjs-2` version.","cause":"The peer dependency `chart.js` is not installed or its version is incompatible.","error":"Unhandled Rejection (Error): Chart.js must be installed to use react-chartjs-2."}],"ecosystem":"npm"}