Convert HTML tables into beautiful SVG charts using data attributes. Under 7KB. No dependencies.
$ npm install data-chart
Live Demo
Real charts rendered from plain HTML tables. Add data-chart-animate for entrance animations.
data-chart="bar" | Quarter | Revenue | Profit |
|---|---|---|
| Q1 | 420 | 180 |
| Q2 | 580 | 240 |
| Q3 | 510 | 210 |
| Q4 | 690 | 310 |
data-chart="line" | Month | Users |
|---|---|
| Jan | 1200 |
| Feb | 1800 |
| Mar | 1500 |
| Apr | 2200 |
| May | 2800 |
data-chart="pie" | OS | Share |
|---|---|
| Linux | 40 |
| macOS | 32 |
| Win | 28 |
data-chart="donut" | Status | Count |
|---|---|
| Done | 50 |
| Active | 30 |
| Todo | 20 |
Chart Library
From simple bars to detailed donuts. Every chart is responsive, accessible, and dark-mode ready.
Vertical grouped bars for comparing categories.
bar Ranked horizontal bars with value labels.
bar data-chart-horizontal Stacked segments showing composition.
bar data-chart-stacked Connected data points showing trends over time.
line Filled area beneath lines for volume emphasis.
area Proportional slices with optional center total.
pie donut No config files. No build step. No framework required.
<!-- 1. Add the script -->
<script src="https://unpkg.com/data-chart" defer></script>
<!-- 2. Add the attribute -->
<table data-chart="bar">
<thead>
<tr><th>Month</th><th>Sales</th></tr>
</thead>
<tbody>
<tr><td>Jan</td><td>120</td></tr>
<tr><td>Feb</td><td>150</td></tr>
</tbody>
</table>
<!-- 3. There is no step 3 -->