Customization

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

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>

All standard SVG properties work: stroke, fill, strokeWidth, opacity, strokeDasharray, etc.

Color customization

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:

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>

Linear gradient
Radial gradient
Pattern

<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)" />

<defs>
  <radialGradient id="radial">
    <stop offset="0%" stopColor="#8884d8" stopOpacity={1} />
    <stop offset="100%" stopColor="#8884d8" stopOpacity={0} />
  </radialGradient>
</defs>
<Pie fill="url(#radial)" />

<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)" />

Custom shapes

Replace default shapes with custom renderers.

Custom dots

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>

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

Custom bars

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

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

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

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:

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>

Custom tooltip components receive active (boolean), payload (array of data), and label (axis label) props.

Custom legends

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:

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

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:

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>

Easing functions
Staggered animation
Disable animation

Available easing options:

ease (default)
ease-in
ease-out
ease-in-out
linear

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

<Line dataKey="value" isAnimationActive={false} />

Active states

Customize hover and active states:

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

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:

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:

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>

The accessibilityLayer prop enables keyboard navigation and screen reader support. Individual data points become focusable and announce their values.

Get Started

Core Concepts

Guides

Examples

Styling with props

Basic styling

Color customization

Gradients and patterns

Custom shapes

Custom dots

Custom bars

Custom pie sectors

Custom labels

Axis labels

Data labels

Custom tooltips

Custom legends

Conditional styling

Data-driven colors

Animation customization

Active states

Custom active shape

Theme integration

Accessibility

​Styling with props

​Basic styling

​Color customization

​Gradients and patterns

​Custom shapes

​Custom dots

​Custom bars

​Custom pie sectors

​Custom labels

​Axis labels

​Data labels

​Custom tooltips

​Custom legends

​Conditional styling

​Data-driven colors

​Animation customization

​Active states

​Custom active shape

​Theme integration

​Accessibility

Styling with props

Basic styling

Color customization

Gradients and patterns

Custom shapes

Custom dots

Custom bars

Custom pie sectors

Custom labels

Axis labels

Data labels

Custom tooltips

Custom legends

Conditional styling

Data-driven colors

Animation customization

Active states

Custom active shape

Theme integration

Accessibility