Cell

Define colors and styles of individual chart elements (deprecated)

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 for more information.

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

Legacy usage

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

fill · string

The fill color of the cell.

stroke · string

The stroke color of the cell.

Migration

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

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