Card kpi Chart

Targetas kpi con graficas

This tailwind example is contributed by Raul antonio de la cruz hernandez, on 11-Nov-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Admin Dashboard, User dashboard

Card Dashboard

Author Raul antonio de la cruz hernandez

Fork Fullscreen

<!DOCTYPE html>
<html lang="es" class=""> 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>KPIs con Diseño Premium</title>

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

<link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    
    <style>
        body {
            font-family: 'Inter', sans-serif;
            /* Fondo degradado sutil para el efecto de cristal */
            background-color: #f3f4f6; /* Fallback modo claro */
            background-image: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
        }

.dark body {
            background-color: #030712; /* Fallback modo oscuro (gray-950) */
            background-image: linear-gradient(135deg, #030712 0%, #111827 100%);
        }

/* Estilo de Tarjeta "Glassmorphism" */
        .cool-kpi-card {
            /* Fondo semi-transparente con desenfoque */
            background-color: rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px); /* Soporte para Safari */
            
            /* Borde sutil para definir la tarjeta */
            border: 1px solid rgba(255, 255, 255, 0.2);
            
            /* Transiciones y sombra */
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }

/* Estilo de Tarjeta en Modo Oscuro */
        .dark .cool-kpi-card {
            background-color: rgba(31, 41, 55, 0.5); /* gray-800 con 50% opacidad */
            border: 1px solid rgba(55, 65, 81, 0.5); /* gray-700 con 50% opacidad */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

/* Efecto Hover más pronunciado */
        .cool-kpi-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
            background-color: rgba(255, 255, 255, 0.8);
        }

.dark .cool-kpi-card:hover {
            background-color: rgba(31, 41, 55, 0.7);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }
    </style>
</head>
<body class="bg-gray-100 dark:bg-gray-950 text-gray-900 dark:text-gray-100 min-h-screen p-8 transition-colors duration-300">

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">

<div class="cool-kpi-card p-6 rounded-2xl">
                <div class="flex justify-between items-center mb-2">
                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Tráfico Web</span>
                    <div class="p-2 bg-blue-500/10 dark:bg-blue-500/20 rounded-lg">
                        <svg class="w-5 h-5 text-blue-600 dark:text-blue-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path></svg>
                    </div>
                </div>
                <div class="text-4xl font-bold text-gray-900 dark:text-white mb-4">78,2K</div>
                <div class="h-24 w-full">
                    <canvas id="sparkAreaChart"></canvas>
                </div>
            </div>

<div class="cool-kpi-card p-6 rounded-2xl">
                <div class="flex justify-between items-center mb-2">
                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Registros Diarios</span>
                    <div class="p-2 bg-indigo-500/10 dark:bg-indigo-500/20 rounded-lg">
                         <svg class="w-5 h-5 text-indigo-600 dark:text-indigo-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 8v8m-4-5v5m-4-2v2M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                    </div>
                </div>
                <div class="text-4xl font-bold text-gray-900 dark:text-white mb-4">451</div>
                <div class="h-24 w-full">
                    <canvas id="sparkBarChart"></canvas>
                </div>
            </div>

<div class="cool-kpi-card p-6 rounded-2xl">
                 <div class="flex justify-between items-center mb-2">
                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Meta de Tareas</span>
                     <div class="p-2 bg-green-500/10 dark:bg-green-500/20 rounded-lg">
                        <svg class="w-5 h-5 text-green-600 dark:text-green-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                    </div>
                </div>
                <div class="text-4xl font-bold text-gray-900 dark:text-white mb-4">85%</div>
                <div class="h-24 w-full flex items-center justify-center">
                    <div class="w-24 h-24"> 
                        <canvas id="sparkDoughnutChart"></canvas>
                    </div>
                </div>
            </div>
            
            
            <div class="cool-kpi-card p-6 rounded-2xl">
                <div class="flex justify-between items-center mb-2">
                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Tasa de Rebote</span>
                    <div class="p-2 bg-red-500/10 dark:bg-red-500/20 rounded-lg">
                        <svg class="w-5 h-5 text-red-600 dark:text-red-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 17h8m0 0v-8m0 8l-8-8-4 4-6-6"></path></svg>
                    </div>
                </div>
                <div class="text-4xl font-bold text-gray-900 dark:text-white mb-4">21.4%</div>
                <div class="h-24 w-full">
                    <canvas id="sparkLineChart"></canvas>
                </div>
            </div>

</div> 
    </div>

// --- Helper para Configuración de Tooltip ---
        function getTooltipConfig(colors) {
            return {
                enabled: true,
                mode: 'index',
                intersect: false,
                displayColors: false,
                backgroundColor: colors.tooltipBg,
                titleColor: colors.tooltipTitle,
                bodyColor: colors.tooltipBody,
                padding: 10,
                cornerRadius: 6,
                titleFont: { family: 'Inter', size: 12, weight: '500' },
                bodyFont: { family: 'Inter', size: 14, weight: 'bold' },
                callbacks: {
                    title: (tooltipItems) => tooltipItems[0].label,
                    label: (tooltipItem) => ` ${tooltipItem.formattedValue}`
                }
            };
        }

// --- Inicialización de TODOS los Gráficos ---
        function initCharts() {
            const isDark = document.documentElement.classList.contains('dark');
            const colors = isDark ? chartColors.dark : chartColors.light;

// 1. Gráfico de ÁREA
            const ctxArea = document.getElementById('sparkAreaChart')?.getContext('2d');
            if (ctxArea) {
                sparkAreaChart = new Chart(ctxArea, {
                    type: 'line',
                    data: {
                        labels: ['Día 1', 'Día 2', 'Día 3', 'Día 4', 'Día 5', 'Día 6', 'Día 7'],
                        datasets: [{
                            label: 'Tráfico', data: [30, 40, 25, 50, 45, 60, 55],
                            borderColor: colors.line,
                            borderWidth: 2,
                            fill: true,
                            backgroundColor: colors.areaBg,
                            tension: 0.4,
                            pointRadius: 0, pointHoverRadius: 6,
                            pointHoverBackgroundColor: colors.line, pointHoverBorderColor: '#ffffff'
                        }]
                    },
                    options: {
                        responsive: true, maintainAspectRatio: false,
                        plugins: { legend: { display: false }, tooltip: getTooltipConfig(colors) },
                        scales: { x: { display: false }, y: { display: false } }
                    }
                });
            }

// 2. Gráfico de BARRAS
            const ctxBar = document.getElementById('sparkBarChart')?.getContext('2d');
            if (ctxBar) {
                sparkBarChart = new Chart(ctxBar, {
                    type: 'bar',
                    data: {
                        labels: ['Día 1', 'Día 2', 'Día 3', 'Día 4', 'Día 5', 'Día 6', 'Día 7'],
                        datasets: [{
                            label: 'Registros', data: [120, 150, 130, 180, 160, 200, 190],
                            backgroundColor: colors.bar,
                            hoverBackgroundColor: colors.barHover,
                            borderRadius: 4
                        }]
                    },
                    options: {
                        responsive: true, maintainAspectRatio: false,
                        plugins: { legend: { display: false }, tooltip: getTooltipConfig(colors) },
                        scales: { x: { display: false }, y: { display: false } }
                    }
                });
            }

// 3. Gráfico de DONA (Pie)
            const ctxDoughnut = document.getElementById('sparkDoughnutChart')?.getContext('2d');
            if (ctxDoughnut) {
                sparkDoughnutChart = new Chart(ctxDoughnut, {
                    type: 'doughnut',
                    data: {
                        labels: ['Completado', 'Pendiente'],
                        datasets: [{
                            data: [85, 15], // 85% completado
                            backgroundColor: [colors.doughnutPrimary, colors.doughnutBg],
                            borderColor: colors.doughnutBorder,
                            borderWidth: 3
                        }]
                    },
                    options: {
                        responsive: true, maintainAspectRatio: true,
                        cutout: '75%', // Grosor de la dona
                        plugins: {
                            legend: { display: false },
                            tooltip: { // Tooltip personalizado para donas
                                enabled: true, displayColors: false,
                                backgroundColor: colors.tooltipBg, titleColor: colors.tooltipTitle, bodyColor: colors.tooltipBody,
                                padding: 8, cornerRadius: 6,
                                callbacks: {
                                    label: (tooltipItem) => ` ${tooltipItem.label}: ${tooltipItem.formattedValue}%`
                                }
                            }
                        }
                    }
                });
            }

// 4. Gráfico de LÍNEA
            const ctxLine = document.getElementById('sparkLineChart')?.getContext('2d');
            if (ctxLine) {
                sparkLineChart = new Chart(ctxLine, {
                    type: 'line',
                     data: {
                        labels: ['Día 1', 'Día 2', 'Día 3', 'Día 4', 'Día 5', 'Día 6', 'Día 7'],
                        datasets: [{
                            label: 'Tasa', data: [25, 22, 24, 20, 21, 19, 21.4],
                            borderColor: colors.line2,
                            borderWidth: 2,
                            fill: false, // Sin relleno
                            tension: 0.4,
                            pointRadius: 0, pointHoverRadius: 6,
                            pointHoverBackgroundColor: colors.line2, pointHoverBorderColor: '#ffffff'
                        }]
                    },
                    options: {
                        responsive: true, maintainAspectRatio: false,
                        plugins: { legend: { display: false }, tooltip: getTooltipConfig(colors) },
                        scales: { x: { display: false }, y: { display: false } }
                    }
                });
            }
        }

// --- Actualización de Colores (al cambiar de tema) ---
        function updateCharts() {
            const isDark = document.documentElement.classList.contains('dark');
            const colors = isDark ? chartColors.dark : chartColors.light;

// Actualizar Tooltip genérico
            const newTooltipConfig = getTooltipConfig(colors);
            
            if (sparkAreaChart) {
                const ds = sparkAreaChart.data.datasets[0];
                ds.borderColor = colors.line;
                ds.backgroundColor = colors.areaBg;
                ds.pointHoverBackgroundColor = colors.line;
                sparkAreaChart.options.plugins.tooltip = newTooltipConfig;
                sparkAreaChart.update('none');
            }
            if (sparkBarChart) {
                const ds = sparkBarChart.data.datasets[0];
                ds.backgroundColor = colors.bar;
                ds.hoverBackgroundColor = colors.barHover;
                sparkBarChart.options.plugins.tooltip = newTooltipConfig;
                sparkBarChart.update('none');
            }
            if (sparkDoughnutChart) {
                const ds = sparkDoughnutChart.data.datasets[0];
                ds.backgroundColor = [colors.doughnutPrimary, colors.doughnutBg];
                ds.borderColor = colors.doughnutBorder;
                sparkDoughnutChart.options.plugins.tooltip.backgroundColor = colors.tooltipBg;
                sparkDoughnutChart.options.plugins.tooltip.titleColor = colors.tooltipTitle;
                sparkDoughnutChart.options.plugins.tooltip.bodyColor = colors.tooltipBody;
                sparkDoughnutChart.update('none');
            }
            if (sparkLineChart) {
                const ds = sparkLineChart.data.datasets[0];
                ds.borderColor = colors.line2;
                ds.pointHoverBackgroundColor = colors.line2;
                sparkLineChart.options.plugins.tooltip = newTooltipConfig;
                sparkLineChart.update('none');
            }
        }
        document.addEventListener('DOMContentLoaded', initCharts);
    </script>

</body>
</html>

Related Examples

Feature Card

Author:
Md. Tofayel islam

1 year ago

1.6k
Product Details Card

Author:
ABDO-SY

8 months ago

1.8k
pange
pejdz

Author:
Anonymous

1 year ago

11.7k
Info card

Author:
Samuel Dawson

2 years ago

10k
Blog Card
A blog card with dark-mode

Author:
Robert Chunga

11 months ago

1.7k
Animated cards with Tailwind CSS

Author:
Michael Andreuzza

1 year ago

11.6k
Admin Panel
Source https://gist.github.com/visualval/8aaaad794256313fa2310b997e8a9b8f

Author:
Lior Medan

1 year ago

2.6k
Food delivery ecommerce Card

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

10 months ago

1.6k
Cards section - Sport

Author:
ABDO-SY

8 months ago

2.1k
Adim dashboard
The dashboard includes practical admin components like user management, revenue tracking, order management, system monitoring, and performance metrics - all styled with vibrant colors and modern gradients using Tailwind CSS!

Author:
ishimwe prince

5 months ago

1.9k
Issue card
card designed to display the details of a technical issue

Author:
ABDO-SY

9 months ago

1.9k
Card blog
Targeta para blog

Author:
Raul antonio de la cruz hernandez

19 hours ago

4

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components