Edit in JSFiddle

<ul class="dash-board" scope>
    <li barchart></li>
    <li linechart></li>
</ul>

define('river.grammer.barchart', function (exports, require, module) {
    var data = require('rain').data,
        $compile = require('river.core.tools').compile;

    function chart(str, scope, element) {
        var canvas = $compile('<canvas id="canvas" height="200" width="300"></canvas>');
        element.appendChild(canvas)
        new Chart(canvas.getContext("2d")).Bar(data);
    }
    exports = module.exports = chart;
})

define('river.grammer.linechart', function (exports, require, module) {
    var data = require('rain').data,
        $compile = require('river.core.tools').compile;

    function chart(str, scope, element) {
        var canvas = $compile('<canvas id="canvas" height="200" width="300"></canvas>');
        element.appendChild(canvas)
        new Chart(canvas.getContext("2d")).Line(data);
    }

    exports = module.exports = chart;
})

define('rain', function (exports, require, module) {
    exports.data = {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
            fillColor: "rgba(220,220,220,0.5)",
            strokeColor: "rgba(220,220,220,1)",
            data: [65, 59, 90, 81, 56, 55, 40]
        }, {
            fillColor: "rgba(151,187,205,0.5)",
            strokeColor: "rgba(151,187,205,1)",
            data: [28, 48, 40, 19, 96, 27, 100]
        }]
    }
})

.dash-board li {
    float: left;
    list-style: none;
}