einundzwanzig-verein/videos/.opencode/skills/remotion-best-practices/rules/charts.md

name, description, metadata

name	description	metadata
charts	Chart and data visualization patterns for Remotion. Use when creating bar charts, pie charts, histograms, progress bars, or any data-driven animations.	tags charts, data, visualization, bar-chart, pie-chart, graphs

Charts in Remotion

You can create bar charts in Remotion by using regular React code - HTML and SVG is allowed, as well as D3.js.

No animations not powered by useCurrentFrame()

Disable all animations by third party libraries.
They will cause flickering during rendering.
Instead, drive all animations from useCurrentFrame().

Bar Chart Animations

See Bar Chart Example for a basic example implmentation.

Staggered Bars

You can animate the height of the bars and stagger them like this:

const STAGGER_DELAY = 5;
const frame = useCurrentFrame();
const {fps} = useVideoConfig();

const bars = data.map((item, i) => {
  const delay = i * STAGGER_DELAY;
  const height = spring({
    frame,
    fps,
    delay,
    config: {damping: 200},
  });
  return <div style={{height: height * item.value}} />;
});

Pie Chart Animation

Animate segments using stroke-dashoffset, starting from 12 o'clock.

const frame = useCurrentFrame();
const {fps} = useVideoConfig();

const progress = interpolate(frame, [0, 100], [0, 1]);

const circumference = 2 * Math.PI * radius;
const segmentLength = (value / total) * circumference;
const offset = interpolate(progress, [0, 1], [segmentLength, 0]);

<circle r={radius} cx={center} cy={center} fill="none" stroke={color} strokeWidth={strokeWidth} strokeDasharray={`${segmentLength} ${circumference}`} strokeDashoffset={offset} transform={`rotate(-90 ${center} ${center})`} />;