Recharts

Common errors

• Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

  cause The `react-is` peer dependency is either missing or its version is incompatible with the installed `react` package.
  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.

• Property 'Cell' does not exist on type 'typeof import("recharts")'.

  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`.
  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.

• TypeError: Cannot read properties of undefined (reading 'width') / Cannot read properties of undefined (reading 'height')

  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.
  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>`).

• Type 'string' is not assignable to type 'keyof MyDataType'.

  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.
  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} />`.

Warnings

• breaking 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.
  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.
• deprecated The `Pie` chart's `activeShape` and `inactiveShape` props were deprecated in `v3.5.0` in favor of a unified `shape` prop.
  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.
• gotcha 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.
  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.
• gotcha 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.
  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.
• gotcha 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.
  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.

Install

• npm install recharts npm
• yarn add recharts yarn
• pnpm add recharts pnpm

Imports

• LineChart
  wrong:

  const LineChart = require('recharts').LineChart;

  correct:

  import { LineChart, XAxis, Tooltip, CartesianGrid, Line } from 'recharts';

  Recharts primarily uses named exports. Prefer destructuring for multiple components. CommonJS `require` is generally not suitable for modern React projects.
• BarChart
  wrong:

  import Recharts from 'recharts'; // Recharts.BarChart will not work as there is no default export.

  correct:

  import { BarChart, Bar } from 'recharts';

  There is no default export; all chart components and sub-components are provided as named exports.
• ResponsiveContainer
  wrong:

  import { ResponsiveContainer } from 'recharts/lib/component/ResponsiveContainer';

  correct:

  import { ResponsiveContainer } from 'recharts';

  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`.

Quickstart

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.

import React from 'react';
import { LineChart, XAxis, YAxis, Tooltip, CartesianGrid, Line, Legend, ResponsiveContainer } from 'recharts';

interface ChartData {
  name: string;
  uv: number;
  pv: number;
  amt: number;
}

const data: ChartData[] = [
  { name: 'Page A', uv: 4000, pv: 2400, amt: 2400 },
  { name: 'Page B', uv: 3000, pv: 1398, amt: 2210 },
  { name: 'Page C', uv: 2000, pv: 9800, amt: 2290 },
  { name: 'Page D', uv: 2780, pv: 3908, amt: 2000 },
  { name: 'Page E', uv: 1890, pv: 4800, amt: 2181 },
  { name: 'Page F', uv: 2390, pv: 3800, amt: 2500 },
  { name: 'Page G', uv: 3490, pv: 4300, amt: 2100 }
];

function MyLineChart() {
  return (
    <div style={{ width: '100%', height: 300 }}>
      <h3>Line Chart with 'responsive' prop (v3.3.0+):</h3>
      <LineChart<ChartData> width={500} height={300} data={data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }} responsive>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip />
        <Legend />
        <Line type="monotone" dataKey="pv" stroke="#8884d8" activeDot={{ r: 8 }} />
        <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
      </LineChart>

      <h3>Line Chart with ResponsiveContainer:</h3>
      <ResponsiveContainer width="100%" height="100%">
        <LineChart<ChartData> data={data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="name" />
          <YAxis />
          <Tooltip />
          <Legend />
          <Line type="monotone" dataKey="pv" stroke="#8884d8" activeDot={{ r: 8 }} />
          <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
}

export default MyLineChart;