LineChart

A line graph for displaying trends over time. Supports single and multiple data series with smooth curves, grid lines, and axis labels.

Features

Single and multiple data series support
Smooth curve rendering
Grid lines for reference
Axis labels and title
Legend display
Interactive points with click events
Responsive sizing
Accessible with ARIA labels

Examples

Single Series LineChart

Weekly Sales

Sales

<script>
  import { LineChart } from '$lib';

  const series = [
    {
      label: 'Sales',
      data: [10, 15, 12, 18, 22, 20, 25],
      color: '#3b82f6'
    }
  ];
  const labels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
</script>

<LineChart {series} {labels} title="Weekly Sales" width={600} height={300} />

Multiple Series LineChart

Product Comparison

Product A

Product B

<LineChart
  series={[
    { label: 'Product A', data: [10, 15, 12, 18, 22, 20, 25], color: '#3b82f6' },
    { label: 'Product B', data: [8, 12, 14, 16, 18, 22, 20], color: '#ef4444' }
  ]}
  labels={['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']}
  title="Product Comparison"
  yAxisLabel="Sales ($K)"
  showGrid={true}
  showLegend={true}
  width={600}
  height={300}
/>

Props

Prop	Type	Default	Description
`series`	`Series[]`	Required	Array of data series with label, data, and optional color
`labels`	`string[]`	Required	Array of x-axis labels
`title`	`string`	undefined	Chart title
`yAxisLabel`	`string`	undefined	Y-axis label
`showGrid`	`boolean`	true	Show grid lines
`showLegend`	`boolean`	true	Show legend
`width`	`number`	500	Chart width in pixels
`height`	`number`	300	Chart height in pixels

Events

Event	Detail	Description
`onpointclick`	`{ seriesIndex: number; pointIndex: number; value: number }`	Fired when a data point is clicked

Accessibility

SVG has proper ARIA role and label
Data points are keyboard accessible
Color contrast meets WCAG AA standards
Legend provides text alternative to colors
Grid lines aid in reading values

Best Practices

Use for showing trends over time
Limit to 3-4 series for clarity
Use distinct colors for each series
Include axis labels for context
Enable grid lines for easier value reading