Line Chart

Time-series chart — single or multi-series, line or area fill. Hand-rolled SVG. Round-number axis ticks (shared with Bar Chart), per-point hover dots, unified multi-series tooltip showing all series at the hovered x position. Auto legend for multi-series.

a11y (built in): each chart's <svg> is role="img" carrying a generated aria-label summary ("Line chart over N points — series names"), rewritten on every render and on every ResizeObserver pass. Hover targets are transparent 24px circles (--lb-size-6x, the WCAG 2.5.8 minimum) sitting under the 8px visible dot, which is pointer-events: none so events fall through. A comparison series is distinguished by a dash pattern ("dashed": true), not colour alone; the tooltip itself is pointer-only, so the aria-label summary is the assistive-tech route to the data.

Usage: <div data-lb-line-chart> with a JSON config in <script type="application/json">. Keys: x, series, area (bool), colors, legend.

Single series

One line, no legend. Hover a dot for the value at that point.

Area fill

Set "area": true for a filled area below the line. Same data, more visual weight — useful when the chart is a focal point.

Comparison series (dashed)

The industry-standard period-comparison idiom: "dashed": true on a series renders it with a dashed stroke — pair it with a muted color so "previous period" reads as context, not competition. The tooltip still lists both series at the hovered point.

Multi-series

Add more series for a comparison view. Hover anywhere on the line to see all series at that x position in one tooltip.

Multi-series area

Layer the area fills for a "stacked feel" without true stacking — each series stays at its own absolute level, but the soft fill helps the eye trace volume over time.

In a Card

Wrap in a Card with a heading + caption. The chart sits inside the standard padded surface and inherits theme-aware colors.