Bar Chart ^0.1.17

Versatile bar / column chart. Supports single series, grouped, stacked, percent-stacked, horizontal orientation, negative values, references, value labels, and custom colors.

Basic

<VxBarChart :data="[12, 19, 14, 24, 30, 22, 35, 40, 38, 52, 48, 60]" :labels="months" />

Grouped

Compare multiple series side-by-side.

Revenue

Cost

<VxBarChart :data="series" :labels="months" legend />

Stacked

Organic

Paid

Social

Referral

<VxBarChart :data="series" :labels="labels" stacked legend />

Percent stacked

Normalize each category to 100% — great for composition analysis.

Organic

Paid

Social

Referral

<VxBarChart :data="series" :labels="labels" percentStacked legend />

Horizontal

Swap the axes — useful for long category labels.

<VxBarChart
  :data="[330, 1400, 125, 83, 1380, 67, 65, 59]"
  :labels="['USA','China','Japan','Germany','India','UK','France','Italy']"
  orientation="horizontal"
  color="#22c55e"
  valueLabels
/>

Horizontal grouped

2023

2024

2025

<VxBarChart :data="series" :labels="quarters" orientation="horizontal" legend />

Negative values

Negative bars extend below zero automatically.

<VxBarChart :data="[18, 24, -8, 32, -12, 28, 42, 38, -6, 52, 48, 60]" :labels="months" valueLabels />

Reference lines

<VxBarChart
  :data="data"
  :labels="labels"
  :references="[
    { value: 50, label: 'Target',  color: '#22c55e' },
    { value: 20, label: 'Minimum', color: '#ef4444' },
  ]"
/>

Value labels

<VxBarChart :data="data" :labels="months" valueLabels />

Custom colors

Pass a colors array to override the palette for multi-series charts.

Organic

Paid

Social

Referral

<VxBarChart
  :data="series"
  :labels="labels"
  stacked
  legend
  :colors="['#6366f1', '#22c55e', '#f59e0b', '#ef4444']"
/>

Live updating

Values are smoothly tweened when the data changes.

<VxBarChart :data="liveData" :labels="labels" valueLabels />

Interactive playground

ColorGap0.30Radius4

Dashboard card

Monthly revenue

Last 12 months · growing 34% YoY

Revenue

Cost

Props

Prop	Type	Default	Description
data	number[] | BarChartSeries[]	[]	Single array or multi-series
labels	(string | number)[]	[]	Category labels
orientation	'vertical' | 'horizontal'	'vertical'	Bar direction
stacked	boolean	false	Stack multi-series vertically
percentStacked	boolean	false	Normalize stacks to 100%
height	number	280	SVG height in px
barGap	number	0.3	Gap between groups (0–1)
groupGap	number	0.15	Gap inside a group (0–1)
radius	number	4	Corner radius
color	string	—	Single-series fill color
colors	string[]	[]	Multi-series palette
references	BarChartReference[]	[]	Horizontal guide lines
valueLabels	boolean	false	Show numeric label at bar end
legend	boolean	false	Show legend (multi-series)
tooltip	boolean	true	Show tooltip on hover
grid	boolean	true	Show grid lines
axis	boolean	true	Show axis labels
animate	boolean	true	Tween value changes
animationDuration	number	700	Tween length in ms
min / max	number	—	Force value-axis bounds
formatValue	(v: number) => string	smart	Format axis / tooltip values

Events

Event	Payload
hover	{ seriesIndex, categoryIndex, value }
click	{ seriesIndex, categoryIndex, value }