1---
2name: charts
3description: Chart and data visualization patterns for Remotion. Use when creating bar charts, pie charts, line charts, stock graphs, or any data-driven animations.
4metadata:
5  tags: charts, data, visualization, bar-chart, pie-chart, line-chart, stock-chart, svg-paths, graphs
6---
7 
8# Charts in Remotion
9 
10Create charts using React code - HTML, SVG, and D3.js are all supported.
11 
12Disable all animations from third party libraries - they cause flickering.  
13Drive all animations from `useCurrentFrame()`.
14 
15## Bar Chart
16 
17```tsx
18const STAGGER_DELAY = 5;
19const frame = useCurrentFrame();
20const { fps } = useVideoConfig();
21 
22const bars = data.map((item, i) => {
23  const height = spring({
24    frame,
25    fps,
26    delay: i * STAGGER_DELAY,
27    config: { damping: 200 },
28  });
29  return <div style={{ height: height * item.value }} />;
30});
31```
32 
33## Pie Chart
34 
35Animate segments using stroke-dashoffset, starting from 12 o'clock:
36 
37```tsx
38const progress = interpolate(frame, [0, 100], [0, 1]);
39const circumference = 2 * Math.PI * radius;
40const segmentLength = (value / total) * circumference;
41const offset = interpolate(progress, [0, 1], [segmentLength, 0]);
42 
43<circle
44  r={radius}
45  cx={center}
46  cy={center}
47  fill="none"
48  stroke={color}
49  strokeWidth={strokeWidth}
50  strokeDasharray={`${segmentLength} ${circumference}`}
51  strokeDashoffset={offset}
52  transform={`rotate(-90 ${center} ${center})`}
53/>;
54```
55 
56## Line Chart / Path Animation
57 
58Use `@remotion/paths` for animating SVG paths (line charts, stock graphs, signatures).
59 
60Install: `npx remotion add @remotion/paths`  
61Docs: https://remotion.dev/docs/paths.md
62 
63### Convert data points to SVG path
64 
65```tsx
66type Point = { x: number; y: number };
67 
68const generateLinePath = (points: Point[]): string => {
69  if (points.length < 2) return "";
70  return points.map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`).join(" ");
71};
72```
73 
74### Draw path with animation
75 
76```tsx
77import { evolvePath } from "@remotion/paths";
78 
79const path = "M 100 200 L 200 150 L 300 180 L 400 100";
80const progress = interpolate(frame, [0, 2 * fps], [0, 1], {
81  extrapolateLeft: "clamp",
82  extrapolateRight: "clamp",
83  easing: Easing.out(Easing.quad),
84});
85 
86const { strokeDasharray, strokeDashoffset } = evolvePath(progress, path);
87 
88<path
89  d={path}
90  fill="none"
91  stroke="#FF3232"
92  strokeWidth={4}
93  strokeDasharray={strokeDasharray}
94  strokeDashoffset={strokeDashoffset}
95/>;
96```
97 
98### Follow path with marker/arrow
99 
100```tsx
101import {
102  getLength,
103  getPointAtLength,
104  getTangentAtLength,
105} from "@remotion/paths";
106 
107const pathLength = getLength(path);
108const point = getPointAtLength(path, progress * pathLength);
109const tangent = getTangentAtLength(path, progress * pathLength);
110const angle = Math.atan2(tangent.y, tangent.x);
111 
112<g
113  style={{
114    transform: `translate(${point.x}px, ${point.y}px) rotate(${angle}rad)`,
115    transformOrigin: "0 0",
116  }}
117>
118  <polygon points="0,0 -20,-10 -20,10" fill="#FF3232" />
119</g>;
120```
121