Preview Updated 2026-05-10

LineChart

Multi-series line chart with smooth curves, gridlines, and x/y axis labels.

Basic usage

Data is passed via props; pure SVG rendering with no third-party chart library. Colors come from the --viz-1..8 tokens and are color-blind friendly.

背景

<script setup lang="ts">
import { CfLineChart } from '@chufix-design/vue';
const series = [
  { name: 'CPU', data: [20, 35, 30, 50, 65, 45, 60, 75, 65, 80, 70, 85] },
  { name: 'Memory', data: [40, 38, 50, 55, 60, 58, 62, 68, 72, 70, 75, 78] },
];
const labels = ['00','02','04','06','08','10','12','14','16','18','20','22'];
</script>

<template>
  <CfLineChart :series="series" :labels="labels" smooth />
</template>

<CfLineChart ... />

Smooth curves

smooth = true uses Catmull-Rom-style cubic Bezier curves with a tension of 0.2 from neighbor differences, without overshooting (no “half-circle” bulges at corners).

背景

smooth = false

smooth = true（Catmull-Rom）

<script setup lang="ts">
import { CfLineChart } from '@chufix-design/vue';
const series = [{ name: 'CPU', data: [20, 35, 30, 50, 65, 45, 60, 75, 65, 80, 70, 85] }];
</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);">smooth = false</div>
      <CfLineChart :series="series" :height="180" />
    </div>
    <div>
      <div style="font-size: 11px; color: var(--fg-3); margin-bottom: 4px; font-family: var(--font-mono);">smooth = true（Catmull-Rom）</div>
      <CfLineChart :series="series" :height="180" smooth />
    </div>
  </div>
</template>

<CfLineChart series={series} smooth />

Multiple series

Up to 8 simultaneous series; colors cycle through --viz-1..8.

背景

<script setup lang="ts">
import { CfLineChart } from '@chufix-design/vue';
const series = [
  { name: 'CPU', data: [20, 35, 30, 50, 65, 45, 60, 75, 65, 80, 70, 85] },
  { name: 'Memory', data: [40, 38, 50, 55, 60, 58, 62, 68, 72, 70, 75, 78] },
  { name: 'Disk IO', data: [10, 12, 14, 18, 22, 25, 28, 32, 30, 35, 38, 42] },
  { name: 'Network', data: [5, 8, 10, 9, 12, 14, 18, 22, 19, 25, 28, 30] },
];
</script>

<template>
  <CfLineChart :series="series" smooth />
</template>

<CfLineChart series={series} smooth />

API

Prop	Type	Default	Description
`series`	`LineSeries[]`	`—`	{ name?, data: number[] }[]
`labels`	`string[]`	`auto 0..n-1`	x-axis labels
`width / height`	`number`	`480 / 240`
`smooth`	`boolean`	`false`	Smooth curves
`showGrid / showLabels`	`boolean`	`true`
`yLabelFn`	`(v) => string`	`v.toFixed(0)`	y-axis label formatter