Customized

Render custom elements in charts (deprecated)

The Customized component is deprecated and will be removed in Recharts 4.0.

Starting from Recharts 3.x, all charts can render arbitrary elements anywhere. Just render your components directly without the Customized wrapper.

The Customized component was necessary to render custom elements in Recharts 2.x. It is no longer needed in Recharts 3.x.

Legacy usage

import { LineChart, Line, Customized } from 'recharts';

const CustomContent = () => {
  return <text x={250} y={150}>Custom Element</text>;
};

<LineChart width={500} height={300} data={data}>
  <Line dataKey="uv" />
  <Customized component={<CustomContent />} />
</LineChart>

Props

component · ReactElement | FunctionComponent · required

The custom component to render.

Can be a React element or function component.

Migration

Simply render your components directly:

// Before (Recharts 2.x)
<LineChart width={500} height={300} data={data}>
  <Line dataKey="uv" />
  <Customized component={<CustomContent />} />
</LineChart>

// After (Recharts 3.x)
<LineChart width={500} height={300} data={data}>
  <Line dataKey="uv" />
  <CustomContent />
</LineChart>

Your custom components now have direct access to the chart context and can be rendered anywhere in the chart tree.