Baby Baltazar

Bar Chart

Multi-series bar chart with grouped or stacked layout. Uses design tokens (--chart-1 to --chart-5).

Installation

Install this component via the shadcn CLI.

npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/bar-chart.json

Or install the theme first: npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/sthlm-theme.json

Preview

Interactive component demo.

Grouped

Stacked

Usage

How to use this component in your code.

// Grouped
<BarChart
  data={data}
  series={{
    streaming: { label: "Streaming", color: "var(--chart-1)" },
    performance: { label: "Performance", color: "var(--chart-2)" },
  }}
  showLegend
/>

// Stacked
<BarChart
  stacked
  data={data}
  series={series}
  showLegend
/>