Line Chart

A multi-series time plot built on visx. Pass an explicit width; size the container yourself.

Usage

import { LineChart, type LineChartSeries } from '@epilot/spark-ui/line-chart'

function Chart({ width }: { width: number }) {
  return (
    <LineChart
      width={width}
      height={220}
      series={series}
      yAxisUnit="units"
      formatDate={formatHour}
      formatValue={formatValue}
    />
  )
}

LineChart does not observe its container. Measure width with ResizeObserver or @epilot/spark-ui/hooks/use-container-width, and only render once width > 0. For ready-made energy day plots, see Solar Forecast Chart and Power History Chart.

Series stroke colors come from each series' className (Tailwind stroke-* classes). Pass a matching color (CSS value) so the tooltip swatch and hover dot stay in sync when you override the stroke.

Examples

Measured vs projected

Split one curve into a solid measured segment and a dashed projected segment that share a handoff point. Both series use the same color so the tooltip matches the line.

Reference markers

referenceLines draw vertical dashed markers on the time axis. Labels sit near the top of the plot.

API Reference

`LineChartProps`

Prop	Type	Default	Description
`series`	`LineChartSeries[]`	—	One entry per line. Empty series still reserve a legend/tooltip slot only if they have data points.
`width`	`number`	—	Plot width in px. Required; the chart does not size itself.
`height`	`number`	—	Plot height in px.
`margin`	`{ top, right, bottom, left }`	`16/16/40/48`	Inner plot padding. Increase `left` when y-axis labels are wide.
`curve`	`"monotone" \| "step" \| "step-after" \| "step-before" \| "linear"`	`"monotone"`	Default interpolation for every series. Per-series `curve` overrides this.
`showGrid`	`boolean`	`true`	Horizontal grid lines behind the series.
`showTooltip`	`boolean`	`true`	Crosshair + tooltip on hover.
`xTickCount`	`number`	`5`	Target number of x-axis ticks.
`yTickCount`	`number`	`4`	Target number of y-axis ticks.
`yDomain`	`[number, number]`	data extent	Fixed y-axis range. When omitted, the domain pads ~10% and pins the baseline at 0 when all values ≥ 0.
`formatDate`	`(date: Date) => string`	locale date	X-axis tick labels.
`formatTooltipDate`	`(date: Date) => string`	`formatDate`	Tooltip header. Use a fuller clock time when axis ticks are compact.
`formatValue`	`(value: number) => string`	locale number	Tooltip values, and y-axis ticks when `yAxisUnit` is omitted.
`yAxisUnit`	`string`	—	Unit drawn once above the y-axis. When set, ticks use the compact shared formatter instead of `formatValue`.
`formatYTick`	`(value: number) => string`	compact ticks	Overrides y-axis tick labels when `yAxisUnit` is set.
`referenceLines`	`{ key, date, label? }[]`	—	Vertical dashed markers on the time axis.
`topContent`	`{ key, date, content }[]`	—	HTML nodes pinned above the plot at a time (for example icons).
`className`	`string`	—	Merges onto the root SVG wrapper.

`LineChartSeries`

Field	Type	Default	Description
`id`	`string`	—	Stable key. Used as the tooltip label when `label` is omitted.
`data`	`LineChartDatum[]`	—	Sorted ascending by `date`. Points outside the hovered x-domain are skipped.
`label`	`ReactNode`	`id`	Tooltip row label.
`className`	`string`	palette	Stroke classes for the path (for example `stroke-orange-9`).
`color`	`string`	palette	CSS color for the tooltip swatch and hover dot. Set whenever `className` overrides the stroke color.
`curve`	`LineChartCurve`	chart curve	Per-series interpolation override.
`dashed`	`boolean`	`false`	Draws the path with a dash pattern.
`dashPattern`	`string`	`"4 4"`	SVG `stroke-dasharray` when `dashed` is true.

`LineChartDatum`

Field	Type	Description
`date`	`Date`	X value (time).
`value`	`number`	Y value.

Accessibility

The plot is a decorative SVG. Pair it with a text summary or table when the values matter for a decision.
Hover tooltips are pointer-only. Do not make the tooltip the only place a value appears.
Prefer formatDate / formatValue that read clearly out of context (include units in tooltip values, or set yAxisUnit for the axis).

Line Chart

On this page