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

<script setup lang="ts">
import { CfStackedBar100 } from '@chufix-design/vue';
const segments = [
  { name: 'Chrome', value: 65 },
  { name: 'Safari', value: 18 },
  { name: 'Firefox', value: 9 },
  { name: 'Edge', value: 5 },
  { name: 'Other', value: 3 },
];
</script>
<template>
  <CfStackedBar100 :segments="segments" />
</template>

<script setup>
import { CfStackedBar100 } from '@chufix-design/vue';
const segments = [
  { name: 'Chrome', value: 65 },
  { name: 'Safari', value: 18 },
  { name: 'Firefox', value: 9 },
  { name: 'Edge', value: 5 },
  { name: 'Other', value: 3 },
];
</script>
<template>
  <CfStackedBar100 :segments="segments" />
</template>

import { CfStackedBar100 } from '@chufix-design/react';

export default function Demo() {
  const segments = [
    { name: 'Chrome', value: 65 },
    { name: 'Safari', value: 18 },
    { name: 'Firefox', value: 9 },
    { name: 'Edge', value: 5 },
    { name: 'Other', value: 3 },
  ];
  return (
    <>
      <CfStackedBar100 segments={segments} />
    </>
  );
}

import { CfStackedBar100 } from '@chufix-design/react';

export default function Demo() {
  const segments = [
    { name: 'Chrome', value: 65 },
    { name: 'Safari', value: 18 },
    { name: 'Firefox', value: 9 },
    { name: 'Edge', value: 5 },
    { name: 'Other', value: 3 },
  ];
  return (
    <>
      <CfStackedBar100 segments={segments} />
    </>
  );
}

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

<script setup lang="ts">
import { CfStackedBar100 } from '@chufix-design/vue';
const browsers2024 = [
  { name: 'Chrome', value: 65 },
  { name: 'Safari', value: 18 },
  { name: 'Firefox', value: 9 },
  { name: 'Edge', value: 5 },
  { name: 'Other', value: 3 },
];
const browsers2025 = [
  { name: 'Chrome', value: 62 },
  { name: 'Safari', value: 20 },
  { name: 'Firefox', value: 7 },
  { name: 'Edge', value: 8 },
  { name: 'Other', value: 3 },
];
</script>
<template>
  <div style="display: flex; flex-direction: column; gap: 14px;">
    <div>
      <div style="font-size: 12px; color: var(--fg-2); margin-bottom: 4px;">2024 浏览器份额</div>
      <CfStackedBar100 :segments="browsers2024" />
    </div>
    <div>
      <div style="font-size: 12px; color: var(--fg-2); margin-bottom: 4px;">2025 浏览器份额</div>
      <CfStackedBar100 :segments="browsers2025" />
    </div>
  </div>
</template>

<script setup>
import { CfStackedBar100 } from '@chufix-design/vue';
const browsers2024 = [
  { name: 'Chrome', value: 65 },
  { name: 'Safari', value: 18 },
  { name: 'Firefox', value: 9 },
  { name: 'Edge', value: 5 },
  { name: 'Other', value: 3 },
];
const browsers2025 = [
  { name: 'Chrome', value: 62 },
  { name: 'Safari', value: 20 },
  { name: 'Firefox', value: 7 },
  { name: 'Edge', value: 8 },
  { name: 'Other', value: 3 },
];
</script>
<template>
  <div style="display: flex; flex-direction: column; gap: 14px;">
    <div>
      <div style="font-size: 12px; color: var(--fg-2); margin-bottom: 4px;">2024 浏览器份额</div>
      <CfStackedBar100 :segments="browsers2024" />
    </div>
    <div>
      <div style="font-size: 12px; color: var(--fg-2); margin-bottom: 4px;">2025 浏览器份额</div>
      <CfStackedBar100 :segments="browsers2025" />
    </div>
  </div>
</template>

import { CfStackedBar100 } from '@chufix-design/react';

export default function Demo() {
  const browsers2024 = [
    { name: 'Chrome', value: 65 },
    { name: 'Safari', value: 18 },
    { name: 'Firefox', value: 9 },
    { name: 'Edge', value: 5 },
    { name: 'Other', value: 3 },
  ];
  const browsers2025 = [
    { name: 'Chrome', value: 62 },
    { name: 'Safari', value: 20 },
    { name: 'Firefox', value: 7 },
    { name: 'Edge', value: 8 },
    { name: 'Other', value: 3 },
  ];
  return (
    <>
      <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          <div>
            <div style={{ fontSize: 12, color: "var(--fg-2)", marginBottom: 4 }}>2024 浏览器份额</div>
            <CfStackedBar100 segments={browsers2024} />
          </div>
          <div>
            <div style={{ fontSize: 12, color: "var(--fg-2)", marginBottom: 4 }}>2025 浏览器份额</div>
            <CfStackedBar100 segments={browsers2025} />
          </div>
        </div>
    </>
  );
}

import { CfStackedBar100 } from '@chufix-design/react';

export default function Demo() {
  const browsers2024 = [
    { name: 'Chrome', value: 65 },
    { name: 'Safari', value: 18 },
    { name: 'Firefox', value: 9 },
    { name: 'Edge', value: 5 },
    { name: 'Other', value: 3 },
  ];
  const browsers2025 = [
    { name: 'Chrome', value: 62 },
    { name: 'Safari', value: 20 },
    { name: 'Firefox', value: 7 },
    { name: 'Edge', value: 8 },
    { name: 'Other', value: 3 },
  ];
  return (
    <>
      <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          <div>
            <div style={{ fontSize: 12, color: "var(--fg-2)", marginBottom: 4 }}>2024 浏览器份额</div>
            <CfStackedBar100 segments={browsers2024} />
          </div>
          <div>
            <div style={{ fontSize: 12, color: "var(--fg-2)", marginBottom: 4 }}>2025 浏览器份额</div>
            <CfStackedBar100 segments={browsers2025} />
          </div>
        </div>
    </>
  );
}

API

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