Data
Dot histogram
shadcn add @detent-pro/histogram
Dot histogram is in Pro. So is everything else.
19 Pro components, 12 whole screens and 1 template. The source lands in your project, yours to change, with every update for life.
Change one and the preview follows.
valuesnumber[]Requiredbinsnumber40titlestringunitstring'ms'pernumberinitialTargetnumbernounstring'requests'onTarget(v: number) => voidThrough a ref: target()
usage.tsx
<DotHistogramvalues={values}title="Response times, last 24 hours"/>
A whole page, ready to paste.
page.tsx
"use client"
import { DotHistogram } from "@/components/detent/components/viz/DotHistogram"
const values = Array.from({ length: 800 }, (_, i) => 90 + ((i * 7919) % 260) + (i % 40 === 0 ? 300 : 0))
export default function Page() {
return (
<main className="flex min-h-screen items-center justify-center p-6">
<div className="w-full max-w-[640px]">
<DotHistogram
title="Response time"
values={values}
bins={40}
unit="ms"
noun="requests"
initialTarget={300}
onTarget={(v) => console.log(v)}
/>
</div>
</main>
)
}