Block · dynamic

Bar-Chart Race

Ranked bars that interpolate across a looping timeline and glide past each other as the order changes — the classic bar-chart race, with a stable narrative naming the winner and top climber.

State

Size

Mode

Acme product MRR · Q1 '24 – Q2 '26

10,542 k MRR

Acme Labs leads · Q2 '26

Across 10 periods, Acme Labs finishes on top at 10,542 k MRR, and Acme Labs climbed 4 places.

Acme Core

5,351

Platform Pro

4,407

Acme Labs

10,542

Pro Enterprise

6,703

Platform Plus

2,551

Growth Suite

5,723

Acme Analytics · updated quarterly

Demo data is illustrative. Replace with your own typed data prop.

Use it with your data

Data contract

Passed via the data prop — an object: validated at runtime, so a bad shape degrades to the error state rather than crashing.

Field	Type	Required
entities	array	yes
frames	array	yes
unit	string	no

Static props

import { ChartBarRace } from "@/components/blocks/chart-bar-race/chart-bar-race";

<ChartBarRace data={myData} />

Client fetch (SWR)

const { data, isLoading, error } = useSWR("/api/metric", fetcher);
// route isLoading/error through <ChartStates>, then:
<ChartBarRace data={data} />

Server component (RSC)

const data = await fetch(url, {
  next: { revalidate: 3600 },
}).then((r) => r.json());

<ChartBarRace data={data} />

Map arbitrary rows

import { mapRows } from "@/lib/sextant/column-map";

const out = mapRows(rows, { /* contractKey: "yourColumn" */ }, dataSchema);
if (out.ok) <ChartBarRace data={out.data} />;

Make it yours

Every customization below is an optional prop — omit them all and you get the defaults shown above. Recolor, reformat, restyle, or drop the card chrome without forking the component.

Recolor or rename a series (bar)

<ChartBarRace
  series={{ bar: { color: "var(--chart-3)", label: "…" } }}
/>

Format numbers (currency / locale)

const eur = new Intl.NumberFormat("de-DE", {
  style: "currency",
  currency: "EUR",
  notation: "compact",
});

<ChartBarRace valueFormatter={(n) => eur.format(n)} />

Replace or hide the narrative

<ChartBarRace narrative="Your own one-liner." />

// …or hide it entirely:
<ChartBarRace narrative={false} />

Restyle any region

<ChartBarRace
  className="max-w-xl"
  classNames={{ body: "bg-muted/20" }}
/>