LINE CHART

SVG line chart with multi-series support, animated draw-on effect, optional area fill, grid lines, and an automatic legend.

PREVIEW

ISS ALTITUDE TRACK // KM

INSTALLATION

BASH

npx shadcn@latest add @scificn/line-chart

USAGE

TSX

import { LineChart, type LineChartSeries } from '@/ui/line-chart'

// Single series
<LineChart
  series={[{ id: 'power', label: 'POWER', data: [80, 85, 78, 90, 88] }]}
  labels={['MON', 'TUE', 'WED', 'THU', 'FRI']}
  title="POWER OUTPUT"
  variant="ACTIVE"
  showArea
/>

// Multi-series
const series: LineChartSeries[] = [
  { id: 'reactor', label: 'REACTOR', data: [72, 78, 85, 82, 89] },
  { id: 'shields', label: 'SHIELDS', data: [95, 88, 82, 87, 80] },
]

<LineChart
  series={series}
  labels={['T+0', 'T+5', 'T+10', 'T+15', 'T+20']}
  title="SYSTEM LOAD"
  showLegend
/>

MULTI-SERIES

SYSTEM LOAD // MULTI-SERIES

Reactor

Shields

Engines

VARIANTS

variant="ACTIVE"

variant="WARNING"

variant="CRITICAL"

variant="DEFAULT"

OPTIONS

showDots=false showArea=true

showGrid=false showDots=true

PROPS

PROP	TYPE	DEFAULT	DESCRIPTION
series	LineChartSeries[]	—	Array of data series. Each has id, label, data[], and optional variant.
labels	string[]	—	X-axis labels, same length as each series.data.
title	string	undefined	Optional header label.
height	number	160	Chart area height in px.
min	number	min(data)	Override y-axis minimum.
max	number	max(data)	Override y-axis maximum.
showDots	boolean	true	Show circles at data points.
showArea	boolean	false	Fill area under the line.
showGrid	boolean	true	Show horizontal grid lines.
showLegend	boolean	auto	Show legend. Defaults to true when series.length > 1.
animated	boolean	true	Animate the line drawing on mount.
className	string	—	Additional classes merged via cn().