Chart

17 种 chart 构件：Tooltip / Card / 5 种 list 原子 + 11 种 chart 本体（Meter / HalfDonut / DashedHalfDonut / Donut / Pie / MultilayerDonut / Bubble / Bar / BarHorizontal / BarUpsideDown / SmoothLine）。

ChartTooltip

深色 tooltip，含颜色点 + 可选 label + 值 + 趋势箭头。

Import

import {
  ChartTooltip, ChartCard, ChartListItem, ChartLegendItem, ChartValueRow, ChartStatFooter,
  MeterChart, HalfDonutChart, DashedHalfDonutChart, DonutChart, PieChart,
  MultilayerDonutChart, BubbleChart, BarChart, BarHorizontalChart, BarUpsideDownChart,
  SmoothLineChart,
} from "@forge-ui/react";

Usage

Revenue:$4,200↑

Expenses:$1,800↓

1<ChartTooltip
2  items={[
3    { color: "bg-fg-violet", label: "Revenue", value: "$4,200", trend: "up" },
4    { color: "bg-blue-600", label: "Expenses", value: "$1,800", trend: "down" },
5  ]}
6/>

API

Attribute	Type	Default	Description
`items`	`ChartTooltipItem[]`	`—`	tooltip 行数组 { color, label?, value, trend? }。

ChartCard

白底卡片，装 chart 主体 + footer。4 种宽度预设。

Usage

Revenue

Monthly

$8.4k

1<ChartCard title="Revenue" subtitle="Monthly" size="4col">
2  <DonutChart segments={[{ value: 60 }, { value: 40 }]} centerValue="$8.4k" size="sm" />
3</ChartCard>

API

Attribute	Type	Default	Description
`title / subtitle`	`string`	`—`	卡片头部。
`children`	`ReactNode`	`—`	主 chart 区。
`footer`	`ReactNode`	`—`	底部槽（通常是 ChartStatFooter）。
`size`	`'4col' \| '6col' \| '8col' \| 'full'`	`'4col'`	宽度预设。
`onMenuClick`	`() => void`	`—`	右上 menu 点击。

List Atoms

五个 list 原子，常用在 ChartCard footer / 右侧 legend 区。

ChartListItem

带图标的 legend 行。icon 传 solar-icon-set 组件本身（不实例化）。

RevenueThis month

$12,500↑ +12.5%

1<ChartListItem icon={WalletLinear} title="Revenue" subtitle="This month" value="$12,500" trend="+12.5%" trendDirection="up" />

Attribute	Type	Default	Description
`icon`	`ComponentType<{ size?, color? }>`	`—`	传 solar-icon-set 组件本身（不实例化），accent 驱动颜色与底色。
`accent`	`'purple' \| 'blue' \| 'black'`	`'purple'`	图标颜色 ramp。
`title`	`string`	`—`	条目标题。
`subtitle`	`string`	`—`	副标题。
`value`	`string`	`—`	右侧数值。
`trend`	`string`	`—`	右侧趋势文案，如 +12.5%。
`trendDirection`	`'up' \| 'down'`	`—`	趋势方向，决定颜色与箭头。

ChartLegendItem

Revenue$4,200

1<ChartLegendItem color="bg-fg-violet" label="Revenue" value="$4,200" />

Attribute	Type	Default	Description
`color`	`string`	`—`	Tailwind bg-* class，覆盖 accent ramp。
`accent`	`'purple' \| 'blue' \| 'black'`	`'purple'`	未传 color 时按 accent + shade 取色。
`shade`	`0 \| 1 \| 2 \| 3 \| 4`	`0`	ramp 索引，0 最深 4 最浅。
`label`	`string`	`—`	标签文案。
`value`	`string`	`—`	右侧数值。

ChartValueRow

Revenue$12,500

1<ChartValueRow label="Revenue" value="$12,500" color="bg-fg-violet" />

Attribute	Type	Default	Description
`value`	`string`	`—`	主数值（大字号）。
`trend`	`string`	`—`	右侧趋势文案。
`trendDirection`	`'up' \| 'down'`	`—`	趋势方向，决定颜色与箭头。
`color`	`string`	`—`	可选左侧 dot 颜色（Tailwind bg-* class）。
`label`	`string`	`—`	可选左侧 label 文案。

ChartStatFooter

Revenue

$12.5k+12%↑

Profit

$9.3k+18%↑

1<ChartStatFooter
2  items={[
3    { label: "Revenue", value: "$12.5k", color: "bg-fg-violet", trend: "+12%", trendDirection: "up" },
4    { label: "Profit", value: "$9.3k", color: "bg-emerald-500", trend: "+18%", trendDirection: "up" },
5  ]}
6/>

Attribute	Type	Default	Description
`items`	`{ label, value, color?, trend?, trendDirection? }[]`	`—`	footer 条目数组，每条 dot + 数值 + 趋势。
`accent`	`'purple' \| 'blue' \| 'black'`	`'purple'`	items 缺省 color 时按 ramp 派生 dot 颜色。

Donut 系列

六种环形 chart：Meter（水平进度条）/ HalfDonut / DashedHalfDonut / Donut / Pie / MultilayerDonut。每个组件 props 各不相同，分别列出。

MeterChart

50%

30%

20%

+$181 today↑ 10%

1<MeterChart segments={[{ value: 50 }, { value: 30 }, { value: 20 }]} trend="10%" trendDirection="up" subtitle="+$181 today" />

Attribute	Type	Default	Description
`segments`	`{ value, color? }[]`	`—`	水平进度分段。
`accent`	`'purple' \| 'blue' \| 'black'`	`'purple'`	ramp 主色。
`trend`	`string`	`—`	右上角趋势文案。
`trendDirection`	`'up' \| 'down'`	`—`	趋势方向，决定颜色与箭头。
`subtitle`	`string`	`—`	底部副文案。
`height`	`string`	`'h-24'`	Meter 条高度 class。

HalfDonutChart

75%

↑ 10%

1<HalfDonutChart segments={[{ value: 75 }]} centerValue="75%" trend="10%" trendDirection="up" />

Attribute	Type	Default	Description
`segments`	`{ value, color? }[]`	`—`	半圆各段。
`accent`	`'purple' \| 'blue' \| 'black'`	`'purple'`	ramp 主色。
`centerValue`	`string`	`—`	中心大数字。
`trend / trendDirection`	`string / 'up' \| 'down'`	`—`	趋势提示。
`subtitle`	`string`	`—`	中心副文案。
`trackColor`	`string`	`—`	未填充段轨道色，默认取 accent 最浅档。

DashedHalfDonutChart

60%

1<DashedHalfDonutChart segments={[{ value: 60 }]} centerValue="60%" />

Attribute	Type	Default	Description
`segments`	`{ value, color? }[]`	`—`	虚线分段。
`accent`	`'purple' \| 'blue' \| 'black'`	`'purple'`	ramp 主色。
`centerValue`	`string`	`—`	中心大数字。
`trend / trendDirection`	`string / 'up' \| 'down'`	`—`	趋势提示。
`subtitle`	`string`	`—`	中心副文案。
`trackColor`	`string`	`—`	轨道色。

DonutChart

$8.4k

1<DonutChart segments={[{ value: 40 }, { value: 30 }, { value: 30 }]} centerValue="$8.4k" size="sm" />

Attribute	Type	Default	Description
`segments`	`{ value, color? }[]`	`—`	环形分段。
`accent`	`'purple' \| 'blue' \| 'black'`	`'purple'`	ramp 主色。
`centerValue`	`string`	`—`	中心大数字。
`trend / trendDirection`	`string / 'up' \| 'down'`	`—`	趋势提示。
`subtitle`	`string`	`—`	中心副文案。
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	外径尺寸。
`trackColor`	`string`	`—`	未填充段色，默认 fg-grey-200。

PieChart

1<PieChart segments={[{ value: 40 }, { value: 30 }, { value: 30 }]} size="sm" />

Attribute	Type	Default	Description
`segments`	`{ value, color? }[]`	`—`	饼图分段。
`accent`	`'purple' \| 'blue' \| 'black'`	`'purple'`	ramp 主色。
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	饼图尺寸。
`trackColor`	`string`	`—`	占位轨道色，默认 fg-grey-200。

MultilayerDonutChart

80%

1<MultilayerDonutChart
2  layers={[
3    { value: 80 },
4    { value: 60 },
5    { value: 40 },
6  ]}
7  centerValue="80%"
8/>

Attribute	Type	Default	Description
`layers`	`{ value, color? }[]`	`—`	多层环形数据，第 1 层最外。
`accent`	`'purple' \| 'blue' \| 'black'`	`'purple'`	ramp 主色。
`centerValue`	`string`	`—`	中心大数字。
`trend / trendDirection`	`string / 'up' \| 'down'`	`—`	趋势提示。
`subtitle`	`string`	`—`	中心副文案。

Bar / Bubble 系列

柱状与气泡图。每个组件 props 不同，分别列出。

BarChart

1<BarChart data={[{ value: 20 }, { value: 45 }, { value: 30 }, { value: 60 }]} activeIndex={3} />

Attribute	Type	Default	Description
`data`	`{ value, label? }[]`	`—`	柱子数据。
`accent`	`'purple' \| 'blue' \| 'black'`	`'purple'`	柱子主色。
`activeIndex`	`number`	`—`	高亮柱子下标。
`color / inactiveColor`	`string`	`—`	覆盖柱子 / 非高亮柱色（Tailwind bg-* class）。
`barWidth`	`'thin' \| 'wide'`	`'thin'`	柱子宽度档位。
`showLabels`	`boolean`	`false`	是否显示 X 轴标签。
`showTooltip`	`boolean`	`false`	是否显示 active 柱上方 tooltip。
`tooltipValue / tooltipTrend`	`string / 'up' \| 'down'`	`—`	tooltip 数值 + 趋势方向。
`height`	`string`	`'h-36'`	柱子区高度 class。

BarHorizontalChart

1<BarHorizontalChart data={[{ label: "A", value: 80 }, { label: "B", value: 50 }]} />

Attribute	Type	Default	Description
`data`	`{ value, label? }[]`	`—`	横向柱数据。
`accent`	`'purple' \| 'blue' \| 'black'`	`'purple'`	柱子主色。
`activeIndex`	`number`	`—`	高亮柱子下标。
`color / inactiveColor`	`string`	`—`	覆盖柱子 / 非高亮柱色。
`barWidth`	`'thin' \| 'wide'`	`'thin'`	柱子宽度档位。
`showLabels`	`boolean`	`false`	是否显示标签。
`showTooltip`	`boolean`	`false`	是否显示 tooltip。
`tooltipValue / tooltipTrend`	`string / 'up' \| 'down'`	`—`	tooltip 数值 + 趋势。

BarUpsideDownChart

1<BarUpsideDownChart data={[
2  { upperValue: 30, lowerValue: 20 },
3  { upperValue: 50, lowerValue: 35 },
4  { upperValue: 20, lowerValue: 10 },
5]} />

Attribute	Type	Default	Description
`data`	`{ upperValue, lowerValue }[]`	`—`	上下两段柱数据。
`accent`	`'purple' \| 'blue' \| 'black'`	`'purple'`	柱子主色。
`activeIndex`	`number`	`—`	高亮柱子下标。
`upperColor / lowerColor`	`string`	`—`	上段 / 下段颜色覆盖。
`barWidth`	`'thin' \| 'wide'`	`'thin'`	柱子宽度档位。
`showLabels`	`boolean`	`false`	是否显示 X 轴标签。
`showTooltip`	`boolean`	`false`	是否显示 tooltip。
`tooltipUpperValue / tooltipLowerValue / tooltipTrend`	`string / 'up' \| 'down'`	`—`	tooltip 上下段数值 + 趋势。
`height`	`string`	`'h-36'`	总高度 class。

BubbleChart

40%

25%

15%

10%

1<BubbleChart bubbles={[{ value: 40 }, { value: 25 }, { value: 15 }]} />

Attribute	Type	Default	Description
`bubbles`	`{ value, color? }[]`	`—`	气泡数据（大小与 value 成比例）。
`accent`	`'purple' \| 'blue' \| 'black'`	`'purple'`	气泡色 ramp。
`height`	`number`	`240`	容器高度（像素）。

SmoothLineChart

平滑曲线，支持多 series、填充面积、x/y 轴标签、tooltip。

Usage

1<SmoothLineChart series={[{ data: [10, 20, 15, 25, 18, 30, 22] }]} />

API

Attribute	Type	Default	Description
`series`	`{ data: number[], color?, fillArea? }[]`	`—`	多线数据。
`accent`	`'purple' \| 'blue' \| 'black'`	`'purple'`	主色 ramp。
`activeIndex`	`number`	`—`	高亮数据点下标。
`showTooltip`	`boolean`	`false`	active 点上方显示 tooltip（需配合 tooltipItems）。
`tooltipItems`	`ChartTooltipItem[]`	`—`	tooltip 内容数组，showTooltip 为 true 时必传，否则只显示 marker。
`showYAxis`	`boolean`	`false`	是否显示 Y 轴。
`yAxisLabels / xAxisLabels`	`string[]`	`—`	轴标签。
`yDomain`	`[min, max]`	`auto`	Y 轴范围。
`height`	`string`	`'h-32'`	图表高度 class。

看所有变体 →