Preview Updated 2026-05-10

ChartToolbar

Chart header bar — title + legend toggles + zoom / export / refresh buttons.

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.

系统资源

last 24h · 1m sampling

CPU
Memory
Disk

图表区

src/App.vue vue

<CfChartToolbar ... />

src/App.tsx tsx

<CfChartToolbar ... />

Live interaction

Click a legend chip to toggle a series; the LineChart below redraws in real time.

系统资源

last 10m · live

CPU
Memory
Disk

src/App.vue vue

<CfChartToolbar :series="series" @series-toggle="toggle" />
<CfLineChart :series="visibleSeries" />

src/App.tsx tsx

<CfChartToolbar series={series} onSeriesToggle={toggle} />
<CfLineChart series={visibleSeries} />

API

Prop	Type	Default	Description
`title / subtitle`	`string`	`—`	Title and description
`series`	`LegendSeries[]`	`—`	{ name, colorIndex, hidden? }[]; clicking a legend item triggers toggle
`showZoom / showExport / showRefresh`	`boolean`	`false`	Show button slots