Line Chart

Multi-series time series with annotations, dash patterns for print/colorblind support, and full keyboard navigation. The most commonly used chart type in newsroom graphics.

Multi-Series with Annotation

Unemployment rate, 2020–2024

Quarterly, seasonally adjusted

Single Series with Data Points

US unemployment rate

2020–2024

Colorblind-Safe Mode

Unemployment rate (colorblind palette)

Usage

<script>
  import { LineChart } from '@graphics-templates/svelte';
</script>

<LineChart
  data={data}
  title="Unemployment rate"
  subtitle="2020–2024"
  sourceLabel="Bureau of Labor Statistics"
  curve="monotone"
  annotations={[{ date: '2020-04-01', label: 'COVID peak' }]}
/>

Props

dataTimeSeriesRow[]required

titlestringrequired

subtitlestring—

sourceLabelstring—

curve'linear' | 'monotone' | 'step' | 'basis''monotone'

palettePaletteName | string[]'newsroom'

colorMode'default' | 'colorblind' | 'print' | 'highcontrast'auto-detect

showPointsbooleanfalse

showGridbooleantrue

showLegendbooleanauto (true if multi-series)

showTablebooleantrue

annotationsAnnotation[][]

animatedbooleanauto (respects prefers-reduced-motion)

xKey / yKeystring'date' / 'value'

seriesKeystring'series'

Data Shape

interface TimeSeriesRow {
  date: Date | string;   // ISO string or Date object
  value: number;
  series?: string;       // for multi-series grouping
}