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.

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

import { ChartArea, ChartAreaInteractive } from "@/components/ui/chart";

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.

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.

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.