Bar Chart

Categorical bar chart — vertical (default) or horizontal, single or multi-series, grouped or stacked. Hand-rolled SVG, no dependencies. Round-number axis ticks computed from data extent; hover tooltip on each bar. Auto-renders a legend for multi-series.

a11y (built in): the chart's <svg> is role="img" and gets an aria-label rebuilt on every render — category count plus each series name and its full list of values — so assistive tech reads the data instead of a stack of unlabelled <rect>s. The auto-rendered legend pairs each swatch with its series name as real text. Hover tooltips are pointer-only (mouseenter/mousemove/mouseleave); the aria-label summary is the non-pointer route to the same numbers.

Usage: <div data-lb-bar-chart> with a JSON config in <script type="application/json">. Keys: x, series, orientation, stacked, colors, legend.

Single series — vertical

The simplest case. One series, vertical bars, automatic y-axis ticks.

Multi-series — grouped

Side-by-side bars per category. Legend auto-renders.

Stacked

Same data with "stacked": true — series accumulate per category.

Horizontal

Long category labels read better horizontally. For country axes, prefer 2-letter ISO codes — they sit cleanly in the SVG label slot and pair naturally with a Flag column elsewhere on the page (a Bar List or Table) when the user needs richer context.

In a Card — dashboard widget

Wrap in a Card with a heading + caption for a stand-alone widget.

Custom colors

Pass a colors array to override the default palette per chart.