📊 h-chart

Make charts with HTML!

h-chart is a web component that allows you to turn HTML tables into beautiful charts, powered by the Apache echarts library

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

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

Bar chart with format

You can also link to a table elsewhere in your markup:

Heatmap

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:

Grouped bar chart (World population by year)

Grouped pie chart (World population by year)