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
Props, events, and slots for each sub-component.
ChartBar
Props
| 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
Props
| 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
Props
| 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. |
Events
| Event | Description |
|---|---|
| update:active | Fires with the hovered bar's value (or null on leave). |
ChartBarInteractive
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 category axis. |
| title | string | "" | Optional header title. |
| description | string | "" | Optional header description. |