Chart Bar

Bar charts built on unovis-vue. One ChartBar covers vertical/horizontal orientation, single or grouped series, and stacking.

Default

A single-series vertical bar chart.

Horizontal

Flip the orientation with the horizontal prop.

Multiple

Grouped bars for multiple series.

Stacked

Stack multiple series with the stacked prop.

Interactive

Toggle between series; totals update in the header.

Basic (card)

A single-series bar in a card with a header, trend badge, and grid.

Diagonal stripe pattern

Frame a bar with a diagonal stripe SVG pattern via svgDefs + barFill.

Striped and solid

Mix a stripe-filled series with a solid one using a per-key barFill map.

Dotted pattern

An elegant dotted SVG pattern fill with a matching stroke.

Dotted and solid

Compare a dotted series against a solid one.

Gradient

A soft vertical gradient fill via a linearGradient def.

Duotone gradient

A 50/50 duotone fill using a hard-stop horizontal gradient.

3D gradient

An isometric 3D bar with gradient faces, rendered by ChartBar3D.

3D isometric

A solid isometric 3D bar with shaded faces.

Animated

Bars collapse to a tick and expand on hover, surfacing the value.

Vertical (horizontal layout)

A horizontal, grouped bar chart with category labels on the left.

API Reference

ChartBar

Prop	Type	Default	Description
`data`	`Record<string, any>[]`	—	Series rows.
`config`	`ChartConfig`	—	Map of key → { label, color }.
`dataKey`	`string`	`"value"`	Single-series row key.
`dataKeys`	`string[]`	`null`	Multi-series row keys (overrides dataKey).
`xKey`	`string`	`"date"`	Row key for the category axis.
`horizontal`	`boolean`	`false`	Render horizontal bars.
`stacked`	`boolean`	`false`	Stack multi-series bars.
`legend`	`boolean`	`false`	Render a legend below the chart.
`roundedCorners`	`number`	`6`	Bar corner radius.
`barPadding`	`number`	`0.2`	Fraction of each band left empty between bars.
`grid`	`boolean`	`false`	Draw horizontal grid lines behind the bars.
`svgDefs`	`string`	`null`	Raw SVG <defs> string (patterns/gradients/filters) injected into the chart.
`barFill`	`string \| Record<string, string>`	`null`	Override the fill; a string for every series or a per-key map (e.g. url(#pattern)).
`barStroke`	`string`	`null`	Outline color drawn around every bar.
`barStrokeWidth`	`number`	`1`	Outline width.
`xTickFormatter`	`(d) => string`	`null`	Custom category tick formatter.
`yTickFormatter`	`(d) => string`	`null`	Custom value tick formatter.

ChartBar3D

Prop	Type	Default	Description
`data`	`Record<string, any>[]`	—	Series rows.
`config`	`ChartConfig`	—	Map of key → { label, color }.
`xKey`	`string`	`"month"`	Row key for the category axis.
`valueKey`	`string`	`"value"`	Row key for the bar value.
`mode`	`"gradient" \| "solid"`	`"gradient"`	Gradient faces or a single color with shaded faces.
`colorOverride`	`string`	`null`	Override the bar color.
`barCategoryGap`	`number`	`0.2`	Fraction of each band left as gap.

ChartBarAnimated

Prop	Type	Default	Description
`data`	`Record<string, any>[]`	—	Series rows.
`config`	`ChartConfig`	—	Map of key → { label, color }.
`xKey`	`string`	`"month"`	Row key for the category axis.
`valueKey`	`string`	`"value"`	Row key for the bar value.
`colorOverride`	`string`	`null`	Override the bar color.

Event	Description
`update:active`	Fires with the hovered bar's value (or null on leave).

ChartBarInteractive

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 category axis.
`title`	`string`	`""`	Optional header title.
`description`	`string`	`""`	Optional header description.

Chart Area Chart Composed