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

<script setup lang="ts">
import { CfBarChart } from '@chufix-design/vue';
const data = [42, 68, 35, 91, 57, 78, 23, 64, 49];
const labels = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun','Mon','Tue'];
</script>
<template>
  <CfBarChart :data="data" :labels="labels" />
</template>

<script setup>
import { CfBarChart } from '@chufix-design/vue';
const data = [42, 68, 35, 91, 57, 78, 23, 64, 49];
const labels = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun','Mon','Tue'];
</script>
<template>
  <CfBarChart :data="data" :labels="labels" />
</template>

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

export default function Demo() {
  const data = [42, 68, 35, 91, 57, 78, 23, 64, 49];
  const labels = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun','Mon','Tue'];
  return (
    <>
      <CfBarChart data={data} labels={labels} />
    </>
  );
}

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

export default function Demo() {
  const data = [42, 68, 35, 91, 57, 78, 23, 64, 49];
  const labels = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun','Mon','Tue'];
  return (
    <>
      <CfBarChart data={data} labels={labels} />
    </>
  );
}

Color

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

背景

src/App.vue

<script setup lang="ts">
import { CfBarChart } from '@chufix-design/vue';
const data = [42, 68, 35, 91, 57, 78, 23, 64];
const labels = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun','Mon'];
</script>
<template>
  <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
    <CfBarChart :data="data" :labels="labels" :color-index="0" :height="180" />
    <CfBarChart :data="data" :labels="labels" :color-index="2" :height="180" />
    <CfBarChart :data="data" :labels="labels" :color-index="3" :height="180" />
    <CfBarChart :data="data" :labels="labels" :color-index="5" :height="180" />
  </div>
</template>

<script setup>
import { CfBarChart } from '@chufix-design/vue';
const data = [42, 68, 35, 91, 57, 78, 23, 64];
const labels = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun','Mon'];
</script>
<template>
  <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
    <CfBarChart :data="data" :labels="labels" :color-index="0" :height="180" />
    <CfBarChart :data="data" :labels="labels" :color-index="2" :height="180" />
    <CfBarChart :data="data" :labels="labels" :color-index="3" :height="180" />
    <CfBarChart :data="data" :labels="labels" :color-index="5" :height="180" />
  </div>
</template>

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

export default function Demo() {
  const data = [42, 68, 35, 91, 57, 78, 23, 64];
  return (
    <>
      <CfBarChart data={data} colorIndex={0} />
      <CfBarChart data={data} colorIndex={3} />
    </>
  );
}

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

export default function Demo() {
  const data = [42, 68, 35, 91, 57, 78, 23, 64];
  return (
    <>
      <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

<script setup lang="ts">
import { CfBarChart } from '@chufix-design/vue';

const data = [42, 68, 35, 91, 57, 78];
const labels = ['API', 'Web', 'DB', 'Cache', 'Queue', 'Worker'];
</script>
<template>
  <CfBarChart :data="data" :labels="labels" orientation="horizontal" />
</template>

<script setup>
import { CfBarChart } from '@chufix-design/vue';

const data = [42, 68, 35, 91, 57, 78];
const labels = ['API', 'Web', 'DB', 'Cache', 'Queue', 'Worker'];
</script>
<template>
  <CfBarChart :data="data" :labels="labels" orientation="horizontal" />
</template>

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

export default function Demo() {
  const data = [42, 68, 35, 91, 57, 78];
  const labels = ['API', 'Web', 'DB', 'Cache', 'Queue', 'Worker'];
  return (
    <>
      <CfBarChart data={data} labels={labels} orientation="horizontal" />
    </>
  );
}

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

export default function Demo() {
  const data = [42, 68, 35, 91, 57, 78];
  const labels = ['API', 'Web', 'DB', 'Cache', 'Queue', 'Worker'];
  return (
    <>
      <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`	“	“