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.

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.

Props, events, and slots for each sub-component.

Props

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.

Props

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.

Props

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.

Props

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.