Preview Updated 2026-05-10

AreaChart

Area chart with stacked mode and smooth-curve support.

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 { CfAreaChart } from '@chufix-design/vue';
const series = [
  { name: 'GET', data: [10, 14, 12, 18, 22, 20, 26, 32, 28, 35, 30, 40] },
  { name: 'POST', data: [3, 5, 4, 6, 8, 7, 10, 12, 11, 14, 13, 16] },
  { name: 'PUT', data: [1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7] },
];
</script>
<template>
  <CfAreaChart :series="series" stacked smooth />
</template>

<script setup>
import { CfAreaChart } from '@chufix-design/vue';
const series = [
  { name: 'GET', data: [10, 14, 12, 18, 22, 20, 26, 32, 28, 35, 30, 40] },
  { name: 'POST', data: [3, 5, 4, 6, 8, 7, 10, 12, 11, 14, 13, 16] },
  { name: 'PUT', data: [1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7] },
];
</script>
<template>
  <CfAreaChart :series="series" stacked smooth />
</template>

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

export default function Demo() {
  const series = [
    { name: 'GET', data: [10, 14, 12, 18, 22, 20, 26, 32, 28, 35, 30, 40] },
    { name: 'POST', data: [3, 5, 4, 6, 8, 7, 10, 12, 11, 14, 13, 16] },
    { name: 'PUT', data: [1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7] },
  ];
  return (
    <>
      <CfAreaChart series={series} stacked smooth />
    </>
  );
}

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

export default function Demo() {
  const series = [
    { name: 'GET', data: [10, 14, 12, 18, 22, 20, 26, 32, 28, 35, 30, 40] },
    { name: 'POST', data: [3, 5, 4, 6, 8, 7, 10, 12, 11, 14, 13, 16] },
    { name: 'PUT', data: [1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7] },
  ];
  return (
    <>
      <CfAreaChart series={series} stacked smooth />
    </>
  );
}

Stacked mode

stacked = true stacks the series cumulatively (each value is the sum of all previous series), which is suitable for showing composition; the default false overlays the series for trend comparison.

背景

stacked = false（重叠）

stacked = true

src/App.vue

<script setup lang="ts">
import { CfAreaChart } from '@chufix-design/vue';
const series = [
  { name: 'GET', data: [10, 14, 12, 18, 22, 20, 26, 32, 28, 35, 30, 40] },
  { name: 'POST', data: [3, 5, 4, 6, 8, 7, 10, 12, 11, 14, 13, 16] },
  { name: 'PUT', data: [1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7] },
  { name: 'DELETE', data: [0, 1, 0, 2, 1, 1, 2, 3, 2, 3, 4, 3] },
];
</script>
<template>
  <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
    <div>
      <div style="font-size: 11px; color: var(--fg-3); margin-bottom: 4px; font-family: var(--font-mono);">stacked = false（重叠）</div>
      <CfAreaChart :series="series" :height="180" smooth />
    </div>
    <div>
      <div style="font-size: 11px; color: var(--fg-3); margin-bottom: 4px; font-family: var(--font-mono);">stacked = true</div>
      <CfAreaChart :series="series" :height="180" smooth stacked />
    </div>
  </div>
</template>

<script setup>
import { CfAreaChart } from '@chufix-design/vue';
const series = [
  { name: 'GET', data: [10, 14, 12, 18, 22, 20, 26, 32, 28, 35, 30, 40] },
  { name: 'POST', data: [3, 5, 4, 6, 8, 7, 10, 12, 11, 14, 13, 16] },
  { name: 'PUT', data: [1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7] },
  { name: 'DELETE', data: [0, 1, 0, 2, 1, 1, 2, 3, 2, 3, 4, 3] },
];
</script>
<template>
  <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
    <div>
      <div style="font-size: 11px; color: var(--fg-3); margin-bottom: 4px; font-family: var(--font-mono);">stacked = false（重叠）</div>
      <CfAreaChart :series="series" :height="180" smooth />
    </div>
    <div>
      <div style="font-size: 11px; color: var(--fg-3); margin-bottom: 4px; font-family: var(--font-mono);">stacked = true</div>
      <CfAreaChart :series="series" :height="180" smooth stacked />
    </div>
  </div>
</template>

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

export default function Demo() {
  const series = [
    { name: 'GET', data: [10, 14, 12, 18, 22, 20, 26, 32, 28, 35, 30, 40] },
    { name: 'POST', data: [3, 5, 4, 6, 8, 7, 10, 12, 11, 14, 13, 16] },
    { name: 'PUT', data: [1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7] },
    { name: 'DELETE', data: [0, 1, 0, 2, 1, 1, 2, 3, 2, 3, 4, 3] },
  ];
  return (
    <>
      <CfAreaChart series={series} stacked smooth />
    </>
  );
}

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

export default function Demo() {
  const series = [
    { name: 'GET', data: [10, 14, 12, 18, 22, 20, 26, 32, 28, 35, 30, 40] },
    { name: 'POST', data: [3, 5, 4, 6, 8, 7, 10, 12, 11, 14, 13, 16] },
    { name: 'PUT', data: [1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7] },
    { name: 'DELETE', data: [0, 1, 0, 2, 1, 1, 2, 3, 2, 3, 4, 3] },
  ];
  return (
    <>
      <CfAreaChart series={series} stacked smooth />
    </>
  );
}

API

Prop	Type	Default	Description
`series`	`AreaSeries[]`	`—`	{ name?, data: number[] }[]
`stacked`	`boolean`	`false`	Stacked mode
`smooth`	`boolean`	`false`	Smooth curves
`width / height / showGrid / showLabels`	“	“	Same as LineChart