Charts

Line Chart

Show change over time with an accessible, SVG-first line chart.

Charts / Line Chart

Preact nativeResponsiveStackableTyped props

Overview

Line charts share Kamod’s cartesian model with area and scatter charts. Style lines per series, stack cumulative totals, and annotate thresholds with reference lines, areas, and points — all through typed props.

import { LineChart } from "@kamod-ch/charts/line";

Static bundle: Import from @kamod-ch/charts/line for charts without the motion runtime.
Series styling: Per-series props on LineSeriesConfig override chart-level defaults for stroke width, dash patterns, and markers.

API notes

Typed LineChart props — no dashed boolean and no option:any.

LineSeriesConfig: Each entry in series extends the cartesian config with strokeWidth, strokeDasharray, showPoints, and pointRadius. Series values win over chart-level defaults.
Dash patterns: Use strokeDasharray (e.g. "6 4") on the chart or on a series — not a dashed boolean. Combine solid actuals with a dashed forecast line via per-series patterns.
Curve values: Exported curve names: linear, monotoneX, basis, step, stepBefore, stepAfter. Default is linear.
Stacked lines: Set stacked to draw each series on cumulative y1. Axis tooltips still report each series’ raw value; markers and crosshair anchor on the stacked position.
Reference areas: referenceAreas accept vertical x1/x2 or horizontal y1/y2 pairs. Band scales include full category bandwidth.
Reference points: referencePoints mark explicit x/y events with circle, square, or diamond shapes. Kamod does not infer peaks — pass coordinates from your domain model.
Reference lines: referenceLines accept optional strokeWidth and strokeDasharray. When omitted, the legacy "4 4" dash pattern is preserved.
Theme tokens: Reference fills and markers use var(--chart-reference-area) and var(--chart-reference-point) so annotations stay readable in light and dark themes.

Gallery

Thirteen functional patterns covering curves, forecasts, stacking, and cartesian annotations. Each preview uses Kamod’s real LineChart API — no copied option objects.

Basic line

A single responsive series with grid, tooltip, and accessible title. This is the starting point for most dashboards.

ResponsiveTooltip

Multiple series with legend

Compare related metrics and let readers toggle series from the HTML legend without losing keyboard focus on the chart surface.

showLegendmonotoneX

Smooth line without points

Use curve="monotoneX" for a smooth trend and showPoints={false} when markers would clutter dense data.

monotoneXshowPoints={false}

Actual solid, forecast dashed

Style each series through LineSeriesConfig. Per-series strokeDasharray overrides the chart default so actuals stay solid while projections read as provisional.

LineSeriesConfigstrokeDasharray

Step line

Use curve="step" for centered step transitions between discrete periods.

step

Peak marker and horizontal target

Combine referencePoints for explicit events with referenceLines for thresholds. Kamod does not auto-detect peaks — pass coordinates from your analytics layer.

referencePointsreferenceLines

Linear segments

linear is the Kamod default — straight segments between points without smoothing or steps.

linear

Step before

curve="stepBefore" holds the previous value until the next category boundary — useful for inventory or quota resets.

stepBefore

Stacked lines

Set stacked to draw each series on cumulative y1. Tooltips still report raw channel values while markers follow the stacked geometry.

stackedRaw tooltip values

Dashed forecast series

Apply strokeDasharray on a single forecast series or at chart level. Prefer explicit dash strings over boolean flags.

strokeDasharrayForecast

Actual vs forecast with peak window

Highlight a peak interval with referenceAreas while keeping actual and forecast lines on the same chart.

referenceAreasActual + forecast

Calendar event window

Use xScale="time" with Date x values and a vertical reference area to mark launch or maintenance windows on a daily axis.

time scalereferenceAreasResponsive

Capacity changes as diamonds

Mark infrastructure step changes with referencePoints using shape="diamond". Pass explicit x/y coordinates when capacity shifts.

referencePointsdiamond

Props

LineChart props
Prop	Type	Default	Description
data	readonly TDatum[]	—	Array of row objects rendered by the chart.
xKey	DataAccessor<TDatum, string \| number \| Date \| null \| undefined>	—	Field or accessor for the x axis.
xScale	"linear" \| "time" \| "band" \| "point"	—	Scale kind for the x axis.
height	number	—	Chart height in pixels.
width	number	—	Fixed width. Prefer responsive + initialWidth for fluid layouts.
initialWidth	number	—	SSR / first-paint width before ResizeObserver measures the container.
responsive	boolean	false	Stretch to the parent container width.
title	string	—	Accessible chart title rendered into SVG title.
description	string	—	Accessible description rendered into SVG desc.
showGrid	boolean	—	Show cartesian grid lines.
showLegend	boolean	—	Show an HTML legend with series toggles. Supported on Line, Scatter, Area, and Bar charts.
tooltip	boolean \| CartesianTooltipOptions<TDatum>	—	Enable pointer and keyboard tooltips. `true` uses chart defaults: axis mode for Line and Area, nearest mode for Scatter and Bar. Options may set mode, placement, offset, render, formatValue, and formatLabel. PieChart does not support this prop.
series	readonly LineSeriesConfig<TDatum>[]	—	One or more line series. LineSeriesConfig extends the cartesian config with strokeWidth, strokeDasharray, showPoints, and pointRadius.
animate	boolean \| ChartAnimateOptions	—	Optional data animation. No-op on static entries unless a MotionConfig from @kamod-ch/charts/motion is present. Defaults to on for charts imported from that subpath. Options: enabled, duration (seconds), easing, preset, reducedMotion.
stacked	boolean	false	Stack series on cumulative y1 geometry. Tooltips still report raw series values.
curve	"linear" \| "monotoneX" \| "basis" \| "step" \| "stepBefore" \| "stepAfter" \| CurveFactory	"linear"	Path interpolation for every visible series.
connectNulls	boolean	false	Draw across null / undefined values.
strokeWidth	number	—	Default line stroke width. Overridden by per-series strokeWidth.
strokeDasharray	string	—	Default SVG dash pattern, e.g. "6 4". Overridden by per-series strokeDasharray. Use explicit patterns instead of a dashed boolean.
showPoints	boolean \| "auto"	"auto"	Render markers on each defined datum (auto hides markers above 500 points).
pointRadius	number	2.5	Default marker radius when showPoints is enabled.
referenceLines	readonly CartesianReferenceLine<TDatum>[]	—	Optional x/y reference markers with label, color, strokeWidth, and strokeDasharray.
referenceAreas	readonly CartesianReferenceArea<TDatum>[]	—	Vertical x1/x2 or horizontal y1/y2 highlight bands clipped to the plot area.
referencePoints	readonly CartesianReferencePoint<TDatum>[]	—	Explicit x/y event markers with shape, label, and labelPosition. Kamod does not infer peaks.