Animations

Add smooth animations to your charts

Animations make your charts more engaging and help users track changes. Recharts provides built-in animation support for all chart types.

Default animations

All Recharts components animate by default when they first render:

import { LineChart, Line, XAxis, YAxis } from 'recharts';

function AnimatedChart() {
  return (
    <LineChart width={600} height={300} data={data}>
      <XAxis dataKey="month" />
      <YAxis />
      {/* This line will animate on mount */}
      <Line type="monotone" dataKey="value" stroke="#8884d8" />
    </LineChart>
  );
}

Animation props

Control animation behavior on Line, Area, Bar, and other graphical components.

Enable/disable animations

{/* Enable animation (default) */}
<Line dataKey="value" isAnimationActive={true} />

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

{/* Auto mode - respects prefers-reduced-motion */}
<Line dataKey="value" isAnimationActive="auto" />

Setting isAnimationActive="auto" disables animations in SSR and respects the user’s prefers-reduced-motion system preference for accessibility.

Animation duration

Control how long animations take (in milliseconds):

{/* Default: 400ms */}
<Line dataKey="value" animationDuration={400} />

{/* Fast animation */}
<Line dataKey="value" animationDuration={200} />

{/* Slow animation */}
<Line dataKey="value" animationDuration={1000} />

Animation easing

Choose the easing function for smooth transitions:

{/* Default: ease */}
<Line animationEasing="ease" />

{/* Common easing functions */}
<Line animationEasing="ease-in" />
<Line animationEasing="ease-out" />
<Line animationEasing="ease-in-out" />
<Line animationEasing="linear" />

Animation delay

Delay the start of the animation:

{/* Start immediately (default) */}
<Line animationBegin={0} />

{/* Wait 500ms before animating */}
<Line animationBegin={500} />

Staggered animations

Create sequential animations by delaying each series:

function StaggeredChart() {
  return (
    <LineChart width={600} height={300} data={data}>
      <XAxis dataKey="month" />
      <YAxis />
      <Line
        dataKey="revenue"
        stroke="#8884d8"
        animationBegin={0}
        animationDuration={400}
      />
      <Line
        dataKey="profit"
        stroke="#82ca9d"
        animationBegin={400}
        animationDuration={400}
      />
      <Line
        dataKey="cost"
        stroke="#ffc658"
        animationBegin={800}
        animationDuration={400}
      />
    </LineChart>
  );
}

Animation on data updates

By default, Recharts animates when data changes:

function DynamicChart() {
  const [data, setData] = useState(initialData);

  const updateData = () => {
    setData(newData); // Chart will animate to new values
  };

  return (
    <>
      <button onClick={updateData}>Update Data</button>
      <LineChart width={600} height={300} data={data}>
        <XAxis dataKey="month" />
        <YAxis />
        <Line
          type="monotone"
          dataKey="value"
          stroke="#8884d8"
          animationDuration={500}
        />
      </LineChart>
    </>
  );
}

Animate new values

Control whether new data points animate:

<Line
  dataKey="value"
  animateNewValues={true}  {/* Animate when new points are added */}
/>

Chart-specific animations

Line chart animations

Lines draw from left to right:

<Line
  type="monotone"
  dataKey="value"
  stroke="#8884d8"
  animationDuration={800}
  animationEasing="ease-out"
/>

Area chart animations

Areas fill from bottom to top:

import { AreaChart, Area } from 'recharts';

<AreaChart width={600} height={300} data={data}>
  <Area
    type="monotone"
    dataKey="value"
    fill="#8884d8"
    stroke="#8884d8"
    animationDuration={600}
  />
</AreaChart>

Bar chart animations

Bars grow from the baseline:

import { BarChart, Bar } from 'recharts';

<BarChart width={600} height={300} data={data}>
  <Bar
    dataKey="value"
    fill="#8884d8"
    animationDuration={500}
    animationEasing="ease-in-out"
  />
</BarChart>

Tooltip animations

Control tooltip animation behavior:

{/* Animated tooltip (default) */}
<Tooltip
  isAnimationActive="auto"
  animationDuration={400}
  animationEasing="ease"
/>

{/* Instant tooltip */}
<Tooltip isAnimationActive={false} />

Performance considerations

Disable animations for large datasets

For charts with many data points, animations can impact performance:

function LargeDataChart({ data }) {
  const shouldAnimate = data.length < 100;

  return (
    <LineChart width={600} height={300} data={data}>
      <Line
        dataKey="value"
        isAnimationActive={shouldAnimate}
      />
    </LineChart>
  );
}

Reduce animation duration

Shorter animations feel snappier and reduce rendering time:

<Line
  dataKey="value"
  animationDuration={200}  {/* Instead of 400ms */}
/>

Accessibility

Respect user preferences

Always respect the prefers-reduced-motion setting:

{/* Automatically respects user preferences */}
<Line dataKey="value" isAnimationActive="auto" />

Provide instant alternatives

For critical data visualization, consider offering a “skip animation” option:

function AccessibleChart() {
  const [animate, setAnimate] = useState(true);

  return (
    <>
      <button onClick={() => setAnimate(!animate)}>
        {animate ? 'Disable' : 'Enable'} Animations
      </button>
      <LineChart width={600} height={300} data={data}>
        <Line
          dataKey="value"
          isAnimationActive={animate}
        />
      </LineChart>
    </>
  );
}

Advanced patterns

Coordinated multi-series animations

Animate multiple series together:

const DURATION = 600;
const EASING = "ease-out";

<LineChart width={600} height={300} data={data}>
  <Line
    dataKey="revenue"
    animationDuration={DURATION}
    animationEasing={EASING}
  />
  <Line
    dataKey="profit"
    animationDuration={DURATION}
    animationEasing={EASING}
  />
</LineChart>

Custom easing curves

Use CSS easing functions:

<Line
  dataKey="value"
  animationEasing="cubic-bezier(0.4, 0.0, 0.2, 1)"
/>

Common cubic-bezier curves:

• Material Design standard: cubic-bezier(0.4, 0.0, 0.2, 1)
• Ease-in-out (smooth): cubic-bezier(0.42, 0, 0.58, 1)
• Bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55)

Animation on hover

Animate dots when hovering:

<Line
  dataKey="value"
  stroke="#8884d8"
  dot={{ r: 4 }}
  activeDot={{
    r: 8,
    // Active dot appears instantly on hover
  }}
/>

Best practices

Keep animations subtle

Animations should enhance, not distract. Stick to 200-600ms for most charts.

Test with real data

Animations that work well with 10 data points may perform poorly with 1000. Always test with production-sized datasets.

SSR compatibility

Set isAnimationActive="auto" to prevent animation issues during server-side rendering.

Animation timing reference

Component	Default Duration	Default Easing
Line	400ms	ease
Area	400ms	ease
Bar	400ms	ease
Tooltip	400ms	ease

Common patterns

Instant updates for live data

function LiveChart({ liveData }) {
  return (
    <LineChart data={liveData}>
      <Line
        dataKey="value"
        isAnimationActive={false}  {/* No animation for live data */}
      />
    </LineChart>
  );
}

Smooth transitions for dashboards

function DashboardChart({ data }) {
  return (
    <BarChart data={data}>
      <Bar
        dataKey="value"
        animationDuration={300}
        animationEasing="ease-out"
      />
    </BarChart>
  );
}