Bar chart
stable 4.8 kB<hk-bar-chart>The same SVG core as the line chart. Bars are capped at 24px so the band keeps some air, only the data-end is rounded so the bar stays anchored to its axis, and touching marks are separated by a 2px gap in the surface colour rather than a stroke. The value axis always includes zero — a truncated bar axis is the most common way a bar chart misleads.
#chart#graph#svg#bar#column
Live demo
Running in this page — interact with it.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| series | HkSeries[] | [] | One entry per series. |
| layout | 'grouped' | 'stacked' | 'grouped' | Side by side, or summed per category. |
| orientation | 'vertical' | 'horizontal' | 'vertical' | Horizontal suits long category names. |
| valueLabels | boolean | false | Value at the data-end. Skipped where it will not fit. |
| height | number | 260 | Height in px. Width fills the container. |
| tableView | boolean | true | Shows the Table toggle. |
Outputs
barActivateEventEmitter<HkChartPointEvent>Emits when a bar is clicked.
Theming
Component tokens, each falling back to a global one:
| Property | Default | Controls |
|---|---|---|
| --hk-chart-grid | #e8ecf1 | Gridline colour. |
| --hk-chart-surface | #ffffff | Surface colour — also the 2px gap between touching bars. |
| --hk-chart-ink-2 | #475569 | Value label colour. |
Accessibility
- The value axis always includes zero, so bar length stays proportional to value.
- Each category is one hit band, which is a far bigger hover target than the bars themselves.
- Separation between stacked segments is a gap in the surface colour, not a stroke — a stroke adds ink that is not data.
- A table view carries the same numbers for anyone who cannot use the plot.