HTML テーブルに data 属性を付けるだけで、美しい SVG チャートに変換。7KB 未満。依存ゼロ。
$ npm install data-chart
ライブデモ
プレーンなHTMLテーブルからレンダリングされたリアルチャート。data-chart-animate でエントランスアニメーションを追加。
data-chart="bar" | 四半期 | 売上 | 利益 |
|---|---|---|
| Q1 | 420 | 180 |
| Q2 | 580 | 240 |
| Q3 | 510 | 210 |
| Q4 | 690 | 310 |
data-chart="line" | 月 | ユーザー |
|---|---|
| 1月 | 1200 |
| 2月 | 1800 |
| 3月 | 1500 |
| 4月 | 2200 |
| 5月 | 2800 |
data-chart="pie" | OS | シェア |
|---|---|
| Linux | 40 |
| macOS | 32 |
| Win | 28 |
data-chart="donut" | 状態 | 件数 |
|---|---|
| 完了 | 50 |
| 進行中 | 30 |
| 未着手 | 20 |
チャートライブラリ
シンプルな棒グラフから詳細なドーナツチャートまで。すべてレスポンシブ、アクセシブル、ダークモード対応。
カテゴリ比較のための垂直棒グラフ。
bar ランキング表現に最適な横向き棒グラフ。
bar data-chart-horizontal 構成比を表示する積み上げセグメント。
bar data-chart-stacked 時系列のトレンドを表示するデータポイント接続。
line 折れ線の下を塗りつぶし、ボリュームを強調。
area 比率を表すスライス。中央に合計値表示も可能。
pie donut 設定ファイル不要。ビルド不要。フレームワーク不要。
<!-- 1. スクリプトを追加 -->
<script src="https://unpkg.com/data-chart" defer></script>
<!-- 2. テーブルに属性を追加 -->
<table data-chart="bar">
<thead>
<tr><th>月</th><th>売上</th></tr>
</thead>
<tbody>
<tr><td>1月</td><td>120</td></tr>
<tr><td>2月</td><td>150</td></tr>
</tbody>
</table>
<!-- 3. ステップ3はありません -->