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>

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.
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
Name Type Default Required Bindable Description
label unknown req
description unknown req
series ChartCartesianSeries[] req Series to render as one or more connected line paths.
height unknown 280
xAxis unknown req
yAxis unknown req
legendPosition unknown 'top'
hiddenSeriesIds unknown [] bind
loading unknown false
dataTableCaption unknown req
dataTableVisibility unknown 'screen-reader-only'
maximumInteractivePoints unknown 500
empty unknown req
loadingContent unknown req
id unknown req