Charts

<canvas id="chartBar" style="max-height:260px;"></canvas>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
<script>
    new Chart(document.getElementById('chartBar'), {
        type: 'bar',
        data: {
            labels: ['Jan','Feb','Mar','Apr','May','Jun'],
            datasets: [{
                label: 'Revenue',
                data: [12, 19, 15, 22, 28, 34],
                backgroundColor: '#1e3a8a',
                borderRadius: 6,
                barThickness: 32,
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: { legend: { display: false } },
            scales: {
                y: { beginAtZero: true, grid: { color: '#f1f5f9' } },
                x: { grid: { display: false } }
            }
        }
    });
</script>

<canvas id="chartLine"></canvas>

<script>
    new Chart(document.getElementById('chartLine'), {
        type: 'line',
        data: {
            labels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
            datasets: [{
                label: 'Visitors',
                data: [120, 190, 170, 240, 290, 380, 410],
                borderColor: '#1e3a8a',
                backgroundColor: 'rgba(30, 58, 138, 0.08)',
                tension: 0.4,
                fill: true,
                pointBackgroundColor: '#1e3a8a',
                pointBorderColor: '#fff',
                pointBorderWidth: 2,
                pointRadius: 5,
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: { legend: { display: false } },
            scales: {
                y: { beginAtZero: true, grid: { color: '#f1f5f9' } },
                x: { grid: { display: false } }
            }
        }
    });
</script>

<canvas id="chartDonut"></canvas>

<script>
    new Chart(document.getElementById('chartDonut'), {
        type: 'doughnut',
        data: {
            labels: ['Direct', 'Search', 'Social', 'Referral'],
            datasets: [{
                data: [45, 25, 20, 10],
                backgroundColor: ['#1e3a8a','#0891b2','#059669','#d97706'],
                borderWidth: 0,
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            cutout: '65%',
            plugins: {
                legend: { position: 'bottom', labels: { padding: 16, font: { size: 12 } } }
            }
        }
    });
</script>

<canvas id="chartSpark" style="width:100px;height:40px;"></canvas>

<script>
    new Chart(document.getElementById('chartSpark'), {
        type: 'line',
        data: {
            labels: Array.from({length: 12}, (_, i) => i),
            datasets: [{
                data: [3, 5, 4, 6, 5, 7, 8, 6, 9, 10, 9, 12],
                borderColor: '#059669',
                borderWidth: 2,
                tension: 0.4,
                pointRadius: 0,
                fill: false,
            }]
        },
        options: {
            responsive: false,
            plugins: { legend: { display: false } },
            scales: { x: { display: false }, y: { display: false } }
        }
    });
</script>

<canvas id="chartStacked"></canvas>

<script>
    new Chart(document.getElementById('chartStacked'), {
        type: 'bar',
        data: {
            labels: ['Q1','Q2','Q3','Q4'],
            datasets: [
                { label: 'Product A', data: [12, 19, 15, 22], backgroundColor: '#1e3a8a', borderRadius: 6 },
                { label: 'Product B', data: [8, 11, 13, 14],  backgroundColor: '#0891b2', borderRadius: 6 },
                { label: 'Product C', data: [5, 7, 9, 11],    backgroundColor: '#059669', borderRadius: 6 },
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: { legend: { position: 'bottom' } },
            scales: {
                x: { stacked: true, grid: { display: false } },
                y: { stacked: true, beginAtZero: true, grid: { color: '#f1f5f9' } }
            }
        }
    });
</script>

<canvas id="chartHBar"></canvas>

<script>
    new Chart(document.getElementById('chartHBar'), {
        type: 'bar',
        data: {
            labels: ['Chrome','Safari','Firefox','Edge','Other'],
            datasets: [{
                data: [64, 19, 7, 5, 5],
                backgroundColor: ['#1e3a8a','#0891b2','#059669','#d97706','#94a3b8'],
                borderRadius: 6,
                barThickness: 24,
            }]
        },
        options: {
            indexAxis: 'y',
            responsive: true,
            maintainAspectRatio: false,
            plugins: { legend: { display: false } },
            scales: {
                x: { beginAtZero: true, grid: { color: '#f1f5f9' } },
                y: { grid: { display: false } }
            }
        }
    });
</script>