Preview Updated 2026-05-10

100% stacked bar

Horizontal 100% stacked bar — well suited to share-of-total breakdowns.

Basic usage

Data is passed via props and rendered as pure SVG, with no third-party charting dependency. Colors are drawn from the --viz-1..8 tokens and are colorblind-friendly.

Chrome 65.0%
Safari 18.0%
Firefox 9.0%
Edge 5.0%
Other 3.0%

src/App.vue vue

<CfStackedBar100 ... />

src/App.tsx tsx

<CfStackedBar100 ... />

Trend comparison

Stacking bars from multiple years makes share migration easy to read.

2024 浏览器份额

Chrome 65.0%
Safari 18.0%
Firefox 9.0%
Edge 5.0%
Other 3.0%

2025 浏览器份额

Chrome 62.0%
Safari 20.0%
Firefox 7.0%
Edge 8.0%
Other 3.0%

src/App.vue vue

<CfStackedBar100 :segments="seg2024" />
<CfStackedBar100 :segments="seg2025" />

src/App.tsx tsx

<CfStackedBar100 segments={seg2024} />
<CfStackedBar100 segments={seg2025} />

API

Prop	Type	Default	Description
`segments`	`StackedBar100Series[]`	`—`	{ name, value, colorIndex? }[]
`height`	`number`	`24`
`showLegend`	`boolean`	`true`