Bullet Chart

Actual-vs-target bar with a tone-colored actual fill on a muted track and a thin foreground tick marking the target.

Weekly sessions

186/ 220

34 to targetmax 300

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use

import { Dashboard22 } from "@/components/beste/piece/dashboard22";

<Dashboard22
  label="Weekly sessions"
  actual={186}
  target={220}
  max={300}
  suffix=""
  targetMetLabel="Target met"
  toTargetLabel="to target"
  maxLabel="max"
  tone="emerald"
/>