Preview Updated 2026-05-10

Sparkline

Inline micro trend line, often used as the trend indicator on KPI cards.

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.

背景

上升 13下降 4平稳 6

src/App.vue

<script setup lang="ts">
import { CfSparkline } from '@chufix-design/vue';
const trendUp = [3, 5, 4, 7, 6, 9, 11, 10, 13];
const trendDown = [12, 11, 13, 9, 10, 7, 8, 5, 4];
const flat = [6, 6, 7, 6, 7, 6, 6, 7, 6];
</script>
<template>
  <div class="demo-row" style="align-items: center; gap: 24px;">
    <span>上升 <CfSparkline :data="trendUp" filled smooth :color-index="0" /> 13</span>
    <span>下降 <CfSparkline :data="trendDown" filled smooth :color-index="3" /> 4</span>
    <span>平稳 <CfSparkline :data="flat" :color-index="2" /> 6</span>
  </div>
</template>

<script setup>
import { CfSparkline } from '@chufix-design/vue';
const trendUp = [3, 5, 4, 7, 6, 9, 11, 10, 13];
const trendDown = [12, 11, 13, 9, 10, 7, 8, 5, 4];
const flat = [6, 6, 7, 6, 7, 6, 6, 7, 6];
</script>
<template>
  <div class="demo-row" style="align-items: center; gap: 24px;">
    <span>上升 <CfSparkline :data="trendUp" filled smooth :color-index="0" /> 13</span>
    <span>下降 <CfSparkline :data="trendDown" filled smooth :color-index="3" /> 4</span>
    <span>平稳 <CfSparkline :data="flat" :color-index="2" /> 6</span>
  </div>
</template>

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

export default function Demo() {
  const trendUp = [3, 5, 4, 7, 6, 9, 11, 10, 13];
  const trendDown = [12, 11, 13, 9, 10, 7, 8, 5, 4];
  const flat = [6, 6, 7, 6, 7, 6, 6, 7, 6];
  return (
    <>
      <div className="demo-row" style={{ alignItems: "center", gap: 24 }}>
          <span>上升 <CfSparkline data={trendUp} filled smooth colorIndex={0} /> 13</span>
          <span>下降 <CfSparkline data={trendDown} filled smooth colorIndex={3} /> 4</span>
          <span>平稳 <CfSparkline data={flat} colorIndex={2} /> 6</span>
        </div>
    </>
  );
}

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

export default function Demo() {
  const trendUp = [3, 5, 4, 7, 6, 9, 11, 10, 13];
  const trendDown = [12, 11, 13, 9, 10, 7, 8, 5, 4];
  const flat = [6, 6, 7, 6, 7, 6, 6, 7, 6];
  return (
    <>
      <div className="demo-row" style={{ alignItems: "center", gap: 24 }}>
          <span>上升 <CfSparkline data={trendUp} filled smooth colorIndex={0} /> 13</span>
          <span>下降 <CfSparkline data={trendDown} filled smooth colorIndex={3} /> 4</span>
          <span>平稳 <CfSparkline data={flat} colorIndex={2} /> 6</span>
        </div>
    </>
  );
}

8-color palette

colorIndex (0..7) picks any color in --viz-1..8 — colorblind-friendly and aligned with chart series colors.

背景

--viz-1 · indigo--viz-2 · amber--viz-3 · green--viz-4 · red--viz-5 · cyan--viz-6 · magenta--viz-7 · lime--viz-8 · azure

src/App.vue

<script setup lang="ts">
import { CfSparkline } from '@chufix-design/vue';
const data = Array.from({ length: 14 }, (_, i) => 5 + Math.sin(i / 2) * 4 + Math.random() * 2);
const labels = ['indigo', 'amber', 'green', 'red', 'cyan', 'magenta', 'lime', 'azure'];
</script>
<template>
  <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px;">
    <span v-for="(label, i) in labels" :key="i" style="display: inline-flex; align-items: center; gap: 8px;">
      <CfSparkline :data="data" :color-index="i" filled smooth :width="100" :height="22" />
      <span style="font-size: 12px; color: var(--fg-3); font-family: var(--font-mono);">--viz-{{ i + 1 }} · {{ label }}</span>
    </span>
  </div>
</template>

<script setup>
import { CfSparkline } from '@chufix-design/vue';
const data = Array.from({ length: 14 }, (_, i) => 5 + Math.sin(i / 2) * 4 + Math.random() * 2);
const labels = ['indigo', 'amber', 'green', 'red', 'cyan', 'magenta', 'lime', 'azure'];
</script>
<template>
  <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px;">
    <span v-for="(label, i) in labels" :key="i" style="display: inline-flex; align-items: center; gap: 8px;">
      <CfSparkline :data="data" :color-index="i" filled smooth :width="100" :height="22" />
      <span style="font-size: 12px; color: var(--fg-3); font-family: var(--font-mono);">--viz-{{ i + 1 }} · {{ label }}</span>
    </span>
  </div>
</template>

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

export default function Demo() {
  const data = Array.from({ length: 14 }, (_, i) => 5 + Math.sin(i / 2) * 4 + Math.random() * 2);
  return (
    <>
      <CfSparkline data={data} colorIndex={0} filled smooth />
      <CfSparkline data={data} colorIndex={3} filled smooth />
    </>
  );
}

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

export default function Demo() {
  const data = Array.from({ length: 14 }, (_, i) => 5 + Math.sin(i / 2) * 4 + Math.random() * 2);
  return (
    <>
      <CfSparkline data={data} colorIndex={0} filled smooth />
      <CfSparkline data={data} colorIndex={3} filled smooth />
    </>
  );
}

API

Prop	Type	Default	Description
`data`	`number[]`	`—`	Array of data points
`width / height`	`number`	`80 / 24`
`filled`	`boolean`	`false`	Show filled area
`smooth`	`boolean`	`false`	Smooth curve
`colorIndex`	`0..7`	`0`	Color index (—viz-{n+1})
`showDot`	`boolean`	`true`	Highlight the last point