Line Chart

Demo & usage

More examples

<sv-line-chart
  [categories]="days"
  [series]="series"
  chartType="spline"
  title="Active users"
  subtitle="Last 30 days"
  [height]="300" />

// null is a gap: the line breaks there rather than joining across it.
series = [{ label: 'Sensor', data: [12, 14, null, 19, 21] }];

// Long ordered series you scrub through. Dots off (they turn to noise past a
// few hundred points), grid on, brush on, animation off so a re-render during
// a drag does not fight the drag.
options = { showDots: false, showGrid: true, animated: false };
// plus [zoomable]="true" [minZoomPoints]="3" on the Pro chart.

// A short series someone is reading closely: every point marked and labelled,
// zones recolouring the line across the thresholds that matter.
options = { showDots: true, showDataLabels: true, showGrid: true, animated: true };
// plus per-series zones: [{ start: 0, end: 40, color: '#f59e0b', label: 'Below target' }]

// A trend in a table cell or a stat card: no axes, no grid, no legend, nothing
// but the shape. Reach for <sv-sparkline> if that is all you need.
options = { showDots: false, showGrid: false, showLabels: false, showLegend: false, animated: false };

When to use

• Showing a trend or change over a continuous/ordered axis (time series).
• You want multi-series comparison with zones, trend lines or markers.
• For category comparisons rather than trends, use the Bar Chart.

Async states

• loading
• empty
• error
• retry

Outputs

<sv-line-chart-pro>

Also in this family — SvLineChartProComponent from @styloviz-pro/charts.

Inputs

Outputs

<sv-trend-line-chart>

Also in this family — SvTrendLineChartComponent from @styloviz/charts.

Inputs

Outputs

<sv-trend-line-chart-pro>

Also in this family — SvTrendLineChartProComponent from @styloviz-pro/charts.

Inputs

Outputs

<sv-strip-line-chart>

Also in this family — SvStripLineChartComponent from @styloviz/charts.

Inputs

Outputs

<sv-strip-line-chart-pro>

Also in this family — SvStripLineChartProComponent from @styloviz-pro/charts.

Inputs

Outputs

Wire it to your API

This component is headless about transport: it renders what you give it and reports what the user asks for. Nothing below requires @styloviz/data — drive it from whatever you already use.

<sv-line-chart
  [series]="data.items()"
  [loading]="data.loading()"
  [error]="data.error()"
  [filtered]="data.filtered()"
  (retry)="data.reload()"
/>

// This component reports its state but does not emit a query, so drive
// it from your own fetch and bind the three async inputs.
readonly items = signal<Row[]>([]);
readonly loading = signal(false);
readonly error = signal<SvDataError | null>(null);

async load(): Promise<void> {
  this.loading.set(true);
  this.error.set(null);
  try {
    this.items.set(await this.api.fetchRows());
  } catch (e) {
    this.error.set(toSvDataError(e));
  } finally {
    this.loading.set(false);
  }
}

• This component does not emit a query, so it renders what you give it. Fetch on your own trigger and bind `series`, `loading` and `error`.
• Set `filtered` when a search or filter is active. It is the difference between "you have no orders" and "no orders match this filter" — telling a customer with 4,000 orders the first one reads as a bug.
• Normalize failures with `toSvDataError()` from `@styloviz/core`. It derives `retryable` from the status, so a 404 does not get a "Try again" button that can only fail again.

Full walkthrough: Connecting to a backend.

Customization & theming

• Line, spline or step interpolation.
• Zones, trend lines and strip bands.
• Multi-series with custom colors and markers.
• `null` in a series is a gap: the line breaks, no marker is drawn, the filled area stops at the break rather than painting under readings nobody took, and the axis scales to the values that exist. `NaN` and `Infinity` are treated the same way — a chart cannot tell a sensor fault from a `parseFloat('n/a')`.

Best practices

• Do: Limit to a few series; too many lines turn into spaghetti.
• Do: Label series in a legend and keep colors consistent across charts.
• Do: Start from one of the three presets above rather than assembling options from scratch. They are the combinations that are actually tested together, and the ones that go wrong are predictable: dots plus a few hundred points is noise, animation plus a zoom brush fights the drag, and values plus a dense series overlaps into unreadability.
• Do: Send null for a reading that was never taken. Do NOT send 0 — that asserts a measurement of zero, which is a different claim and one the chart will happily draw a line down to. The gap breaks the line and the chart says how many readings are missing under the plot.
• Don't: Do not interpolate across a gap before passing the data in. Joining two known readings through an unknown one draws a value nobody recorded, at full confidence, in the middle of the series — and it is indistinguishable from a real measurement once it is on the page.
• Tip: The line chart has no time zone, and that is the policy. Its x is a list of category STRINGS, so whatever they say is what the axis says — the component never parses a date, never calls toLocaleDateString, and cannot shift a label by an offset. Format your timestamps once, in the zone you mean, before they reach it. If you want the chart to do the formatting, use the date-time category variant in Other Types, which takes ISO strings and reads a bare YYYY-MM-DD as a calendar day in local time rather than as UTC midnight.
• Tip: A gap in a STACKED chart is the one case the chart cannot honour: every band above it is positioned by the running total, so the missing reading has to count as zero for the stack to add up. That substitution is disclosed under the plot. If the gaps matter more than the totals, use a plain line chart.
• Tip: Use `spline` for smooth trends and `step` for discrete state changes.

Accessibility

• The SVG is `role="img"` with an auto-generated data summary (override via `ariaLabel`), backed by an `sv-data-summary-table` of every point and series value — one row per point, one column per series.
• When `zoomable` is on, the table follows the brush window instead of the full dataset, and adds a line saying which window it is ("Showing points 6–15 of 40."). A table that listed all forty points beside a chart brushed down to ten described points that are not on screen, with no way to tell which ten were — and an alternative that contradicts the picture is worse than none. The free Line Chart has no brush, so it has neither.
• Series legend is keyboard reachable; reduced-motion disables the draw-on animation.
• A break in a line is ambiguous on sight — "nothing was recorded here" to one reader, a rendering glitch to another, and easy to miss entirely at one missing point in a dense series. The count of missing readings is stated in text under the plot, so it does not depend on noticing a gap in a drawing.