Animated Charts

資料驅動的生長進場圖表（SVG）：長條由基線向上生長、折線與面積以描邊繪製動畫，進入視口時觸發。

載入預覽⋯

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

圖表款式variant

描邊時長（秒）duration

1.2

線條寬度（px）strokeWidth

顯示數值showValues

顯示格線showGrid

圖表顏色color

<AnimatedCharts />

安裝

npx shadcn@latest add https://webberui.com/r/animated-charts.json

或在 components.json 設定 registries 後，改用 @webberui/animated-charts 安裝。

安裝依賴後，從 registry JSON（/r/animated-charts.json 的 files[0].content）複製 animated-charts.tsx 原始碼到你的 components/ui/ 目錄：

npm install motion clsx tailwind-merge

使用

import { AnimatedChart } from "@/components/ui/animated-charts";

const data = [
  { label: "一月", value: 320 },
  { label: "二月", value: 480 },
  { label: "三月", value: 410 },
  { label: "四月", value: 640 },
];

<AnimatedChart data={data} variant="line" />

同一份資料切換 variant 即可得到折線、長條或面積三款：

<AnimatedChart data={data} variant="bar" />
<AnimatedChart data={data} variant="area" />

自訂顏色（任意 CSS color；預設隨文字色，深淺色自動適應）：

<AnimatedChart data={data} variant="area" color="#6366f1" showValues />

圖表寬度自動填滿容器（內部以 ResizeObserver 量測），高度由 height 控制。

Props

AnimatedChart

Prop	型別	預設值	說明
`data`	`ChartDataPoint[]`	—	圖表資料，依序沿 X 軸排列
`variant`	`"line" \| "bar" \| "area"`	`"line"`	圖表款式
`height`	`number`	`240`	SVG 高度（px，含底部標籤區）
`color`	`string`	`currentColor`	線條／長條顏色（任意 CSS color）
`duration`	`number`	`1.2`	折線／面積描邊生長時長（秒）
`stagger`	`number`	`0.08`	長條與資料點的 stagger 間隔（秒）
`delay`	`number`	`0`	進場前延遲（秒）
`showGrid`	`boolean`	`true`	是否顯示水平格線
`showLabels`	`boolean`	`true`	是否顯示 X 軸標籤
`showDots`	`boolean`	`true`	折線／面積是否顯示資料點圓點
`showValues`	`boolean`	`false`	是否在資料點／長條上顯示數值
`strokeWidth`	`number`	`2`	線條描邊寬度（px）
`once`	`boolean`	`true`	只在第一次進入視口時播放
`className`	`string`	—	附加到最外層容器的 class

ChartDataPoint

欄位	型別	說明
`label`	`string`	X 軸標籤（例如月份、類別名稱）
`value`	`number`	數值，長條由基線生長、折線／面積依此定位

細節

生長進場：長條以 scaleY 由基線（值 0 的位置）向上生長，transform-box: fill-box 搭配 transform-origin 讓正值由底部、負值由頂部展開；折線與面積以 Motion 的 pathLength 由 0 描繪到 1，面積填色同步淡入
視口觸發：以 useInView 偵測進入視口才播放，once 控制是否只播一次
響應式：內部以 ResizeObserver 量測容器寬度，SVG 以像素座標繪製（非縮放 viewBox），描邊與圓點在任何寬度下都不變形；解除掛載時 disconnect 清理 Observer
值域：值域一律包含 0 作為長條基線，支援負值；全部同值時自動退回安全比例避免除以零
顏色：預設用 currentColor，跟隨容器文字色，因此中性色與深淺色模式自動適應；可用 color 傳入任意 CSS color 作為強調色。格線與標籤固定為低調中性色，不隨系列色改變
stagger：長條與資料點以容器層級的 staggerChildren 逐一進場

可及性

使用者系統開啟「減少動態效果」時，圖表直接顯示終態（長條滿高、路徑完整、圓點就位），不播生長動畫，DOM 結構與 SSR 一致
SVG 標記 role="img" 並帶 aria-label（各資料點「標籤: 數值」摘要），另提供 sr-only 文字摘要供輔助科技朗讀
格線、長條、路徑、圓點、數值標籤皆為裝飾性元素，標記 aria-hidden

On this page