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

# Customization

> Style and customize every aspect of your Recharts visualizations

Recharts provides extensive customization options through props, custom components, and styling. You can tailor every visual aspect to match your design requirements.

## Styling with props

Most Recharts components accept standard SVG presentation attributes.

### Basic styling

```tsx theme={null}
import { LineChart, Line, XAxis, YAxis, CartesianGrid } from 'recharts';

<LineChart width={600} height={300} data={data}>
  <CartesianGrid 
    stroke="#f5f5f5" 
    strokeDasharray="3 3" 
    strokeWidth={1}
  />
  <XAxis 
    stroke="#8884d8"
    tick={{ fill: '#8884d8', fontSize: 12 }}
    tickLine={{ stroke: '#8884d8' }}
  />
  <YAxis 
    stroke="#82ca9d"
    tick={{ fill: '#82ca9d', fontSize: 12 }}
  />
  <Line 
    dataKey="value" 
    stroke="#8884d8" 
    strokeWidth={3}
    fill="none"
  />
</LineChart>
```

<Info>
  All standard SVG properties work: `stroke`, `fill`, `strokeWidth`, `opacity`, `strokeDasharray`, etc.
</Info>

### Color customization

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

const COLORS = {
  primary: '#8884d8',
  secondary: '#82ca9d',
  accent: '#ffc658',
  danger: '#ff7c7c',
};

<BarChart width={600} height={300} data={data}>
  <XAxis stroke={COLORS.primary} />
  <YAxis stroke={COLORS.primary} />
  <Bar dataKey="success" fill={COLORS.secondary} />
  <Bar dataKey="failure" fill={COLORS.danger} />
</BarChart>
```

### Gradients and patterns

Use SVG gradients for sophisticated fills:

```tsx theme={null}
import { AreaChart, Area, XAxis, YAxis } from 'recharts';

<AreaChart width={600} height={300} data={data}>
  <defs>
    <linearGradient id="colorValue" x1="0" y1="0" x2="0" y2="1">
      <stop offset="5%" stopColor="#8884d8" stopOpacity={0.8}/>
      <stop offset="95%" stopColor="#8884d8" stopOpacity={0}/>
    </linearGradient>
  </defs>
  <XAxis dataKey="name" />
  <YAxis />
  <Area 
    type="monotone" 
    dataKey="value" 
    stroke="#8884d8" 
    fill="url(#colorValue)" 
  />
</AreaChart>
```

<Tabs>
  <Tab title="Linear gradient">
    ```tsx theme={null}
    <defs>
      <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stopColor="#8884d8" stopOpacity={0.8} />
        <stop offset="100%" stopColor="#8884d8" stopOpacity={0.1} />
      </linearGradient>
    </defs>
    <Area fill="url(#gradient)" />
    ```
  </Tab>

  <Tab title="Radial gradient">
    ```tsx theme={null}
    <defs>
      <radialGradient id="radial">
        <stop offset="0%" stopColor="#8884d8" stopOpacity={1} />
        <stop offset="100%" stopColor="#8884d8" stopOpacity={0} />
      </radialGradient>
    </defs>
    <Pie fill="url(#radial)" />
    ```
  </Tab>

  <Tab title="Pattern">
    ```tsx theme={null}
    <defs>
      <pattern id="stripe" patternUnits="userSpaceOnUse" width="8" height="8">
        <path d="M-1,1 l2,-2 M0,8 l8,-8 M7,9 l2,-2" stroke="#8884d8" />
      </pattern>
    </defs>
    <Bar fill="url(#stripe)" />
    ```
  </Tab>
</Tabs>

## Custom shapes

Replace default shapes with custom renderers.

### Custom dots

```tsx theme={null}
import { LineChart, Line } from 'recharts';

const CustomDot = (props) => {
  const { cx, cy, payload, value } = props;
  
  // Conditional rendering based on data
  if (value > 500) {
    return (
      <svg x={cx - 10} y={cy - 10} width={20} height={20} fill="red">
        <circle cx={10} cy={10} r={8} />
        <text x={10} y={13} textAnchor="middle" fill="white" fontSize={10}>
          !
        </text>
      </svg>
    );
  }
  
  return <circle cx={cx} cy={cy} r={4} fill="#8884d8" />;
};

<LineChart width={600} height={300} data={data}>
  <Line dataKey="value" stroke="#8884d8" dot={<CustomDot />} />
</LineChart>
```

<Note>
  Custom shape components receive props like `cx`, `cy`, `x`, `y`, `width`, `height`, `payload`, and `value` depending on the chart type.
</Note>

### Custom bars

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

const CustomBar = (props) => {
  const { x, y, width, height, fill } = props;
  
  return (
    <g>
      {/* Rounded top */}
      <rect x={x} y={y} width={width} height={height} fill={fill} rx={8} ry={8} />
      {/* Top highlight */}
      <rect x={x} y={y} width={width} height={5} fill="white" opacity={0.3} rx={8} />
    </g>
  );
};

<BarChart width={600} height={300} data={data}>
  <Bar dataKey="value" shape={<CustomBar />} fill="#8884d8" />
</BarChart>
```

### Custom pie sectors

```tsx theme={null}
import { PieChart, Pie, Cell } from 'recharts';

const CustomSector = (props) => {
  const {
    cx, cy, innerRadius, outerRadius, startAngle, endAngle, fill,
  } = props;
  
  return (
    <g>
      <Sector
        cx={cx}
        cy={cy}
        innerRadius={innerRadius}
        outerRadius={outerRadius + 10}  // Extend active sector
        startAngle={startAngle}
        endAngle={endAngle}
        fill={fill}
      />
    </g>
  );
};

<PieChart width={400} height={400}>
  <Pie 
    data={data} 
    dataKey="value"
    activeShape={<CustomSector />}
  />
</PieChart>
```

## Custom labels

### Axis labels

```tsx theme={null}
import { LineChart, Line, XAxis, YAxis } from 'recharts';

const CustomXAxisTick = (props) => {
  const { x, y, payload } = props;
  
  return (
    <g transform={`translate(${x},${y})`}>
      <text 
        x={0} 
        y={0} 
        dy={16} 
        textAnchor="middle" 
        fill="#666"
        fontSize={12}
      >
        {payload.value}
      </text>
    </g>
  );
};

const CustomYAxisTick = (props) => {
  const { x, y, payload } = props;
  
  return (
    <g transform={`translate(${x},${y})`}>
      <text 
        x={0} 
        y={0} 
        dx={-10} 
        dy={4}
        textAnchor="end" 
        fill="#666"
        fontSize={12}
      >
        ${payload.value.toLocaleString()}
      </text>
    </g>
  );
};

<LineChart width={600} height={300} data={data}>
  <XAxis dataKey="name" tick={<CustomXAxisTick />} />
  <YAxis tick={<CustomYAxisTick />} />
  <Line dataKey="value" stroke="#8884d8" />
</LineChart>
```

### Data labels

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

const CustomLabel = (props) => {
  const { x, y, width, height, value } = props;
  const radius = 10;
  
  return (
    <g>
      <circle cx={x + width / 2} cy={y - radius} r={radius} fill="#8884d8" />
      <text 
        x={x + width / 2} 
        y={y - radius} 
        fill="#fff" 
        textAnchor="middle" 
        dominantBaseline="middle"
        fontSize={10}
      >
        {value}
      </text>
    </g>
  );
};

<BarChart width={600} height={300} data={data}>
  <Bar dataKey="value" fill="#8884d8">
    <LabelList content={<CustomLabel />} />
  </Bar>
</BarChart>
```

## Custom tooltips

Create fully custom tooltip content:

```tsx theme={null}
import { LineChart, Line, Tooltip } from 'recharts';

const CustomTooltip = ({ active, payload, label }) => {
  if (!active || !payload || !payload.length) {
    return null;
  }
  
  return (
    <div style={{
      backgroundColor: 'white',
      border: '2px solid #8884d8',
      borderRadius: 8,
      padding: '12px',
      boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
    }}>
      <h4 style={{ margin: 0, marginBottom: 8, color: '#8884d8' }}>
        {label}
      </h4>
      {payload.map((entry, index) => (
        <div key={index} style={{ color: entry.color, marginBottom: 4 }}>
          <strong>{entry.name}:</strong> {entry.value.toLocaleString()}
          {entry.unit && ` ${entry.unit}`}
        </div>
      ))}
    </div>
  );
};

<LineChart width={600} height={300} data={data}>
  <Line dataKey="revenue" stroke="#8884d8" />
  <Line dataKey="expenses" stroke="#82ca9d" />
  <Tooltip content={<CustomTooltip />} />
</LineChart>
```

<Info>
  Custom tooltip components receive `active` (boolean), `payload` (array of data), and `label` (axis label) props.
</Info>

## Custom legends

```tsx theme={null}
import { LineChart, Line, Legend } from 'recharts';

const CustomLegend = (props) => {
  const { payload } = props;
  
  return (
    <div style={{ display: 'flex', justifyContent: 'center', gap: 20, padding: 10 }}>
      {payload.map((entry, index) => (
        <div key={index} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <div style={{
            width: 16,
            height: 16,
            backgroundColor: entry.color,
            borderRadius: '50%',
          }} />
          <span style={{ color: '#666', fontSize: 14 }}>
            {entry.value}
          </span>
        </div>
      ))}
    </div>
  );
};

<LineChart width={600} height={300} data={data}>
  <Line name="Revenue" dataKey="revenue" stroke="#8884d8" />
  <Line name="Expenses" dataKey="expenses" stroke="#82ca9d" />
  <Legend content={<CustomLegend />} />
</LineChart>
```

## Conditional styling

Apply different styles based on data values:

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

const data = [
  { name: 'A', value: 100, target: 120 },
  { name: 'B', value: 200, target: 180 },
  { name: 'C', value: 150, target: 160 },
];

<BarChart width={600} height={300} data={data}>
  <Bar dataKey="value">
    {data.map((entry, index) => (
      <Cell 
        key={`cell-${index}`}
        fill={entry.value >= entry.target ? '#82ca9d' : '#ff7c7c'}
      />
    ))}
  </Bar>
</BarChart>
```

### Data-driven colors

```tsx theme={null}
import { ScatterChart, Scatter } from 'recharts';

const getColor = (value) => {
  if (value > 80) return '#82ca9d';  // Green
  if (value > 50) return '#ffc658';  // Yellow
  return '#ff7c7c';                   // Red
};

const CustomScatterShape = (props) => {
  const { cx, cy, payload } = props;
  const color = getColor(payload.score);
  
  return (
    <circle 
      cx={cx} 
      cy={cy} 
      r={payload.size} 
      fill={color}
      opacity={0.7}
    />
  );
};

<ScatterChart width={600} height={300}>
  <Scatter data={data} shape={<CustomScatterShape />} />
</ScatterChart>
```

## Animation customization

Control animation behavior:

```tsx theme={null}
import { LineChart, Line } from 'recharts';

<LineChart width={600} height={300} data={data}>
  <Line 
    dataKey="value" 
    stroke="#8884d8"
    isAnimationActive={true}
    animationBegin={0}
    animationDuration={1500}
    animationEasing="ease-in-out"
  />
</LineChart>
```

<Tabs>
  <Tab title="Easing functions">
    Available easing options:

    * `ease` (default)
    * `ease-in`
    * `ease-out`
    * `ease-in-out`
    * `linear`
  </Tab>

  <Tab title="Staggered animation">
    ```tsx theme={null}
    <BarChart data={data}>
      <Bar dataKey="a" animationBegin={0} animationDuration={1000} />
      <Bar dataKey="b" animationBegin={500} animationDuration={1000} />
      <Bar dataKey="c" animationBegin={1000} animationDuration={1000} />
    </BarChart>
    ```
  </Tab>

  <Tab title="Disable animation">
    ```tsx theme={null}
    <Line dataKey="value" isAnimationActive={false} />
    ```
  </Tab>
</Tabs>

## Active states

Customize hover and active states:

```tsx theme={null}
import { LineChart, Line } from 'recharts';

<LineChart width={600} height={300} data={data}>
  <Line 
    dataKey="value" 
    stroke="#8884d8"
    strokeWidth={2}
    dot={{ fill: '#8884d8', r: 4 }}
    activeDot={{ 
      r: 8, 
      fill: '#fff',
      stroke: '#8884d8',
      strokeWidth: 3,
    }}
  />
</LineChart>
```

### Custom active shape

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

const ActiveBarShape = (props) => {
  const { x, y, width, height, fill } = props;
  
  return (
    <g>
      <rect 
        x={x - 2} 
        y={y - 2} 
        width={width + 4} 
        height={height + 4} 
        fill={fill}
        opacity={0.8}
        stroke="#fff"
        strokeWidth={2}
      />
    </g>
  );
};

<BarChart width={600} height={300} data={data}>
  <Bar 
    dataKey="value" 
    fill="#8884d8"
    activeBar={<ActiveBarShape />}
  />
</BarChart>
```

## Theme integration

Create reusable theme configurations:

```tsx theme={null}
const chartTheme = {
  colors: {
    primary: '#8884d8',
    secondary: '#82ca9d',
    tertiary: '#ffc658',
    grid: '#f5f5f5',
    text: '#666',
  },
  fonts: {
    size: 12,
    family: 'Inter, sans-serif',
  },
  spacing: {
    margin: { top: 20, right: 30, left: 20, bottom: 5 },
  },
};

function ThemedChart({ data }) {
  return (
    <LineChart 
      width={600} 
      height={300} 
      data={data}
      margin={chartTheme.spacing.margin}
    >
      <CartesianGrid stroke={chartTheme.colors.grid} />
      <XAxis 
        stroke={chartTheme.colors.text}
        tick={{ fill: chartTheme.colors.text, fontSize: chartTheme.fonts.size }}
      />
      <YAxis 
        stroke={chartTheme.colors.text}
        tick={{ fill: chartTheme.colors.text, fontSize: chartTheme.fonts.size }}
      />
      <Line dataKey="value" stroke={chartTheme.colors.primary} />
    </LineChart>
  );
}
```

## Accessibility

Add ARIA attributes and semantic markup:

```tsx theme={null}
import { LineChart, Line, XAxis, YAxis } from 'recharts';

<LineChart 
  width={600} 
  height={300} 
  data={data}
  accessibilityLayer
>
  <XAxis dataKey="name" />
  <YAxis />
  <Line 
    dataKey="value" 
    stroke="#8884d8"
    name="Revenue"
    aria-label="Revenue trend line"
  />
</LineChart>
```

<Note>
  The `accessibilityLayer` prop enables keyboard navigation and screen reader support. Individual data points become focusable and announce their values.
</Note>