Log Rescale

A bar chart rescales to a log axis so the final 2.4M bar stands out

Installation

$ pnpm dlx shadcn@latest add @remocn/log-rescale

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { LogRescale } from "@/components/remocn/log-rescale";
 
const LogRescaleScene = () => (
  <LogRescale
    title="remocn renders per year"
    data={[
      { label: "2023", value: 4800 },
      { label: "2024", value: 18000 },
      { label: "2025", value: 96000 },
      { label: "2026", value: 2400000 },
    ]}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="LogRescale"
    component={LogRescaleScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

Bars rise on a linear axis where only the last one is visible, then the axis morphs to a log scale, the smaller bars grow into view, and their values label in. Pass data (label and value per bar), accentIndex for the hero bar (defaults to the largest), and a title. Ships dark and light via theme.

Props6

Prop	Type	Default
data	LogRescaleDatum[]DEFAULT_DATA Bars to plot, in order, with a label and value each.
accentIndex	number— Index of the hero bar; defaults to the largest value.
title	string"remocn renders per year" Small heading over the chart.
accent	string"#3B5BFD" Accent color for the hero element.
speed	number1 Playback multiplier.
theme	"dark" \| "light""dark" Dark or light palette.

dataLogRescaleDatum[]
Bars to plot, in order, with a label and value each.
DefaultDEFAULT_DATA
accentIndexnumber
Index of the hero bar; defaults to the largest value.
titlestring
Small heading over the chart.
Default"remocn renders per year"
accentstring
Accent color for the hero element.
Default"#3B5BFD"
speednumber
Playback multiplier.
Default1
theme"dark" | "light"
Dark or light palette.
Default"dark"