Line chart
stable 5.2 kB<hk-line-chart>Plain SVG built from TypeScript maths — no charting dependency, because a chart core is scales plus path generators and little else. Ships a crosshair and tooltip by default, breaks the line at missing points rather than drawing through them, and carries a table view as the accessible equivalent of the plot.
#chart#graph#svg#line#area
Live demo
Running in this page — interact with it.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| series | HkSeries[] | [] | One entry per line. A null y breaks the line instead of drawing through it. |
| curve | 'linear' | 'smooth' | 'linear' | Smooth uses a Catmull-Rom spline that passes through every point. |
| height | number | 260 | Height in px. Width always fills the container. |
| markers | boolean | false | Dots on every point. Off by default — dots on a dense line are noise. |
| endLabels | boolean | true | Labels the last point of each series. Selective by design. |
| yAxis / xAxis | HkAxisConfig | {} | Domain, tick count, label and formatter. |
| tableView | boolean | true | Shows the Table toggle — required relief for low-contrast hues. |
| legend | boolean | true | Suppressed automatically for a single series. |
Outputs
pointActivateEventEmitter<HkChartPointEvent>Emits when a marker is clicked.
Keyboard
- ← / → Move the crosshair between points
- Home / End Jump to the first / last point
- Escape Dismiss the readout
Theming
Component tokens, each falling back to a global one:
| Property | Default | Controls |
|---|---|---|
| --hk-chart-grid | #e8ecf1 | Gridline colour. Hairline and solid, never dashed. |
| --hk-chart-ink | #0f172a | Primary text. Labels never wear a series colour. |
| --hk-chart-muted | #64748b | Axis and secondary text. |
| --hk-chart-surface | #ffffff | Chart surface. Also the 2px ring around dots. |
Accessibility
- The plot is focusable and arrow-navigable, so values are reachable without a pointer.
- A table view carries the same numbers — the accessible equivalent of the plot, and the required relief for hues below 3:1 contrast.
- The palette order is validated for colour-vision deficiency in both light and dark; adjacent series clear ΔE 8 (CVD) and ΔE 15 (normal vision).
- A legend is always present for two or more series, so identity is never colour-alone. A single series gets none — the title already names it.
- The tooltip is role="status" aria-live="polite", so it announces without stealing focus.