animated-bar-chart

1import { loadFont } from "@remotion/google-fonts/Inter";
2import { interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
3import {
4  formatAxisValue,
5  formatCompactNumber,
6  niceDomain,
7  readDelta,
8  type ChartDatum,
9} from "@/remotion/lib/chart-utils";
10import { getSafeAreaPadding, scaleFont } from "@/remotion/lib/layout";
11import { DURATION, EASING, STAGGER } from "@/remotion/lib/motion-tokens";
12 
13const { fontFamily } = loadFont("normal", {
14  weights: ["400", "500", "600", "700"],
15  subsets: ["latin"],
16});
17 
18export type AnimatedBarChartProps = {
19  data: ChartDatum[];
20  title?: string;
21  /** Supporting line under the title — the read, not a repeat of the title. */
22  subtitle?: string;
23  /** Fixed axis top. Defaults to a rounded domain above the largest bar. */
24  maxValue?: number;
25  /** Formats the value on the end of each bar. */
26  valueFormatter?: (value: number) => string;
27  /** Label of the bar that carries `accentColor`. */
28  highlightLabel?: string;
29  /** Vertical gridlines and the value axis under the bars. */
30  showAxis?: boolean;
31  /** Bars beyond this count are dropped rather than squeezed. */
32  maxBars?: number;
33  barColor?: string;
34  accentColor?: string;
35  backgroundColor?: string;
36};
37 
38const COLORS = {
39  bg: "#080810",
40  label: "rgba(250,250,250,0.62)",
41  axis: "rgba(250,250,250,0.42)",
42  grid: "rgba(250,250,250,0.08)",
43  track: "rgba(250,250,250,0.05)",
44  ink: "#fafafa",
45  bar: "#2dd4bf",
46  accent: "#e8b86d",
47  up: "#2dd4bf",
48  down: "#f87171",
49} as const;
50 
51/**
52 * Ranked bar chart scene.
53 *
54 * Bars are measured against a rounded axis rather than the largest value, so
55 * the longest bar stops short of the frame edge and the numbers under it read
56 * as a scale instead of decoration. Each bar's length and its counter share one
57 * spring — the number can never claim a total the bar has not reached yet.
58 */
59export const AnimatedBarChart: React.FC<AnimatedBarChartProps> = ({
60  data,
61  title,
62  subtitle,
63  maxValue,
64  valueFormatter = formatCompactNumber,
65  highlightLabel,
66  showAxis = true,
67  maxBars = 6,
68  barColor = COLORS.bar,
69  accentColor = COLORS.accent,
70  backgroundColor = COLORS.bg,
71}) => {
72  const frame = useCurrentFrame();
73  const { fps, width, height } = useVideoConfig();
74  const safe = getSafeAreaPadding({ width, height });
75  const isPortrait = height > width;
76 
77  const bars = data.slice(0, maxBars);
78  const domain = niceDomain(
79    maxValue === undefined ? bars.map((item) => item.value) : [0, maxValue],
80// … truncated