Chart.js Bar Chart

A bar chart showing pageviews by page — the same data from Module 01, but rendered declaratively with Chart.js instead of manual Canvas drawing.

The Code

const ctx = document.getElementById('barChart');

new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Home', 'About', 'Blog', 'Contact', 'Docs'],
        datasets: [{
            label: 'Pageviews',
            data: [1200, 800, 950, 400, 1100],
            backgroundColor: [
                '#16a085',
                '#1abc9c',
                '#2ecc71',
                '#27ae60',
                '#0e7c6b'
            ],
            borderColor: '#0e7c6b',
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        scales: {
            y: {
                beginAtZero: true,
                title: {
                    display: true,
                    text: 'Pageviews'
                },
                ticks: {
                    callback: function(value) {
                        return value.toLocaleString();
                    }
                }
            },
            x: {
                title: {
                    display: true,
                    text: 'Page'
                }
            }
        },
        plugins: {
            title: {
                display: true,
                text: 'Pageviews by Page',
                font: { size: 18 }
            },
            legend: {
                display: false
            }
        }
    }
});