{"id":11915,"library":"recharts","title":"Recharts","description":"Recharts is a declarative charting library for React applications, built with React and D3, providing native SVG support and minimal external dependencies. Currently stable at version 3.8.1, the library receives regular minor updates, introducing new features, hooks, and crucial bug fixes, as evidenced by its consistent 3.x release cadence. Its core principles emphasize simple deployment through React components, a lightweight footprint leveraging native SVG, and a declarative API where each chart element functions as an independent React component. Key differentiators include robust TypeScript support (significantly enhanced with generics in v3.8.0 for data validation), a highly compositional approach for constructing complex visualizations, and ongoing performance optimizations. It relies on specific peer dependencies for React, ReactDOM, and React-is to ensure proper functioning within the React ecosystem.","status":"active","version":"3.8.1","language":"javascript","source_language":"en","source_url":"https://github.com/recharts/recharts","tags":["javascript","react","reactjs","chart","react-component","typescript"],"install":[{"cmd":"npm install recharts","lang":"bash","label":"npm"},{"cmd":"yarn add recharts","lang":"bash","label":"yarn"},{"cmd":"pnpm add recharts","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core React library for UI component rendering.","package":"react","optional":false},{"reason":"DOM-specific rendering library for React applications.","package":"react-dom","optional":false},{"reason":"Utility for introspection into React elements, required by Recharts' internal component type checking.","package":"react-is","optional":false}],"imports":[{"note":"Recharts primarily uses named exports. Prefer destructuring for multiple components. CommonJS `require` is generally not suitable for modern React projects.","wrong":"const LineChart = require('recharts').LineChart;","symbol":"LineChart","correct":"import { LineChart, XAxis, Tooltip, CartesianGrid, Line } from 'recharts';"},{"note":"There is no default export; all chart components and sub-components are provided as named exports.","wrong":"import Recharts from 'recharts'; // Recharts.BarChart will not work as there is no default export.","symbol":"BarChart","correct":"import { BarChart, Bar } from 'recharts';"},{"note":"Direct deep imports are discouraged as they are prone to breakage across versions. Use top-level named exports. Since v3.3.0, many charts accept a `responsive` prop as an alternative to wrapping with `ResponsiveContainer`.","wrong":"import { ResponsiveContainer } from 'recharts/lib/component/ResponsiveContainer';","symbol":"ResponsiveContainer","correct":"import { ResponsiveContainer } from 'recharts';"}],"quickstart":{"code":"import React from 'react';\nimport { LineChart, XAxis, YAxis, Tooltip, CartesianGrid, Line, Legend, ResponsiveContainer } from 'recharts';\n\ninterface ChartData {\n  name: string;\n  uv: number;\n  pv: number;\n  amt: number;\n}\n\nconst data: ChartData[] = [\n  { name: 'Page A', uv: 4000, pv: 2400, amt: 2400 },\n  { name: 'Page B', uv: 3000, pv: 1398, amt: 2210 },\n  { name: 'Page C', uv: 2000, pv: 9800, amt: 2290 },\n  { name: 'Page D', uv: 2780, pv: 3908, amt: 2000 },\n  { name: 'Page E', uv: 1890, pv: 4800, amt: 2181 },\n  { name: 'Page F', uv: 2390, pv: 3800, amt: 2500 },\n  { name: 'Page G', uv: 3490, pv: 4300, amt: 2100 }\n];\n\nfunction MyLineChart() {\n  return (\n    <div style={{ width: '100%', height: 300 }}>\n      <h3>Line Chart with 'responsive' prop (v3.3.0+):</h3>\n      <LineChart<ChartData> width={500} height={300} data={data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }} responsive>\n        <CartesianGrid strokeDasharray=\"3 3\" />\n        <XAxis dataKey=\"name\" />\n        <YAxis />\n        <Tooltip />\n        <Legend />\n        <Line type=\"monotone\" dataKey=\"pv\" stroke=\"#8884d8\" activeDot={{ r: 8 }} />\n        <Line type=\"monotone\" dataKey=\"uv\" stroke=\"#82ca9d\" />\n      </LineChart>\n\n      <h3>Line Chart with ResponsiveContainer:</h3>\n      <ResponsiveContainer width=\"100%\" height=\"100%\">\n        <LineChart<ChartData> data={data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>\n          <CartesianGrid strokeDasharray=\"3 3\" />\n          <XAxis dataKey=\"name\" />\n          <YAxis />\n          <Tooltip />\n          <Legend />\n          <Line type=\"monotone\" dataKey=\"pv\" stroke=\"#8884d8\" activeDot={{ r: 8 }} />\n          <Line type=\"monotone\" dataKey=\"uv\" stroke=\"#82ca9d\" />\n        </LineChart>\n      </ResponsiveContainer>\n    </div>\n  );\n}\n\nexport default MyLineChart;","lang":"typescript","description":"Demonstrates a basic line chart with multiple lines, axes, tooltips, and legends, showing both the newer `responsive` prop (v3.3.0+) and the `ResponsiveContainer` component for adaptable sizing, alongside TypeScript integration."},"warnings":[{"fix":"Migrate all `Cell` usage to the `shape` prop of respective chart elements (e.g., `Bar`, `Pie`, `Area`) for custom rendering. The `shape` prop provides a callback that receives relevant data and allows for dynamic SVG rendering.","message":"The `Cell` component is deprecated in `v3.7.0` and will be removed in the next major version. Continued usage will result in console warnings and eventual breakage in future releases.","severity":"breaking","affected_versions":">=3.7.0"},{"fix":"Use the `shape` prop on the `Pie` component, which receives an `isActive` boolean from its callback to conditionally render active or inactive sector shapes, aligning with other chart elements' customization patterns.","message":"The `Pie` chart's `activeShape` and `inactiveShape` props were deprecated in `v3.5.0` in favor of a unified `shape` prop.","severity":"deprecated","affected_versions":">=3.5.0"},{"fix":"For new chart implementations or when refactoring, prefer adding the `responsive` prop directly to the chart component (e.g., `<BarChart responsive height={300} width='100%'>`). Existing `<ResponsiveContainer>` wrappers will continue to function correctly.","message":"Since `v3.3.0`, Recharts introduced a `responsive` prop that can be applied directly to most chart components, integrating the functionality of `ResponsiveContainer`. While `ResponsiveContainer` still works and will throughout the 3.x lifecycle, the prop offers simpler markup.","severity":"gotcha","affected_versions":">=3.3.0"},{"fix":"Ensure `react-is` is installed (`npm install recharts react-is` or `yarn add recharts react-is`) and that its version is compatible with your `react` package's version.","message":"The `react-is` package is a mandatory peer dependency for Recharts. Its absence or a version mismatch with your installed `react` package can lead to cryptic rendering errors or unexpected behavior.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"To fully leverage TypeScript, apply generics to your chart components and their data props, e.g., `<LineChart<MyDataType> data={myData}><Line dataKey='value'/></LineChart>`. Refer to the official Recharts TypeScript guide for detailed usage patterns.","message":"TypeScript support for `data` and `dataKey` props was significantly enhanced in `v3.8.0` with the introduction of generics, allowing for robust type validation of chart data schemas.","severity":"gotcha","affected_versions":">=3.8.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Install `react-is` (`npm install react-is` or `yarn add react-is`) and verify that its version is aligned with your `react` version, often by reinstalling both if issues persist.","cause":"The `react-is` peer dependency is either missing or its version is incompatible with the installed `react` package.","error":"Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined."},{"fix":"Replace usages of the `Cell` component with the `shape` prop on the relevant parent chart element (e.g., `<Bar shape={<CustomBarShape />} />`) to provide custom rendering logic.","cause":"Attempting to import or use the `Cell` component in a TypeScript project or a modern React setup after its deprecation in `v3.7.0`.","error":"Property 'Cell' does not exist on type 'typeof import(\"recharts\")'."},{"fix":"Ensure your chart components either have fixed `width` and `height` props, are wrapped within a `<ResponsiveContainer width='100%' height={300}>...</ResponsiveContainer>`, or utilize the `responsive` prop directly on the chart component (e.g., `<LineChart responsive width='100%' height={300}>...</LineChart>`).","cause":"A chart component is rendered without explicit `width` and `height` props or is not wrapped in `ResponsiveContainer` (or using the `responsive` prop since v3.3.0) in an environment where its parent does not define dimensions.","error":"TypeError: Cannot read properties of undefined (reading 'width') / Cannot read properties of undefined (reading 'height')"},{"fix":"Ensure the `dataKey` string matches a property name on your `MyDataType` interface. If `dataKey` refers to a nested property, you might need to provide it as a function: `<Line dataKey={(d: MyDataType) => d.nested.value} />`.","cause":"When using TypeScript generics with `v3.8.0+`, a `dataKey` prop is provided as a string literal that doesn't match a valid key of the explicitly typed data object.","error":"Type 'string' is not assignable to type 'keyof MyDataType'."}],"ecosystem":"npm"}