Charts

View code

Use

HTML

<rg-chart></rg-chart>

JavaScript

var tags = riot.mount('rg-chart', {
  chart: {
    type: 'doughnut', // line|bar|radar|polar|pie|doughnut
    options: {}, // Look at Chart.js documentation on how to populate data and options
    data: [{
      value: 300,
      color: "#F7464A",
      highlight: "#FF5A5E",
      label: "Red"
    }, {
      value: 50,
      color: "#46BFBD",
      highlight: "#5AD3D1",
      label: "Green"
    }, {
      value: 100,
      color: "#FDB45C",
      highlight: "#FFC870",
      label: "Yellow"
    }]
  }
})

tags[0].on('loaded', function (chart) { ... })

rg-chart relies on Chart.js - a simple, responsive, modular and interactive charting library.

Look at Chart.js documentation on how to populate data and options.

Ensure you have a link to <script src="https://cdn.jsdelivr.net/chart.js/1.0.2/Chart.min.js"></script> in your code before using this tag.