Chart Area

Area charts built on unovis-vue. One ChartArea handles single or multi-series data, with optional gradient fills and stacking.

Default

A single-series gradient area.

Multiple overlapping series, each with its own gradient fill.

Series stacked on top of each other (stacked prop).

Solid multi-series fills with both axes labelled.

Add a legend and per-series icons via the config.

Filter the visible range with a select.

A gradient area over a dashed horizontal grid.

Stacked gradient areas with per-series dashed outlines.

A step curve filled with a dotted SVG pattern.

A glowing line and dot markers via SVG filters.

Stacked areas filled with crosshatch SVG patterns.

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

Props

Prop	Type	Default	Description
data	Record<string, any>[]	—	Series rows.
config	ChartConfig	—	Map of key → { label, color, icon }.
dataKey	string	"value"	Single-series row key.
dataKeys	string[]	null	Multi-series row keys (overrides dataKey).
xKey	string	"date"	Row key for the x value.
gradient	boolean	false	Fill areas with a gradient instead of a solid color.
stacked	boolean	false	Stack multi-series areas.
legend	boolean	false	Render a legend below the chart.
numXTicks	number	6	Approximate x-axis tick count.
curveType	string	"natural"	Curve interpolation (natural, linear, step, stepAfter, ...).
svgDefs	string	null	Raw SVG <defs> string; overrides the auto gradient when set.
areaFill	string \| Record<string, string>	null	Override the area fill; string or per-key map (url(#pattern)).
fillOpacity	number	null	Fill opacity (defaults adapt to gradient/stacked).
grid	boolean	false	Draw horizontal dashed grid lines.
dashedKeys	string[]	[]	Series keys whose line is rendered dashed.
strokeWidthByKey	Record<string, number>	null	Per-series line width.
lineFilter	string	null	SVG filter url applied to the line/area (e.g. a glow).
dots	boolean	false	Render point markers at each datum.
dotFilter	string	null	SVG filter url applied to the dots.
hideYAxis	boolean	false	Hide the y axis.
xTickFormatter	(d) => string	null	Custom x-axis tick formatter.
yTickFormatter	(d) => string	null	Custom y-axis tick formatter.

Props

Prop	Type	Default	Description
data	Record<string, any>[]	—	Series rows (with a date key).
config	ChartConfig	—	Theming map.
dataKeys	string[]	null	Series to plot (defaults to coloured config keys).
xKey	string	"date"	Row key for the x value.
title	string	""	Optional header title.
description	string	""	Optional header description.