アニメーション

任意のテーブルに data-chart-animate を追加するだけでエントランスアニメーションが有効になります。チャートタイプごとに独自のアニメーションスタイルがあります。

クイックスタート

<table data-chart="bar" data-chart-animate>
  ...
</table>

Replay をクリックしてアニメーションを再生できます。Code に切り替えると HTML ソースを確認できます。

棒がベースラインから段階的に伸びます

線が左から右に描画され、その後ドットがフェードイン

線が横に描画され、エリアの塗りつぶしがフェードイン

スライスが1つずつスケールイン

セグメントが段階的にスケールイン

積み上げセグメントがベースラインから一斉に伸びます

Device Traffic
Q	Desktop	Mobile	Tablet
Q1	300	200	50
Q2	280	250	60
Q3	260	300	70
Q4	320	350	80

横棒が左から段階的に伸びます

要素	アニメーション	時間	スタガー
`.data-chart-bar`	高さが0から伸びる	600ms	棒ごとに60ms
`.data-chart-line`	ストロークが左から右に描画	960ms	--
`.data-chart-dot`	線の完了後にフェードイン	300ms	ドットごとに80ms
`.data-chart-area`	不透明度のフェードイン	800ms	400ms遅延
`.data-chart-slice`	中心からスケール	600ms	スライスごとに80ms

要素ごとのアニメーション速度を制御:

<table data-chart="bar" data-chart-animate data-chart-animate-duration="1200">

デフォルト: 600ms。任意の正の数値を指定可能。

要素間の遅延を制御:

<table data-chart="bar" data-chart-animate data-chart-animate-stagger="100">

デフォルト: 60ms。値が大きいほど、より順次的なアニメーションになります。

<table
  data-chart="line"
  data-chart-animate
  data-chart-animate-duration="300"
  data-chart-animate-stagger="30"
>

prefers-reduced-motion: reduce が設定されている場合、アニメーションは自動的に無効化されます。追加設定は不要です。チャートは最終状態で即座にレンダリングされます。