Bar Chart

Grouped and stacked bar chart for comparing categorical data across multiple series.

Import

ts 
import BarChart from '$lib/components/BarChart.svelte';

Usage

Pass labels and series to render a grouped bar chart.

svelte 
<script lang="ts">
  const labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'];
  const series = [
    { label: 'Revenue', data: [42, 58, 51, 73, 65, 88] },
    { label: 'Expenses', data: [28, 35, 31, 42, 38, 51] }
  ];
</script>

<BarChart {labels} {series} />

Stacked

Enable stacked to display bars on top of each other, useful for part-to-whole comparisons.

svelte 
<BarChart {labels} {series} stacked />

Single Series

Works just as well with a single data series.

svelte 
<script lang="ts">
  const labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'];
  const series = [{ label: 'Users', data: [310, 480, 390, 620, 540, 710] }];
</script>

<BarChart {labels} {series} :height="200" />

Without Grid

Hide the horizontal grid lines with grid=false.

svelte 
<BarChart {labels} {series} :grid="false" />

API Reference

PropTypeDefaultDescription
labels string[]—X-axis category labels, one per data point.
series BarSeries[]—Array of data series. Each series has label, data: number[], and optional color.
height number260Chart height in pixels.
grid booleantrueShow horizontal grid lines.
stacked booleanfalseStack bars on top of each other instead of grouping side-by-side.
class string—Extra CSS classes applied to the root element.