vue-charts Bar Chart
Bar charts compare values across categories using rectangular bars.
Simple Bar Chart
A basic bar chart with two data series.
Stacked Bar Chart
Use stack-id to stack bars within the same category.
When stacked values can be negative, set stack-offset="sign" on the chart. The default 'none' (the same as Recharts) adds the values as one running total, so a negative bar is drawn over the positive bar below it. With 'sign', positive values stack up from zero and negative values stack down from zero.
<BarChart :data="data" stack-offset="sign">
<Bar data-key="income" stack-id="flow" />
<Bar data-key="costs" stack-id="flow" />
</BarChart>
Horizontal Bar Chart
Set layout="vertical" on <BarChart> for horizontal bars.
Bar Chart with Labels
Place <LabelList> as a child inside <Bar>:
Negative Values
Use <Cell> to color positive and negative bars differently.
BarChart props
<BarChart> takes the chart container props, including bar sizing.
Bar props
| Prop | Type | Default | Description |
|---|---|---|---|
data-key | row path or accessor | required | Field with the value |
fill | string | series palette | Bar fill |
stroke, stroke-width | string, number | — | Bar outline |
stack-id | string | number | — | Bars with the same id stack |
bar-size | number | string | the chart's value | Bar width |
max-bar-size | number | the chart's value | Upper limit of the bar width |
min-point-size | number | function | 0 | Minimum bar length, so small values stay visible |
radius | number | [tl, tr, br, bl] | — | Corner radius |
background | boolean | object | false | Draw a background bar across the full range |
active-bar | boolean | object | false | Highlight the active bar; an object sets its attributes |
active-index | number | null | — | Active bar, for v-model:active-index |
label | boolean | object | false | Show a value label on every bar |
data | Array | the chart's data | Rows for this series only |
x-axis-id, y-axis-id | string | number | 0 | Axes this series uses |
name | string | number | — | Name in the legend and tooltip |
unit | string | number | — | Unit after tooltip values |
legend-type | LegendType | 'rect' | Legend icon |
tooltip-type | 'none' | — | Set 'none' to leave the series out of the tooltip |
hide | boolean | false | Hide the series |
class | string | — | Class on the series layer |
is-animation-active | boolean | the chart's value | Animate this series |
transition | ChartTransition | the chart's value | Timing and easing of data changes |
Events: @click, @mouseenter, @mouseleave with (bar, index, event), update:activeIndex, and @animation-start, @animation-end.
Bar slots
| Slot | Props | Description |
|---|---|---|
#shape | BarRectangleItem with numeric x, y, width, height | Replace a bar |
#activeBar | same as #shape | Replace the active bar |
#label | LabelListSlotProps | Replace a bar label |
| default | — | <Cell> for per-bar colors, <LabelList>, <ErrorBar> |