Baby Baltazar

Line Chart

Multi-series line chart with optional area fills. 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/line-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.

Usage

How to use this component in your code.

<LineChart
  data={[
    { label: 'Jan', streaming: 4200, performance: 1800 },
    { label: 'Feb', streaming: 5100, performance: 2100 },
  ]}
  series={{
    streaming: { label: 'Streaming royalties', color: 'var(--chart-1)', showArea: true },
    performance: { label: 'Performance royalties', color: 'var(--chart-2)' },
  }}
  showGrid
  showLegend
/>