BarChart

A vertical bar chart for comparing values across categories. Supports single and multiple data series with grid lines and axis labels.

Features

Single and multiple data series support
Grouped bars for comparison
Grid lines for reference
Axis labels and title
Legend display
Interactive bars with click events
Responsive sizing
Accessible with ARIA labels

Examples

Single Series BarChart

Monthly Revenue

Revenue

<script>
  import { BarChart } from '$lib';

  const series = [
    {
      label: 'Revenue',
      data: [45, 52, 48, 61, 55, 67],
      color: '#3b82f6'
    }
  ];
  const labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'];
</script>

<BarChart {series} {labels} title="Monthly Revenue" width={600} height={300} />

Multiple Series BarChart

Quarterly Comparison

<BarChart
  series={[
    { label: 'Q1', data: [30, 40, 35, 50], color: '#3b82f6' },
    { label: 'Q2', data: [35, 45, 40, 55], color: '#ef4444' }
  ]}
  labels={['Product A', 'Product B', 'Product C', 'Product D']}
  title="Quarterly Comparison"
  yAxisLabel="Sales ($K)"
  showGrid={true}
  showLegend={true}
  width={600}
  height={300}
/>

Props

Prop	Type	Default	Description
`series`	`Series[]`	Required	Array of data series with label, data, and optional color
`labels`	`string[]`	Required	Array of category labels
`title`	`string`	undefined	Chart title
`yAxisLabel`	`string`	undefined	Y-axis label
`showGrid`	`boolean`	true	Show grid lines
`showLegend`	`boolean`	true	Show legend
`width`	`number`	500	Chart width in pixels
`height`	`number`	300	Chart height in pixels

Events

Event	Detail	Description
`onbarclick`	`{ seriesIndex: number; barIndex: number; value: number }`	Fired when a bar is clicked

Accessibility

SVG has proper ARIA role and label
Bars are keyboard accessible
Color contrast meets WCAG AA standards
Legend provides text alternative to colors
Grid lines aid in reading values

Best Practices

Use for comparing values across categories
Limit to 3-4 series for clarity
Use distinct colors for each series
Include axis labels for context
Enable grid lines for easier value reading