Bar Chart

Blocks & Slices

A dependency-free SVG bar-chart block: gradient-filled vertical bars grow from the zero baseline with a staggered scaleY draw-in, plus an optional slimmer overlay series, mono gridlines/axis ticks, and a header total. Pointer or arrow-key focus highlights a bar and pops a value tooltip while others dim; under prefers-reduced-motion the bars render at full height with no draw-in.

Inspired by Watermelon UI — dashboard charts — independently built, not affiliated. Attribution policy

Weekly signups

3.7K

This weekLast week

Installation

npx shadcn@latest add https://parable-three.vercel.app/r/bar-chart.json

Runs the shadcn CLI — the component source is copied intocomponents/parable/bar-chart.tsx. You own it from there.

Usage

The exact code rendering the preview above.

<div className="w-full max-w-md">
    <BarChart
      title="Weekly signups"
      seriesLabel="This week"
      secondaryLabel="Last week"
      height={200}
      data={[
        { label: "Mon", value: 320 },
        { label: "Tue", value: 510 },
        { label: "Wed", value: 440 },
        { label: "Thu", value: 680 },
        { label: "Fri", value: 740 },
        { label: "Sat", value: 390 },
        { label: "Sun", value: 580 },
      ]}
      secondaryData={[
        { label: "Mon", value: 210 },
        { label: "Tue", value: 300 },
        { label: "Wed", value: 260 },
        { label: "Thu", value: 410 },
        { label: "Fri", value: 520 },
        { label: "Sat", value: 240 },
        { label: "Sun", value: 380 },
      ]}
    />
  </div>

Props

BarChartProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">

Prop	Type	Default	Description
data	BarChartDatum[]	DEFAULT_DATA	Bars to plot. Ships an 8-point default when omitted.
secondaryData	BarChartDatum[]	—	Optional second series drawn as a slimmer overlay bar centred in each slot. Matched to `data` by index; extra or missing points are ignored.
title	string	"Weekly volume"	Heading shown top-left of the card.
color	string	"#8b5cf6"	Primary bar colour. Defaults to Parable violet `#8b5cf6` (mirrors the site's `--pb-violet` token).
secondaryColor	string	"#22d3ee"	Overlay bar colour. Defaults to Parable signal cyan `#22d3ee` (mirrors the site's `--pb-signal` token). Only used when `secondaryData` is set.
seriesLabel	string	"Primary"	Legend name for the primary series.
secondaryLabel	string	"Compare"	Legend name for the overlay series.
height	number	240	Plot area height in pixels (excludes the header row).
valueFormatter	(n: number) => string	compactNumber	Formats headline total, tooltip, tick and aria values. Defaults to compact.