Off The Charts

Quarterly bars climb until the last one breaks its axis and overshoots the target at 260%

Installation

$ pnpm dlx shadcn@latest add @remocn/off-the-charts

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { OffTheCharts } from "@/components/remocn/off-the-charts";
 
const OffTheChartsScene = () => (
  <OffTheCharts
    target={100}
    caption="of the Q4 target"
    data={[
      { label: "Q1", value: 58 },
      { label: "Q2", value: 74 },
      { label: "Q3", value: 86 },
      { label: "Q4", value: 260 },
    ]}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="OffTheCharts"
    component={OffTheChartsScene}
    durationInFrames={140}
    fps={30}
    width={1280}
    height={720}
  />
);

Quarterly bars climb against a dashed target line inside a framed axis; the last bar presses against the ceiling, snaps through it, and the overshoot value slams in with its caption. Pass data, target, and max (the axis ceiling), with unit, value and caption for the text. Ships dark and light via theme.

Props11

Prop	Type	Default
data	OffTheChartsDatum[]DEFAULT_DATA Bars to plot, in order, with a label and value each.
accentIndex	number— Index of the bar that breaks out; defaults to the last.
target	number100 Value where the dashed target line sits.
max	number150 Value at the top of the framed axis.
unit	string"%" Unit appended to values.
targetLabel	string"Target" Label on the target line.
value	string— Hero text; defaults to the accent bar value plus unit.
caption	string"of the Q4 target" Line under the hero value.
accent	string"#3B5BFD" Accent color for the hero element.
speed	number1 Playback multiplier.
theme	"dark" \| "light""dark" Dark or light palette.

dataOffTheChartsDatum[]
Bars to plot, in order, with a label and value each.
DefaultDEFAULT_DATA
accentIndexnumber
Index of the bar that breaks out; defaults to the last.
targetnumber
Value where the dashed target line sits.
Default100
maxnumber
Value at the top of the framed axis.
Default150
unitstring
Unit appended to values.
Default"%"
targetLabelstring
Label on the target line.
Default"Target"
valuestring
Hero text; defaults to the accent bar value plus unit.
captionstring
Line under the hero value.
Default"of the Q4 target"
accentstring
Accent color for the hero element.
Default"#3B5BFD"
speednumber
Playback multiplier.
Default1
theme"dark" | "light"
Dark or light palette.
Default"dark"