> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/recharts/recharts/llms.txt
> Use this file to discover all available pages before exploring further.

# Customized

> Render custom elements in charts (deprecated)

<Warning>
  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.
</Warning>

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

## Legacy usage

```tsx theme={null}
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

<ParamField path="component" type="ReactElement | FunctionComponent" required>
  The custom component to render.

  Can be a React element or function component.
</ParamField>

## Migration

Simply render your components directly:

```tsx theme={null}
// 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.