Breakdown Bars Card

A compact chart card that splits a total across labelled horizontal bars, each with its own percentage.

Where the week went

Booked hours by appointment type

Consultations42%
Follow-ups28%
Assessments19%
Admin11%

New here? Read the installation guide.

Import & use
import { Chart7 } from "@/components/beste/piece/chart7";

<Chart7
  title="Where the week went"
  caption="Booked hours by appointment type"
  items={[
    {
      "label": "Consultations",
      "percent": 42
    },
    {
      "label": "Follow-ups",
      "percent": 28
    },
    {
      "label": "Assessments",
      "percent": 19
    },
    {
      "label": "Admin",
      "percent": 11
    }
  ]}
/>

More Chart pieces

View all Chart
Deployments
Wk 24
128 builds
MonTueWedThu

92% passing

Weekday Peak Bars

A dark analytics card with weekday bars, a highlighted peak column carrying a callout pill above a dashed threshold, and an on-track footnote.