Data Display

LineChart

Responsive SVG line chart for comparing one or more numeric series over an ordered x domain.

import { LineChart } from '@lostgradient/cinder/line-chart';
chartlineanalytics
01

Overview

Responsive SVG line chart for comparing one or more numeric series over an ordered x domain.

Usage

svelte 
<script lang="ts">
  import LineChart from '@lostgradient/cinder/line-chart';
</script>

<LineChart label="Loading revenue" loading series={[]} />

Guidance

Use When

  • Showing trends over time or another ordered domain.
  • Comparing several metric series on the same numeric axis.

Avoid When

  • Comparing discrete category totals — use bar-chart instead.
  • Showing cumulative filled trends — use area-chart instead.

Rendering and customization

LineChart uses SVG, with guide margins derived from the rendered tick labels, rotation, and axis titles. Its default theme inherits currentColor, keeps the chart background transparent, and resolves series colors from --cinder-chart-series-*; pass theme to override only the fields you need.

Set tooltip={true} for the default focus-aware visual tooltip, or pass a Snippet<[ChartTarget]> for custom content. Pass mark to replace each default series mark while retaining the chart's scales, guides, focus targets, and semantic data table. Series above 2,000 points are decimated for SVG rendering. The interaction model retains the complete dataset, while the data table evenly samples at most 2,000 rows and discloses the displayed and total point counts in its caption.

Live preview
02

When to use

Use when
  • Showing trends over time or another ordered domain.
  • Comparing several metric series on the same numeric axis.
Avoid when
  • Comparing discrete category totals — use bar-chart instead.
  • Showing cumulative filled trends — use area-chart instead.
03

Examples

Loading state

A line chart with reserved layout while data loads.

Activation funnel

A multi-series line chart comparing signups and activations.

Revenue trend

A single-series line chart for monthly recurring revenue.

04

Props

Props for line-chart
NameTypeDefaultDescription
label required text Accessible label for the chart. Required for screen readers.
description text Optional description rendered below the label.
series required ChartCartesianSeries[] Series to render as one or more connected line paths.
height number 280 Pixel height of the chart viewport. Default 280.
xAxis ChartAxisConfiguration & { /** Tick-label rotation in degrees. Default `0`. */ tickLabelRotation?: number; } Configuration for the x-axis label and tick formatting.
yAxis { label?: string; tickCount?: number; format?: ChartTickFormatter; } Configuration for the y-axis label and tick formatting.
legendPosition 'top' | 'bottom' | 'none' 'top' Where to render the series legend relative to the chart. Default top.
hiddenSeriesIds bindable string[] [] IDs of series currently hidden from the chart. Can be two-way bound with bind:hiddenSeriesIds.
loading boolean false Whether the chart is in a loading state. Default false.
dataTableCaption text Custom data table caption; falls back to label.
dataTableVisibility 'screen-reader-only' | 'visible' | 'hidden' 'screen-reader-only' Controls data table visibility. Default screen-reader-only.
maximumInteractivePoints number 500 Maximum number of interactive focus targets before keyboard navigation is disabled. Default 500.
theme { foreground?: string; muted?: string; grid?: string; background?: string; palette?: string[]; } Partial visual theme override. Omitted fields inherit the surrounding application.
tooltip boolean false Opt-in visual tooltip. Pass a snippet to replace the default visual content.
mark snippet Per-series renderer override. The chart retains scales, guides, focus, and data-table semantics.
empty snippet
loadingContent snippet
id text