How to use
<script src="https://projects.verou.me/h-chart/src/h-chart.js"></script>
That’s it! You can now use <h-chart> elements!
Simple pie chart
| Kind | Price |
|---|---|
| Apples | .2 |
| Oranges | .1 |
| Bananas | .15 |
Simple bar chart
You can also link to a table elsewhere in your markup:
Simple line chart with min and max
You can use x, y, z to change orientation and control what is plotted
Simple line chart with area and curves
Custom ids
You can use hc-name to provide custom names for axes
| Kind | Price |
|---|---|
| Apples | .2 |
| Oranges | .1 |
| Bananas | .15 |
Bar chart with format
You can also link to a table elsewhere in your markup:
| Kind | Price |
|---|---|
| Apples | .2 |
| Oranges | .1 |
| Bananas | .15 |
Heatmap
| Day | Hour | Intensity |
| Mon | 12:00 | 5 |
| Tue | 12:00 | 2 |
| Wed | 12:00 | 1 |
| Mon | 13:00 | 1 |
| Tue | 13:00 | 2 |
| Wed | 13:00 | 3 |
| Mon | 14:00 | 2 |
| Tue | 14:00 | 4 |
| Wed | 14:00 | 1 |
Grouped bar chart (World population by country)
Regardless of the chart type, you can use x, y, and z attributes
to control which dimensions are plotted:
| Country | Year | Population |
|---|---|---|
| Brazil | 2011 | 18203 |
| Brazil | 2012 | 19325 |
| Indonesia | 2011 | 23489 |
| Indonesia | 2012 | 23438 |
| USA | 2011 | 29034 |
| USA | 2012 | 31000 |
| India | 2011 | 104970 |
| India | 2012 | 121594 |
| China | 2011 | 131744 |
| China | 2012 | 134141 |
| World | 2011 | 630230 |
| World | 2012 | 681807 |