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

# Cell

> Define colors and styles of individual chart elements (deprecated)

<Warning>
  The Cell component is deprecated and will be removed in Recharts 4.0.

  Please use the `shape` prop or `content` prop on the respective chart components to customize the rendering of chart elements instead of using Cell.

  See the [migration guide](/guide/cell) for more information.
</Warning>

The Cell component was used to define colors and styles of individual chart elements in Recharts 2.x.

## Legacy usage

```tsx theme={null}
import { BarChart, Bar, Cell } from 'recharts';

const data = [
  { name: 'A', value: 100 },
  { name: 'B', value: 200 },
  { name: 'C', value: 300 },
];

const colors = ['#8884d8', '#82ca9d', '#ffc658'];

<BarChart width={500} height={300} data={data}>
  <Bar dataKey="value">
    {data.map((entry, index) => (
      <Cell key={`cell-${index}`} fill={colors[index]} />
    ))}
  </Bar>
</BarChart>
```

## Props

<ParamField path="fill" type="string">
  The fill color of the cell.
</ParamField>

<ParamField path="stroke" type="string">
  The stroke color of the cell.
</ParamField>

## Migration

Instead of using Cell, customize individual elements using the `shape` prop:

```tsx theme={null}
// Before (using Cell)
<Bar dataKey="value">
  {data.map((entry, index) => (
    <Cell key={`cell-${index}`} fill={colors[index]} />
  ))}
</Bar>

// After (using shape prop)
<Bar
  dataKey="value"
  shape={(props, index) => {
    return <Rectangle {...props} fill={colors[index]} />;
  }}
/>
```

For more details, see the [Cell migration guide](/guide/cell).