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.
npm install rechartsVerified import paths — ran on the pinned version, not inferred.
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.
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.
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.
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.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.
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.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.
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.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>`).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} />`.