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

368

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

Card KPI
Targetas ahora con un grafico

Author:
Raul antonio de la cruz hernandez

2 months ago

500
Total balance overview

Author:
Raul antonio de la cruz hernandez

2 months ago

284
Targeta
Targeta

Author:
Raul antonio de la cruz hernandez

2 months ago

302
KPI Cards
estilo Shopify / Stripe

Author:
Raul antonio de la cruz hernandez

2 months ago

92
sidebar dash
sidebar dash

Author:
Omer fils ELENGA

2 weeks ago

44
Features cards section
Features cards section with dark theme

Author:
Sophia Baker

3 years ago

10.5k
Responsive Dashboard
1. Background Colors: 1. Main background: `bg-indigo-50` 2. Welcome card: `bg-indigo-100` with `border-indigo-200` 3. Inbox card: `bg-blue-100` with `border-blue-200` 4. Overlay: `bg-indigo-900/50` 2. Text Colors: 1. Header text: `text-indigo-800` 2. Logo: `text-blue-900` and `text-indigo-800` 3. Menu items hover: `hover:text-indigo-800` 4. Card headings: `text-blue-900` 3. Button/Badge Colors: 1. Welcome badge: `bg-indigo-800` 2. Inbox button: `bg-blue-800` with `hover:bg-blue-900` 3. Stats card titles: `text-indigo-800` 4. Maintained all functionality: 1. Responsive design 2. Animations and transitions 3. Mobile menu 4. Hover effects 5. Notification animation The color scheme now uses a mix of Indigo-800 and Blue-900 while maintaining visual hierarchy and accessibility. The colors create a professional and cohesive look across all components.

Author:
nejaa badr

1 year ago

4.3k
Card Component Simple
This is a Card Component for simple use &full responsive

Author:
Shariar Hasan

1 year ago

2.9k
Confirmation modal/card

Author:
Sophia Baker

3 years ago

15.6k
What is Webby
Webby is a PHP Framework built on top of Codeigniter 3 for easy PHP web application development using both HMVC and MVC patterns.

Author:
Developer Kwame

1 year ago

2.1k
Team Members Showcase with Portfolio Backlink
Showcase your team's talent with this beautifully designed and responsive team members grid. Each card includes the member's photo, name, role, and social links. A special portfolio backlink is included to highlight your personal contributions as a developer. Supports light and dark modes.

Author:
Abhiraj

1 year ago

1.7k
Tailwind image grid
tailwind picture grid

Author:
Anonymous

2 years ago

10.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components