asafefe.dev

Bar Chart

New

A responsive SVG bar chart. Bars grow in on view, hovering or focusing a group shows a readout, and an optional second series compares periods.

motionutils@soultel/use-reduced-motion-safe
Revenue 2026$340,500Up 26.4% on 2025. Hover or tab into the bars.

Installation

$ pnpm dlx shadcn@latest add @soultel/bar-chart

No namespace set up? npx shadcn@latest add https://asafefe.dev/r/bar-chart.json works too.

Manual installation
  1. 1. Install the dependencies.
    terminal1 lines
    npm install motion
  2. 2. Copy the source from the Code tab into components/bar-chart.tsx.

Usage

example.tsx18 lines
import { BarChart } from "@/components/bar-chart"

const revenue = [
  { label: "Jan", value: 18400, compare: 15200 },
  { label: "Feb", value: 21900, compare: 16800 },
  { label: "Mar", value: 24300, compare: 19100 },
]

export function Revenue() {
  return (
    <BarChart
      data={revenue}
      seriesLabel="2026"
      compareLabel="2025"
      format={(v) => `$${Math.round(v / 1000)}k`}
    />
  )
}

Props

PropTypeDefaultDescription
data{ label: string; value: number; compare?: number }[]-One group per label. Add compare for a lighter bar beside each one.
seriesLabel / compareLabelstring"Current" / "Previous"Series names for the legend and tooltip.
format(value: number) => string-Formats axis ticks and tooltip values.
heightnumber260Chart height in px. The width follows the container.
ticksnumber4Approximate number of grid lines. Ticks land on round numbers.
onBarClick(datum, index) => void-Called on click or Enter. Arrow keys move between groups.
labelstring"Bar chart"Accessible name for the chart.