LineChart

LineChart plots one or more series over time, with hover tooltips styled from tokens. Pass fill for an area chart.

Usage

import { LineChart } from "@sina-design-system/core";

<LineChart
  label="Balance over time"
  data={{ labels, datasets }}
  valueFormatter={(n) => `$${n.toLocaleString()}`}
  fill
/>

Examples

Area (fill) · axis labels · formatted values

Palette · 9 series wrap the fixed 8-slot order

Logarithmic scale

Props

Prop	Type	Default	Description
`label`	`string`	—	Required accessible name for the chart.
`data`	`ChartData`	—	Series and points (Chart.js shape).
`valueFormatter`	`(n: number) => string`	—	Formats tooltip and axis values. Keeps the chart domain-agnostic.
`fill`	`boolean`	`false`	Render as an area chart.

Accessibility

A "use client" component (canvas). The wrapper is role="img" with your label; keep a text summary nearby as the non-visual path. Animation is disabled under reduced motion.