mirror of
https://github.com/HolgerHatGarKeineNode/einundzwanzig-nostr.git
synced 2026-01-29 08:53:18 +00:00
59 lines
1.7 KiB
Markdown
59 lines
1.7 KiB
Markdown
---
|
|
name: charts
|
|
description: Chart and data visualization patterns for Remotion. Use when creating bar charts, pie charts, histograms, progress bars, or any data-driven animations.
|
|
metadata:
|
|
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](assets/charts/bar-chart.tsx) for a basic example implmentation.
|
|
|
|
### Staggered Bars
|
|
|
|
You can animate the height of the bars and stagger them like this:
|
|
|
|
```tsx
|
|
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.
|
|
|
|
```tsx
|
|
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})`} />;
|
|
```
|