Line Chart

Smooth or sharp line chart with optional area fill — ideal for time-series and trend data.

Import

ts 
import LineChart from '$lib/components/LineChart.svelte';

Usage

Enable area: true on individual series to add a gradient fill beneath the line.

svelte 
<script lang="ts">
  const labels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
  const series = [
    { label: 'Views', data: [1200, 1900, 1500, 2100, 1800, 2400, 2200], area: true },
    { label: 'Likes', data: [340, 520, 410, 680, 590, 820, 760] }
  ];
</script>

<LineChart {labels} {series} />

Lines Only

Omit area from series to show clean lines without fill.

svelte 
<!-- area: true omitted for each series -->
<LineChart {labels} series={seriesNoArea} />

Sharp Lines

Set smooth=false for angular, data-accurate lines without bezier interpolation.

svelte 
<!-- smooth={false} for angular lines -->
<LineChart {labels} series={seriesSharp} :smooth="false" />

API Reference

PropTypeDefaultDescription
labels string[]—X-axis labels, one per data point.
series LineSeries[]—Each series: { label, data: number[], color?, area?: boolean }. Set area: true to fill beneath the line.
height number260Chart height in pixels.
smooth booleantrueUse smooth bezier curves. Set false for straight angular lines.
grid booleantrueShow horizontal grid lines.
class string—Extra CSS classes applied to the root element.