グラフUI 30選

CSS・SVG・バニラJSだけで作るデータビジュアライゼーション30種。ドーナツ・棒・折れ線の定番から、レーダー・ヒートマップ・ファネルまで、外部ライブラリなしのコピペ実装。スクロールで画面に入ると描画アニメが再生されます。

0万円
年間売上
01. カウントアップドーナツSVG stroke-dasharrayで描画+中央数値が同時カウント
02. ホバー円グラフセグメントにマウスを乗せると拡大+ツールチップ
0%
今期の目標達成率
0100
03. 半円ゲージ達成率を半円の弧+カウントアップで表示
04. 三重リングアクティビティリング風に3指標が順に満ちる
0%
顧客満足度
0%
継続利用率
0%
紹介経由率
05. KPIリング3連小型パーセントリングを横並びで指標群に
06. 開花パイ扇形がstaggerでポップして円が完成する
07. 引き出し線ドーナツリーダー線+項目ラベルで内訳を外側に表示
月別売上(百万円)
08. 縦棒グラフ下からstaggerで伸びる+ホバーで値表示
プラン別契約数ランキング
09. 横棒ランキングラベル+右端の値、上位から順に伸びる
四半期別の経費内訳(構成比)
10. 積み上げ横棒2pxギャップのセグメント+色チップ凡例
売上比較(百万円)
今年 前年
11. グループ棒今年vs前年の2系列を並べて比較+凡例
対応スキルカバレッジ
12. スキルバー群丸角バーと%カウントが同期して伸びる
利用者の年代分布(%)
男性 女性
13. 左右対比バー人口ピラミッド風に2系列を中央から展開
機能別の利用率(%)
14. ロリポップチャート細線+先端ドットで軽やかに値を表現
週別の新規契約数 目標 60件
15. 目標ライン付き棒破線の目標線を超えた棒だけ達成色に変わる
月間アクティブユーザー数の推移
16. 描画アニメ折れ線左から線が描かれる+クロスヘア+ツールチップ
累計登録ユーザー数(千人)
17. エリアチャート線下をグラデ塗り、clip-pathで左から開く
18. 統計タイル3連ヒーロー数字+前月比矢印+ミニスパークライン
売上推移(百万円)
今期 前期
19. 2系列比較折れ線実績vs前年を色分け+凡例つきで描画
プラン料金の改定履歴(月額・円)
20. ステップライン階段状に変化する値の推移を描画
NPSスコアの推移
21. スムーズ曲線滑らかな補間曲線+ポップするデータ点ドット
リアルタイム同時接続数
0接続
LIVE
22. リアルタイムライン右から流れ続ける(画面内にある間だけ更新)
サービス評価スコア(5点満点)
23. レーダーチャート五角形の評価軸に中心からデータが展開
日別コミット数(直近16週)
24. ヒートマップカレンダー単一色相の濃淡で活動量、ホバーで日付+件数
利用時間と満足度の相関
個人 法人
25. 散布図2系列のドットが順にポップ+凡例つき
申込みまでのコンバージョンファネル
26. ファネルチャート段階ごとに狭まる+段間に転換率を表示
27. KPIダッシュボードカウントアップ+状態矢印+ミニバーのタイル群
0 /100
パフォーマンススコア
28. 針ゲージメーター速度計風に針が回転+弧とスコアが同期
製品カテゴリ別の売上構成
29. ツリーマップ面積で構成比を表現、ホバーでブロックが浮く
0%
の利用者が
1年後も継続利用
30. ドットマトリクス100ドットで割合を表現、順に点灯+同期カウント