Charts

The data visualization suite — six components: Stat, Sparkline, Bar List, Donut, Bar Chart, Line Chart. All hand-rolled SVG or pure CSS — no charting library. Every chart adopts the active theme automatically via the --lb-data-1..8 palette tokens.

a11y (built in): every SVG chart is role="img" with an aria-label the component regenerates on each render — a plain-text summary of the real data ("Sparkline: 24 points, rising from 12 to 48", "Bar chart over 6 categories — …"), so the chart is never an unlabelled graphic. Donut segments additionally carry a per-segment <title>; Stat and Bar List are ordinary text and markup and need nothing added.

Usage: The whole suite lives in core js/lb.js — one script, no chart library, auto-init on DOMContentLoaded. Stat is pure CSS; Bar List is markup plus a tiny initialiser that turns each row's data-lb-value into a proportional bar width (largest row = 100%); Sparkline is configured entirely by attributes (data-lb-data comma list, data-lb-variant, data-lb-dot); Donut, Bar Chart and Line Chart read a <script type="application/json"> config child, exactly as the demos below show. Charts dispatch no events — they are render-only; push live data through the instances instead: el._lbSparkline.setData(arr), el._lbDonut.setData(data), el._lbBarChart.setData(cfg) and el._lbLineChart.setData(cfg) re-render in place. Fetching, polling and number formatting stay consumer code — the DS never bundles a data layer.

Compose with: Card for surface, Grid for KPI strips, Table for tabular adjacency, Resizable for dashboard layouts.

Data palette — eight tokens

Categorical series colors. Each chart picks --lb-data-1 first, walking the palette as it adds series. Light theme uses the 500-level palette; dark theme bumps to 400-level for visibility on dark surfaces. Override per-instance with the colors JSON config (or style="--color: …" on Sparkline / Bar List).

Stat — KPI primitive

Label + big number + optional delta chip and caption. Pure HTML/CSS, no JS. The foundation of every dashboard. Drop inside Card, compose with Sparkline.

Sparkline — inline mini chart

Line, area, or bar with no axes or chrome. Scales fluidly to its host's CSS size. Pairs with Stat for the metric card pattern.

Bar List — ranked rows

Top countries, top sources, top pages. Pure HTML/CSS layout. Drops into Card for a stand-alone widget.

Donut — proportions

Same-radius circles with stroke-dasharray arcs. Configurable thickness (set to 50 for a pie). Optional center value slot, paired legend list.

Bar Chart — categorical

Vertical or horizontal, single or multi-series, grouped or stacked. Round-number axis ticks, hover tooltips, auto legend.

Line Chart — time-series

Single or multi-series, line or area fill. Per-point hover dots with a unified multi-series tooltip showing every series at the hovered x position.

All together — the dashboard

See every chart in one place — Stat, Sparkline, Bar List, Donut, Bar Chart, and Line Chart composed with Card, Table, Resizable rails, and Tree navigation into a real product UI.