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 |