ForgeForge

Chart

ChartTooltip · ChartCard · ChartListItem · ChartStatFooter · MeterChart · HalfDonutChart · DashedHalfDonutChart · DonutChart · PieChart · MultilayerDonutChart · BubbleChart · BarChart · BarHorizontalChart · BarUpsideDownChart · SmoothLineChart

ChartTooltip

Dark tooltip for charts

Example

Revenue:$4,200↑
Expenses:$1,800↓
$12,500↑

ChartCard

Card wrapper for charts

Example

Revenue Overview
Monthly breakdown
$8.4k

ChartListItem

Legend-style list item for charts

Example

RevenueThis month
$12,500↑ +12.5%
Expenses
$3,200↓ -4%

ChartStatFooter

Footer stats for chart cards

Example

Revenue
$12.5k+12%↑
Expenses
$3.2k-4%↓
Profit
$9.3k+18%↑

MeterChart

Horizontal segmented meter — 3 / 2 / 1 段 Monochromatic

Monochromatic 1 / 2 / 3 段

Title Here
Text Here
50%
30%
20%
+$181 today↑ 10%

You succeed earn $240 today, its higher than yesterday

Label
$20k↑
Label
$16k↓
Label
$1.5k↑
Title Here
Text Here
75%
25%
+$181 today↑ 10%

You succeed earn $240 today, its higher than yesterday

Label
$20k↑
Label
$16k↓
Title Here
Text Here
75%
+$181 today↑ 10%

You succeed earn $240 today, its higher than yesterday

Label
$20,000↑
Label
$40,000↑

HalfDonutChart

Semi-circle donut (Regular + List 两种)

Regular

Title Here
Text Here
75%
↑ 10%
+$181 today
Label
$20k↑
Label
$16k↓
Label
$1.5k↑
Title Here
Text Here
75%
↑ 10%
+$181 today
Label
$20k↑
Label
$16k↑

+List

Title Here
Text Here
75%
↑ 10%
+$181 today
Title HereSubtext
$24,500↑ 10%
Title HereSubtext
$24,500↑ 10%
Title HereSubtext
$24,500↑ 10%
Title Here
Text Here
75%
↑ 10%
+$181 today
Title HereSubtext
$24,500↑ 10%
Title HereSubtext
$24,500↑ 10%

DashedHalfDonutChart

Dashed semi-circle donut (Regular + List 两种)

Regular

Title Here
Text Here
75%
↑ 10%
+$181 today
Label
$20k↑
Label
$16k↓
Title Here
Text Here
75%
↑ 10%
+$181 today
Label
$20k↑
Label
$16k↑
Label
$1.5k↑

+List

Title Here
Text Here
75%
↑ 10%
+$181 today
Title HereSubtext
$24,500↑ 10%
Title HereSubtext
$24,500↑ 10%
Title HereSubtext
$24,500↑ 10%
Title Here
Text Here
75%
↑ 10%
+$181 today
Title HereSubtext
$24,500↑ 10%
Title HereSubtext
$24,500↑ 10%
Title HereSubtext
$24,500↑ 10%

DonutChart

Full donut — Regular / +List / 尺寸 sm/md/lg

Sizes (sm / md / lg)

75%
↑ 10%
+$181
sm
75%
↑ 10%
+$181
md
75%
↑ 10%
+$181
lg

Regular

Title Here
Text Here
75%
↑ 10%
+$181 today
Label$10,000
Label$10,000
Title Here
Text Here
75%
↑ 10%
+$181 today
Label$10,000
Label$10,000
Title Here
Text Here
75%
↑ 10%
+$181 today
Label
$20k↑
Label
$16k↑
Label
$1.5k↑

+List

Title Here
Text Here
75%
↑ 10%
+$181 today
Title HereSubtext
$24,500↑ 10%
Title HereSubtext
$24,500↑ 10%
Title HereSubtext
$24,500↑ 10%
Title Here
Text Here
75%
↑ 10%
+$181 today
Title HereSubtext
$24,500↑ 10%
Title HereSubtext
$24,500↑ 10%
Title HereSubtext
$24,500↑ 10%

PieChart

Full pie (Regular / +List / 多色段 1-5 段)

Sizes (sm / md / lg)

sm
md
lg

Regular (1-5 段)

Title Here
Text Here
Label$10,000
Title Here
Text Here
Label$10,000
Label$10,000
Title Here
Text Here
Label$10,000
Label$10,000
Label$10,000
Title Here
Text Here
Label$10,000
Label$10,000
Label$10,000
Label$10,000
Title Here
Text Here
Label$10,000
Label$10,000
Label$10,000
Label$10,000
Label$10,000

+List

Title Here
Text Here
Title HereSubtext
$24,500↑ 10%
Title HereSubtext
$24,500↑ 10%
Title HereSubtext
$24,500↑ 10%
Title Here
Text Here
Title HereSubtext
$24,500↑ 10%
Title HereSubtext
$24,500↑ 10%
Title HereSubtext
$24,500↑ 10%

MultilayerDonutChart

嵌套 270° C 形 arc (1/2/3/4 层)

1 / 2 / 3 / 4 层

Title Here
Text Here
$75.5k
10%↑
from last month
Label$10,000
Title Here
Text Here
$75.5k
10%↑
from last month
Label$10,000
Label$10,000
Title Here
Text Here
$75.5k
10%↑
from last month
Label$10,000
Label$10,000
Label$10,000
Title Here
Text Here
$75.5k
10%↑
from last month
Label$10,000
Label$10,000
Label$10,000
Label$10,000

+List

Title Here
Text Here
$75.5k
10%↑
from last month
Title HereSubtext
$24,500↑ 10%
Title HereSubtext
$24,500↑ 10%
Title HereSubtext
$24,500↑ 10%

BubbleChart

2 / 3 / 4 个 bubble 紧密排列 (Regular + List)

Regular

Title Here
Text Here
65%
35%
Label$10,000
Label$10,000
Title Here
Text Here
58.33%
25%
8%
Label$10,000
Label$10,000
Label$10,000
Title Here
Text Here
58.33%
25%
8%
2%
Label$10,000
Label$10,000
Label$10,000
Label$10,000

+List

Title Here
Text Here
65%
35%
Title HereSubtext
$24,500↑ 10%
Title HereSubtext
$24,500↑ 10%
Title HereSubtext
$24,500↑ 10%

BarChart (Vertical)

Thin / Wide bars + tooltip + active label 高亮

4 Col (thin / wide)

Title Here
Text Here
Lbl
Lbl
Lbl
$880↑
Lbl
Lbl
Lbl
Lbl
$4,103
10%↑
Title Here
Text Here
Lbl
Lbl
Lbl
$880↑
Lbl
Lbl
Lbl
Lbl
$4,103
10%↑

6 Col / Full Width

Statistic
Income and Expenses
Lbl
Lbl
Lbl
Lbl
Lbl
$680↑
Lbl
Lbl
Lbl
Lbl
Lbl
Lbl
Lbl

BarHorizontalChart

Horizontal bar chart (Small thin / Medium wide)

Small (h-2 rounded-full)

Statistic
Income and Expenses
Lbl
Lbl
Lbl
Lbl
$680↑
Lbl
Lbl
Lbl

Medium (h-8 rounded-lg)

Statistic
Income and Expenses
Lbl
Lbl
Lbl
$880↑
Lbl
Lbl
Lbl

BarUpsideDownChart

Dual-direction bar chart (Income violet 上 / Expenses red 下)

4 Col (thin / wide)

Title Here
Text Here
Lbl
Lbl
Lbl
Lbl
$680
$280
Lbl
Lbl
Lbl
Label
$20k↑
Label
$16k↓
Title Here
Text Here
Lbl
Lbl
Lbl
Lbl
$680
$280
Lbl
Lbl
Lbl
Label
$20k↑
Label
$16k↓

6 Col (Statistic Income / Expenses)

Statistic
Income and Expenses
Lbl
Lbl
Lbl
Lbl
Lbl
$680
$280
Lbl
Lbl
Lbl
Lbl
Lbl
Lbl
Lbl

组合用法 (ChartCard)

对照 figma：chart 放进 ChartCard，搭配 ChartStatFooter / ChartListItem

Donut + ChartStatFooter

Revenue
Monthly breakdown
75%
↑ +10%
Label
$20kup↑
Label
$16kdown↓
Label
$1.5kup↑

Donut + ChartListItem 列表

Top Channels
This month
75%
↑ +10%
Title HereSubtitle
$24,500↑ +12%
Title HereSubtitle
$24,500↓ -4%
Title HereSubtitle
$24,500↑ +3%

Bar + tooltip

Weekly Revenue
Last 7 days
Mon
Tue
Wed
$4,200↑
Thu
Fri
Sat
Sun

SmoothLineChart

Catmull-Rom smoothed line with area fill

4 Col (小卡片，仅 line + tooltip)

Title Here
Text Here
$880↑
Label
$4,10310%↑

6 Col (Statistic 样式 + 轴 + 两条 series)

Statistic
Income and Expenses
$1.2k$1k$800$600$400$2000
Label:$680↑
Label:$280↓
LblLblLblLblLblLblLblLblLblLblLblLbl