Chart.js Line Chart — 30-Day Pageviews

A 30-day time-series line chart with a filled area, point markers, and smooth curves. Compare this with the manual Canvas line chart from Module 02 — same visual concept, a fraction of the code.

The Code

// Generate 30 days of labels and simulated pageview data
const labels = [];
const data = [];
const baseDate = new Date('2025-01-01');

for (let i = 0; i < 30; i++) {
    const d = new Date(baseDate);
    d.setDate(d.getDate() + i);
    labels.push(d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }));

    // Simulate realistic pageview data with weekend dips
    const dayOfWeek = d.getDay();
    const base = 450 + Math.floor(Math.random() * 200);
    const weekendDip = (dayOfWeek === 0 || dayOfWeek === 6) ? -150 : 0;
    data.push(base + weekendDip);
}

new Chart(document.getElementById('lineChart'), {
    type: 'line',
    data: {
        labels: labels,
        datasets: [{
            label: 'Daily Pageviews',
            data: data,
            borderColor: '#16a085',
            backgroundColor: 'rgba(22, 160, 133, 0.1)',
            fill: true,
            tension: 0.3,
            pointRadius: 4,
            pointBackgroundColor: '#16a085',
            pointBorderColor: '#fff',
            pointBorderWidth: 2,
            pointHoverRadius: 7
        }]
    },
    options: {
        responsive: true,
        scales: {
            y: {
                beginAtZero: false,
                title: { display: true, text: 'Pageviews' },
                ticks: {
                    callback: function(value) {
                        return value.toLocaleString();
                    }
                }
            },
            x: {
                title: { display: true, text: 'Date' },
                ticks: { maxTicksLimit: 10 }
            }
        },
        plugins: {
            title: {
                display: true,
                text: 'Daily Pageviews — January 2025',
                font: { size: 18 }
            },
            legend: { display: false }
        }
    }
});