Chart Line

Time-series line charts built on unovis-vue. Pass an array of rows plus a config that maps each series key to a label and color.

Default

A single-series line with a natural curve, gradient-free.

Import the parts you need from the component's folder.

import {
  ChartLineDefault,
  ChartLine,
  ChartLineLinear,
  ChartLineStep,
  ChartLineInteractive,
} from "@/components/ui/chart";

ChartLine overlays a dashed previous-period line and a gradient area fill for at-a-glance trends.

Straight segments between points (CurveType.Linear).

Stepped interpolation (CurveType.Step).

Toggle between series; totals update in the header.

Prop	Type	Default	Description
`data`	`Record<string, any>[]`	—	Series rows.
`config`	`ChartConfig`	—	Map of dataKey → { label, color }.
`dataKey`	`string`	`"value"`	Row key for the y value.
`xKey`	`string`	`"date"`	Row key for the x value.

Prop	Type	Default	Description
`data`	`Record<string, any>[]`	—	Series rows (each with a date key).
`config`	`ChartConfig`	—	Theming map.
`dataKey`	`string`	`"value"`	Row key for the y value.
`gradient`	`boolean`	`false`	Render a gradient area fill under the line.
`comparisonData`	`Record<string, any>[]`	`[]`	Previous-period rows overlaid as a dashed line.
`comparisonLabel`	`string`	`"Previous Period"`	Legend/tooltip label for the comparison series.
`yTickFormatter`	`(d) => string`	`null`	Custom y-axis tick formatter.

Prop	Type	Default	Description
`data`	`Record<string, any>[]`	—	Series rows.
`config`	`ChartConfig`	—	Theming map.
`dataKey`	`string`	`"value"`	Row key for the y value.
`xKey`	`string`	`"date"`	Row key for the x value.

Prop	Type	Default	Description
`data`	`Record<string, any>[]`	—	Series rows.
`config`	`ChartConfig`	—	Theming map; series with a color become toggles.
`dataKeys`	`string[]`	`null`	Override which series are selectable.
`xKey`	`string`	`"date"`	Row key for the x value.
`title`	`string`	`""`	Optional header title.
`description`	`string`	`""`	Optional header description.