Charts

View code

Breaking Change with v3.5.0! This version has been upgraded to ChartJS v2.5 so the API calls are different from ChartJS v1.x. More details on the changes here

Use

HTML

<rg-chart></rg-chart>

JavaScript

var tags = riot.mount('rg-chart', {
  chart: {
    type: 'doughnut', // line|bar|radar|polar|pie|doughnut
    data:{
    labels: [
        "Red",
        "Blue",
        "Yellow"
    ],
    datasets: [
        {
            data: [300, 50, 100],
            backgroundColor: [
                "#FF6384",
                "#36A2EB",
                "#FFCE56"
            ],
            hoverBackgroundColor: [
                "#FF6384",
                "#36A2EB",
                "#FFCE56"
            ]
        }]
  },
    options: {}, // Look at Chart.js documentation on how to populate data and options  
})

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://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> in your code before using this tag.