Chart Progress

Progress toward a real target: a wavy, grainy fill over a hatched remainder, with a thermometer marker, quota line and stacked segments.

Open in v0

$ pnpm dlx shadcn@latest add @tweenly/chart-progress

import { ChartProgress } from "@/components/chart-progress"

export function Demo() {
  return (
    <ChartProgress
      value={68400}
      max={100000}
      target={80000}
      targetLabel="Quota"
      label="Closed won"
      title="Sales quota"
      description="Q3 · 23 days left"
      titleSize="hero"
      valueFormat="currency"
    />
  )
}

Updates live as you change the controls. Only non-default props are included.