dashboardcn

Search documentation

Search for a page or component.

Dot Plot Card

PreviousNext

A metric card with a big value, a dot-plot distribution with its peak called out, and the change vs the previous period.

Transactions
Peak: Wed106K
vs last period+34,002
Customers
Highest: Thu1,284
vs last period+320
import { Ellipsis } from "lucide-react"

import { Button } from "@/components/ui/button"

A metric card with a big value, a dot-plot distribution with its peak called out, and the change versus the previous period. Suits transactions per day and similar counts.

Installation

pnpm dlx shadcn@latest add @dashboardcn/dot-plot-card

Also installs card, tooltip from shadcn/ui if missing.

Usage

import { DotPlotCard } from "@/components/dot-plot-card"

<DotPlotCard
  title="Transactions"
  value={106000}
  format="compact"
  data={[1, 1, 2, 1, 2, 4, 6, 4, 2, 1, 2, 1, 1, 1]}
  labels={["Sat", "Sun", "Mon", "Tue", "Tue", "Wed", "Wed", "Wed", "Thu", "Thu", "Fri", "Fri", "Sat", "Sat"]}
  delta={34002}
  deltaLabel="vs last period"
  color="var(--color-green-600)"
  action={<Button variant="outline" size="icon-sm" className="rounded-full"><Ellipsis /></Button>}
/>