HorizontalBarChart
A horizontal bar chart for displaying and comparing values. Ideal for long category names or when space is limited vertically.
Features
- Horizontal bar layout
- Grid lines for reference
- Axis labels and title
- Interactive bars with click events
- Responsive sizing
- Accessible with ARIA labels
Examples
Basic HorizontalBarChart
Browser Usage
<script>
import { HorizontalBarChart } from '$lib';
const data = [45, 38, 52, 41, 35];
const labels = ['Chrome', 'Firefox', 'Safari', 'Edge', 'Other'];
</script>
<HorizontalBarChart {data} {labels} title="Browser Usage" width={600} height={250} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | number[] | Required | Array of numeric values |
labels | string[] | Required | Array of category labels |
colors | string[] | Default palette | Array of colors |
title | string | undefined | Chart title |
xAxisLabel | string | undefined | X-axis label |
showGrid | boolean | true | Show grid lines |
width | number | 500 | Chart width in pixels |
height | number | 300 | Chart height in pixels |
Events
| Event | Detail | Description |
|---|---|---|
onbarclick | { index: number; label: string; value: number } | Fired when a bar is clicked |
Best Practices
- Use for categories with long names
- Include axis labels for context
- Enable grid lines for easier value reading