Cairn
Stable

Bar Chart

Muted neutral bars; the active or hovered bar is highlighted in colour with a value pill.

Show code
import { BarChart } from '@six-vallees/ui-react';

export default function BarChartDemo() {
  const bars = [
    { label: 'Sun', value: 320 },
    { label: 'Mon', value: 410 },
    { label: 'Tue', value: 584, active: true },
    { label: 'Wed', value: 300 },
    { label: 'Thu', value: 260 },
    { label: 'Fri', value: 220 },
    { label: 'Sat', value: 480 },
  ];
  return (
    <div className="w-full text-on-surface">
      <BarChart data={bars} height={200} />
    </div>
  );
}

Installation

npx shadcn@latest add https://cairn.sixvallees.com/r/bar-chart.json