0%Seats filled

Controls

value

total

columns

rows

partial

caption

display

shape

emptyTexture

order

gappx

title

description

titleSize

surface

accent

radiuspx

bareanimate

durations

delays

valueFormat

currency

decimals

Chart Dots

Dot matrix of filled versus hatched units with a partial last dot, spring wave in fill order, and a huge count-up figure.

Open in v0

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

import { ChartDots } from "@/components/chart-dots"

export function Demo() {
  return (
    <ChartDots value={41} total={50} caption="Seats filled" />
  )
}

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