mayaCharts

Simple

One series, compact number format.

Grouped

Add series to split rows into grouped bars.

Stacked

Set stack: true. Negative values stack below zero.

Live updates

Assign el.data and the change animates. Adding or removing a series animates enter and exit.

Plain HTML

No JavaScript needed beyond loading the element: put the spec in a JSON child.

<maya-chart style="height:240px">
  <script type="application/json">
    {"type":"bar","x":"fruit","y":"kg","data":[{"fruit":"Apples","kg":42},{"fruit":"Pears","kg":28}]}
  </script>
</maya-chart>

Server rendering

renderShell(spec) returns plain HTML and SVG that works without JavaScript. See the server-rendered example.