Mini Chart Card

<!DOCTYPE html>
<title>My Example</title>

<style>
/* This is an optional body style to provide a background for the page */
body {
    background-color: #f3f4f6;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}

/* === Grid Container for the Cards === */
.cards-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    padding: 1.5rem;
}

/* === Mini Chart Card Styles === */
.mc-card {
    --mc-card-radius: 12px;
    --mc-card-shadow: 0 4px 10px rgba(0,0,0,0.06);
    
    background-color: #ffffff;
    border-radius: var(--mc-card-radius);
    box-shadow: var(--mc-card-shadow);
    padding: 1.5rem;
}

.mc-card-title {
    font-size: 1rem;
    font-weight: 500;
    color: #6b7280;
    margin: 0 0 0.5rem;
}

.mc-card-figure {
    font-size: 2rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.mc-chart-container {
    position: relative;
    margin-top: 1.5rem;
    height: 120px;
}
</style>

<div class="cards-grid-container">

<div class="mc-card">
        <h3 class="mc-card-title">User Signups</h3>
        <p class="mc-card-figure">+11.2%</p>
        <div class="mc-chart-container">
            <canvas id="lineChart"></canvas>
        </div>
    </div>

<div class="mc-card">
        <h3 class="mc-card-title">Revenue by Month</h3>
        <p class="mc-card-figure">$12.4k</p>
        <div class="mc-chart-container">
            <canvas id="barChart"></canvas>
        </div>
    </div>
    
    
    <div class="mc-card">
        <h3 class="mc-card-title">Traffic Source</h3>
        <p class="mc-card-figure">Organic</p>
        <div class="mc-chart-container">
            <canvas id="pieChart"></canvas>
        </div>
    </div>

</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
document.addEventListener('DOMContentLoaded', () => {

// === Line Chart Example ===
    const lineCtx = document.getElementById('lineChart');
    if (lineCtx) {
        new Chart(lineCtx, {
            type: 'line',
            data: {
                labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], // Your X-axis labels
                datasets: [{
                    label: 'Signups',
                    data: [12, 19, 15, 22, 18, 25], // Your Y-axis data
                    borderColor: '#4f46e5',
                    backgroundColor: 'rgba(79, 70, 229, 0.1)',
                    fill: true,
                    tension: 0.4,
                    pointRadius: 0
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: { legend: { display: false } },
                scales: {
                    x: { display: false },
                    y: { display: false }
                }
            }
        });
    }

// === Bar Chart Example ===
    const barCtx = document.getElementById('barChart');
    if (barCtx) {
        new Chart(barCtx, {
            type: 'bar',
            data: {
                labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], // Your X-axis labels
                datasets: [{
                    label: 'Revenue',
                    data: [3, 5, 6, 8, 7, 9], // Your Y-axis data
                    backgroundColor: '#16a34a'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: { legend: { display: false } },
                scales: {
                    x: { display: false },
                    y: { display: false }
                }
            }
        });
    }
    
    // === Pie Chart Example ===
    const pieCtx = document.getElementById('pieChart');
    if (pieCtx) {
        new Chart(pieCtx, {
            type: 'pie',
            data: {
                labels: ['Organic', 'Referral', 'Social'], // Your data labels
                datasets: [{
                    label: 'Traffic Source',
                    data: [55, 25, 20], // Your data values
                    backgroundColor: ['#f59e0b', '#f97316', '#ea580c']
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: { legend: { display: false } }
            }
        });
    }

});
</script>