Charts

Charts

Canvas integrates Chart.js for responsive, animated data visualisations: bar, line, area, pie, doughnut, radar, polar area, bubble, and scatter charts. You render into a <canvas> element and configure the chart in a small script.

Markup

Place a <canvas> with a unique id inside a sized container so the chart has room to render:

<div class="mb-5 mx-auto" style="max-width: 750px; min-height: 350px;">
    <canvas id="chart-0"></canvas>
</div>

Bar Chart Example

Define the data, grab the canvas 2D context, and construct the chart:

<script>
    var color = Chart.helpers.color;

    var barChartData = {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
            label: 'Dataset 1',
            backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
            borderColor: window.chartColors.red,
            borderWidth: 1,
            data: [45, 62, 38, 71, 55, 48, 66]
        }, {
            label: 'Dataset 2',
            backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
            borderColor: window.chartColors.blue,
            borderWidth: 1,
            data: [30, 50, 42, 60, 47, 52, 40]
        }]
    };

    window.onload = function() {
        var ctx = document.getElementById("chart-0").getContext("2d");
        window.myBar = new Chart(ctx, {
            type: 'bar',
            data: barChartData,
            options: {
                responsive: true,
                legend: { position: 'top' },
                title: { display: true, text: 'Bar Chart' }
            }
        });
    };
</script>

Chart Colours

Canvas provides a window.chartColors palette (red, blue, and more) and a Chart.helpers.color helper. Use .alpha() to create translucent fills while keeping a solid border colour:

backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
borderColor: window.chartColors.blue,

Chart Types

Swap the type field to change the visualisation:

• bar (vertical and horizontal), stacked and grouped
• line, area (line with fill), stepped and interpolated
• pie, doughnut
• radar, polarArea
• bubble, scatter
• combo (bar plus line via mixed datasets)

window.myPie = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ['Red', 'Blue', 'Yellow'],
        datasets: [{
            data: [300, 50, 100],
            backgroundColor: [
                window.chartColors.red,
                window.chartColors.blue,
                window.chartColors.yellow
            ]
        }]
    },
    options: { responsive: true }
});

Updating Data

Chart.js keeps a live reference. Mutate the data arrays and call update() to re-render:

barChartData.datasets.forEach(function(dataset) {
    dataset.data = dataset.data.map(function() { return Math.random() * 100; });
});
window.myBar.update();

Tips

• Wrap each canvas in a container with an explicit max-width and min-height so the chart is not zero-sized before render.
• Give each <canvas> a unique id (chart-0, chart-1, and so on) and keep a window reference (window.myBar) if you plan to update it.
• Use the shared window.chartColors palette for a consistent look across charts.
• Set responsive: true so charts resize with their container.