Preview Updated 2026-05-10

BarChart

Single-series vertical bar chart.

Basic usage

Data is passed in via props and rendered as plain SVG — no third-party charting library. Colors come from the --viz-1..8 tokens and are color-blind friendly.

src/App.vue vue

<CfBarChart ... />

src/App.tsx tsx

<CfBarChart ... />

Color

colorIndex 0..7 selects --viz-1..8 directly.

src/App.vue vue

<CfBarChart :data="data" :color-index="0" />
<CfBarChart :data="data" :color-index="3" />

src/App.tsx tsx

<CfBarChart data={data} colorIndex={0} />
<CfBarChart data={data} colorIndex={3} />

Horizontal layout

Use orientation="horizontal" for rankings, comparisons, or longer category labels.

src/App.vue vue

<CfBarChart :data="data" :labels="labels" orientation="horizontal" />

src/App.tsx tsx

<CfBarChart data={data} labels={labels} orientation="horizontal" />

API

Prop	Type	Default	Description
`data`	`number[]`	`—`	Bar heights
`labels`	`string[]`	`—`	x-axis labels
`colorIndex`	`0..7`	`0`
`orientation`	`'vertical' \| 'horizontal'`	`'vertical'`	Bar direction
`width / height / showGrid / showLabels`	“	“