Components
A distribution drawn as columns of stacked dots, with the peak columns at full strength.
import { DotPlot } from "@/components/ui/dot-plot"
const days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]Installation#
pnpm dlx shadcn@latest add https://dashboardcn.com/r/dot-plot.jsonUsage#
import { DotPlot } from "@/components/ui/dot-plot"
<DotPlot data={[1, 1, 2, 1, 2, 4, 6, 4, 2, 1, 2, 1, 1, 1]} color="var(--color-green-600)" />
<DotPlot data={[3, 5, 8, 12, 7, 4, 2]} labels={days} rows={6} />
<DotPlot data={[2, 3, 5, 4, 6, 3, 2]} emphasis={0} className="[--dot-size:0.875rem]" />Your dashboard, your code.
Every component is copied into your project with the shadcn CLI. No package to upgrade, nothing to override.