Bar chart

One value per bucket, each bar in its own track so the empty part of the week is visible too. Hover a bar for its number.

Preview

Steps

26,260total steps

27 Oct – 2 Nov

Mon

Tue

Wed

Thu

Fri

Sat

Sun

Colour

A single series takes one colour, --mf-chart-6 by default; pass color for another slot. Tracks are --mf-fill-2. Below 3:1 contrast on white, so the value sits in the card header and on hover.

Usage

import { BarChart, ChartCard } from "@/charts";

<ChartCard title="Steps" value="26,260" unit="total steps" range="27 Oct – 2 Nov">
  <BarChart data={[{ label: "Mon", value: 4820 }, …]} unit="steps" />
</ChartCard>