Mini Chart Card

Visually represent major data trends at a glance with this dynamic, data-driven mini chart card.

This is a convenient dashboard component for displaying metrics like user growth, revenue, or traffic sources. It pairs a key statistic with a chart graphic that is rendered from actual data using the popular Chart.js library.

Screenshot of three dashboard cards, each showing a statistical figure and a different type of chart.

Get Source Code Preview

About this Component

Unlike a static graphic, this template uses a JavaScript charting library called Chart.js to draw real, data-driven charts. This means you can easily feed it your own numbers to generate visualizations. The example provides the setup for a line, bar, and pie chart, all styled for a minimal "mini chart" look suitable for dashboards.

Features

Data-Driven Charts: Renders charts from data you provide in the JavaScript.
Powered by Chart.js: Relies on a popular, reliable, and lightweight charting library loaded from a CDN for ease of use.
Multiple Chart Types: The example includes the configuration for a line chart, bar chart, and pie chart.
Minimalist Design: The chart options are configured to hide legends and axes, creating the clean "sparkline" look perfect for dashboards.

Code Breakdown

HTML Structure

Each card is a simple div containing a header for the text and a container for the chart. Inside the chart container is a single canvas element with a unique id (e.g., id="lineChart"). The JavaScript will use this id to find the canvas and draw the chart on it.

JavaScript Logic

The functionality requires two script tags, placed at the end of your body.

Chart.js Library: The first script tag imports the Chart.js library from a CDN. This must be included for the charts to work.
Chart Configuration: The second script contains your custom logic. It finds each canvas element by its id. For each one, it creates a new Chart instance, passing it the canvas context and a configuration object. This object specifies the chart type (e.g., 'line'), the data (including labels for the axes and datasets with your numbers), and the options for customizing the appearance. The data property is where you will insert your own data.

Code

Here is the complete code. To adapt it, replace the placeholder data inside the data properties in the JavaScript with your own values and labels.

<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>

View Output