Created
December 19, 2025 11:24
-
-
Save Jcbertorello/265c1b5403666148d836524c199b7094 to your computer and use it in GitHub Desktop.
Dashboard Ajonjolí - 2025-12-19 11:24
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Dashboard de Ventas Agosto 2025 - Ajonjolí</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <style> | |
| * { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } | |
| body { | |
| background: linear-gradient(135deg, #fdfbf7 0%, #f3e7d5 100%); | |
| min-height: 100vh; | |
| } | |
| .card { | |
| background: white; | |
| border-radius: 20px; | |
| box-shadow: 0 10px 40px -10px rgba(60,50,40,0.15); | |
| transition: transform 0.3s, box-shadow 0.3s; | |
| } | |
| .card:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 15px 50px -10px rgba(60,50,40,0.2); | |
| } | |
| .kpi-value { | |
| font-size: 2.2rem; | |
| font-weight: 800; | |
| background: linear-gradient(135deg, #2d2a26, #cca352); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .kpi-label { | |
| font-size: 0.75rem; | |
| color: #6b665f; | |
| text-transform: uppercase; | |
| letter-spacing: 0.1em; | |
| font-weight: 600; | |
| } | |
| .progress-bar { | |
| height: 8px; | |
| background: #f3f4f6; | |
| border-radius: 4px; | |
| overflow: hidden; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| border-radius: 4px; | |
| transition: width 1s ease-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .animate-in { animation: fadeIn 0.6s ease-out forwards; opacity: 0; } | |
| .delay-1 { animation-delay: 0.1s; } | |
| .delay-2 { animation-delay: 0.2s; } | |
| .delay-3 { animation-delay: 0.3s; } | |
| .delay-4 { animation-delay: 0.4s; } | |
| .delay-5 { animation-delay: 0.5s; } | |
| </style> | |
| </head> | |
| <body class="p-4 md:p-8"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8 animate-in"> | |
| <div> | |
| <div class="flex items-center gap-3 mb-2"> | |
| <div class="w-12 h-12 bg-gradient-to-br from-amber-500 to-amber-700 rounded-2xl flex items-center justify-center text-white text-xl font-bold shadow-lg">A</div> | |
| <h1 class="text-2xl md:text-3xl font-bold text-gray-800">Dashboard de Ventas Agosto 2025</h1> | |
| </div> | |
| <p class="text-gray-500">Resumen completo de rendimiento comercial del período</p> | |
| </div> | |
| <div class="mt-4 md:mt-0 flex items-center gap-4"> | |
| <button onclick="downloadPDF()" class="flex items-center gap-2 px-4 py-2 bg-amber-500 hover:bg-amber-600 text-white rounded-lg font-semibold text-sm transition-all shadow-md hover:shadow-lg"> | |
| <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg> | |
| Descargar PDF | |
| </button> | |
| <div class="text-sm text-gray-400"> | |
| Generado: 19/12/2025 08:22 | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> | |
| <div class="card p-6 animate-in delay-1"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <p class="kpi-label">Total Ventas</p> | |
| <div class="w-10 h-10 bg-amber-100 rounded-xl flex items-center justify-center"> | |
| <svg class="w-5 h-5 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path></svg> | |
| </div> | |
| </div> | |
| <p class="kpi-value">3.045</p> | |
| <p class="text-sm mt-2 text-gray-500">transacciones en el mes</p> | |
| </div> | |
| <div class="card p-6 animate-in delay-1"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <p class="kpi-label">Facturación</p> | |
| <div class="w-10 h-10 bg-green-100 rounded-xl flex items-center justify-center"> | |
| <svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg> | |
| </div> | |
| </div> | |
| <p class="kpi-value">$13,18M</p> | |
| <p class="text-sm mt-2 text-gray-500">$13.184.832,89 total</p> | |
| </div> | |
| <div class="card p-6 animate-in delay-2"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <p class="kpi-label">Ganancia</p> | |
| <div class="w-10 h-10 bg-emerald-100 rounded-xl flex items-center justify-center"> | |
| <svg class="w-5 h-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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> | |
| <p class="kpi-value">$6,08M</p> | |
| <p class="text-sm mt-2 text-emerald-600 font-medium">46,1% margen</p> | |
| </div> | |
| <div class="card p-6 animate-in delay-2"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <p class="kpi-label">Ticket Promedio</p> | |
| <div class="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center"> | |
| <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 14l6-6m-5.5.5h.01m4.99 5h.01M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16l3.5-2 3.5 2 3.5-2 3.5 2z"></path></svg> | |
| </div> | |
| </div> | |
| <p class="kpi-value">$4.330</p> | |
| <p class="text-sm mt-2 text-gray-500">por transacción</p> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8"> | |
| <div class="card p-6 animate-in delay-3"> | |
| <h3 class="font-bold text-lg text-gray-700 mb-1">Facturación por Categoría</h3> | |
| <p class="text-gray-400 text-sm mb-4">Distribución del ingreso mensual</p> | |
| <div class="h-72"> | |
| <canvas id="categoriaBarChart"></canvas> | |
| </div> | |
| </div> | |
| <div class="card p-6 animate-in delay-3"> | |
| <h3 class="font-bold text-lg text-gray-700 mb-1">Composición de Ventas</h3> | |
| <p class="text-gray-400 text-sm mb-4">Participación porcentual por categoría</p> | |
| <div class="h-72 flex items-center justify-center"> | |
| <canvas id="categoriaDoughnutChart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8"> | |
| <div class="lg:col-span-2 card p-6 animate-in delay-4"> | |
| <h3 class="font-bold text-lg text-gray-700 mb-1">Top 10 Productos Más Vendidos</h3> | |
| <p class="text-gray-400 text-sm mb-6">Ranking por cantidad de unidades vendidas</p> | |
| <div class="space-y-4"> | |
| <div class="flex items-center gap-4"> | |
| <span class="w-8 h-8 bg-amber-500 text-white rounded-lg flex items-center justify-center font-bold text-sm shadow">1</span> | |
| <div class="flex-1"> | |
| <div class="flex justify-between items-center mb-1"> | |
| <span class="font-medium text-gray-700 text-sm">VARIOS</span> | |
| <span class="font-bold text-gray-800">1.906 un.</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill bg-gradient-to-r from-amber-400 to-amber-600" style="width: 100%"></div> | |
| </div> | |
| </div> | |
| <span class="text-sm text-gray-500 w-24 text-right">$765.327</span> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <span class="w-8 h-8 bg-amber-400 text-white rounded-lg flex items-center justify-center font-bold text-sm shadow">2</span> | |
| <div class="flex-1"> | |
| <div class="flex justify-between items-center mb-1"> | |
| <span class="font-medium text-gray-700 text-sm">PAN NUBE AJONJOLI X 4 SALADO</span> | |
| <span class="font-bold text-gray-800">88 un.</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill bg-gradient-to-r from-amber-400 to-amber-600" style="width: 4.6%"></div> | |
| </div> | |
| </div> | |
| <span class="text-sm text-gray-500 w-24 text-right">$312.071</span> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <span class="w-8 h-8 bg-amber-300 text-amber-800 rounded-lg flex items-center justify-center font-bold text-sm shadow">3</span> | |
| <div class="flex-1"> | |
| <div class="flex justify-between items-center mb-1"> | |
| <span class="font-medium text-gray-700 text-sm">BUDIN AJONJOLI NUEZ Y CHOCOLATE</span> | |
| <span class="font-bold text-gray-800">42 un.</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill bg-gradient-to-r from-amber-400 to-amber-600" style="width: 2.2%"></div> | |
| </div> | |
| </div> | |
| <span class="text-sm text-gray-500 w-24 text-right">$409.288</span> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <span class="w-8 h-8 bg-gray-200 text-gray-600 rounded-lg flex items-center justify-center font-bold text-sm">4</span> | |
| <div class="flex-1"> | |
| <div class="flex justify-between items-center mb-1"> | |
| <span class="font-medium text-gray-700 text-sm">PAN PROTEICO SIEMPRE FIT LACTAL</span> | |
| <span class="font-bold text-gray-800">42 un.</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill bg-gradient-to-r from-gray-400 to-gray-500" style="width: 2.2%"></div> | |
| </div> | |
| </div> | |
| <span class="text-sm text-gray-500 w-24 text-right">$300.828</span> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <span class="w-8 h-8 bg-gray-200 text-gray-600 rounded-lg flex items-center justify-center font-bold text-sm">5</span> | |
| <div class="flex-1"> | |
| <div class="flex justify-between items-center mb-1"> | |
| <span class="font-medium text-gray-700 text-sm">YOGURT LA MANCHITA S/LACTOSA FAM.</span> | |
| <span class="font-bold text-gray-800">41 un.</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill bg-gradient-to-r from-gray-400 to-gray-500" style="width: 2.1%"></div> | |
| </div> | |
| </div> | |
| <span class="text-sm text-gray-500 w-24 text-right">$213.635</span> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <span class="w-8 h-8 bg-gray-200 text-gray-600 rounded-lg flex items-center justify-center font-bold text-sm">6</span> | |
| <div class="flex-1"> | |
| <div class="flex justify-between items-center mb-1"> | |
| <span class="font-medium text-gray-700 text-sm">MINI PANCAKES BLW X 200GR</span> | |
| <span class="font-bold text-gray-800">39 un.</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill bg-gradient-to-r from-gray-400 to-gray-500" style="width: 2%"></div> | |
| </div> | |
| </div> | |
| <span class="text-sm text-gray-500 w-24 text-right">$146.629</span> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <span class="w-8 h-8 bg-gray-200 text-gray-600 rounded-lg flex items-center justify-center font-bold text-sm">7</span> | |
| <div class="flex-1"> | |
| <div class="flex justify-between items-center mb-1"> | |
| <span class="font-medium text-gray-700 text-sm">ALFAJOR AJONJOLI S/AZUCAR DDL</span> | |
| <span class="font-bold text-gray-800">36 un.</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill bg-gradient-to-r from-gray-400 to-gray-500" style="width: 1.9%"></div> | |
| </div> | |
| </div> | |
| <span class="text-sm text-gray-500 w-24 text-right">$116.390</span> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <span class="w-8 h-8 bg-gray-200 text-gray-600 rounded-lg flex items-center justify-center font-bold text-sm">8</span> | |
| <div class="flex-1"> | |
| <div class="flex justify-between items-center mb-1"> | |
| <span class="font-medium text-gray-700 text-sm">BUDIN AJONJOLI ARANDANO Y COCO</span> | |
| <span class="font-bold text-gray-800">35 un.</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill bg-gradient-to-r from-gray-400 to-gray-500" style="width: 1.8%"></div> | |
| </div> | |
| </div> | |
| <span class="text-sm text-gray-500 w-24 text-right">$318.214</span> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <span class="w-8 h-8 bg-gray-200 text-gray-600 rounded-lg flex items-center justify-center font-bold text-sm">9</span> | |
| <div class="flex-1"> | |
| <div class="flex justify-between items-center mb-1"> | |
| <span class="font-medium text-gray-700 text-sm">HUEVOS DE CAMPO INNOVA X 30</span> | |
| <span class="font-bold text-gray-800">32 un.</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill bg-gradient-to-r from-gray-400 to-gray-500" style="width: 1.7%"></div> | |
| </div> | |
| </div> | |
| <span class="text-sm text-gray-500 w-24 text-right">$275.669</span> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <span class="w-8 h-8 bg-gray-200 text-gray-600 rounded-lg flex items-center justify-center font-bold text-sm">10</span> | |
| <div class="flex-1"> | |
| <div class="flex justify-between items-center mb-1"> | |
| <span class="font-medium text-gray-700 text-sm">YOGURT TREGAR NATURAL S/AZUCAR</span> | |
| <span class="font-bold text-gray-800">31 un.</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill bg-gradient-to-r from-gray-400 to-gray-500" style="width: 1.6%"></div> | |
| </div> | |
| </div> | |
| <span class="text-sm text-gray-500 w-24 text-right">$28.018</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card p-6 animate-in delay-4"> | |
| <h3 class="font-bold text-lg text-gray-700 mb-1">Detalle por Categoría</h3> | |
| <p class="text-gray-400 text-sm mb-4">Facturación y unidades vendidas</p> | |
| <div class="space-y-3"> | |
| <div class="p-3 bg-gradient-to-r from-amber-50 to-transparent rounded-xl border-l-4 border-amber-500"> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-semibold text-gray-700 text-sm">Panificación</span> | |
| <span class="font-bold text-amber-600">$3,33M</span> | |
| </div> | |
| <span class="text-xs text-gray-500">511 unidades</span> | |
| </div> | |
| <div class="p-3 bg-gray-50 rounded-xl"> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-semibold text-gray-700 text-sm">Galletas</span> | |
| <span class="font-bold text-gray-700">$1,24M</span> | |
| </div> | |
| <span class="text-xs text-gray-500">148 unidades</span> | |
| </div> | |
| <div class="p-3 bg-gray-50 rounded-xl"> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-semibold text-gray-700 text-sm">Varios</span> | |
| <span class="font-bold text-gray-700">$1,18M</span> | |
| </div> | |
| <span class="text-xs text-gray-500">1.961 unidades</span> | |
| </div> | |
| <div class="p-3 bg-gray-50 rounded-xl"> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-semibold text-gray-700 text-sm">Frutos Secos</span> | |
| <span class="font-bold text-gray-700">$924K</span> | |
| </div> | |
| <span class="text-xs text-gray-500">45 unidades</span> | |
| </div> | |
| <div class="p-3 bg-gray-50 rounded-xl"> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-semibold text-gray-700 text-sm">Rapiditos</span> | |
| <span class="font-bold text-gray-700">$895K</span> | |
| </div> | |
| <span class="text-xs text-gray-500">117 unidades</span> | |
| </div> | |
| <div class="p-3 bg-gray-50 rounded-xl"> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-semibold text-gray-700 text-sm">Repostería</span> | |
| <span class="font-bold text-gray-700">$746K</span> | |
| </div> | |
| <span class="text-xs text-gray-500">109 unidades</span> | |
| </div> | |
| <div class="p-3 bg-gray-50 rounded-xl"> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-semibold text-gray-700 text-sm">Mayorista</span> | |
| <span class="font-bold text-gray-700">$394K</span> | |
| </div> | |
| <span class="text-xs text-gray-500">65 unidades</span> | |
| </div> | |
| <div class="p-3 bg-gray-50 rounded-xl"> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-semibold text-gray-700 text-sm">Yogures</span> | |
| <span class="font-bold text-gray-700">$359K</span> | |
| </div> | |
| <span class="text-xs text-gray-500">112 unidades</span> | |
| </div> | |
| <div class="p-3 bg-gray-50 rounded-xl"> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-semibold text-gray-700 text-sm">Harinas</span> | |
| <span class="font-bold text-gray-700">$334K</span> | |
| </div> | |
| <span class="text-xs text-gray-500">76 unidades</span> | |
| </div> | |
| <div class="p-3 bg-gray-50 rounded-xl"> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-semibold text-gray-700 text-sm">Medallones</span> | |
| <span class="font-bold text-gray-700">$258K</span> | |
| </div> | |
| <span class="text-xs text-gray-500">47 unidades</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center py-6 animate-in delay-5"> | |
| <div class="inline-flex items-center gap-2 text-gray-400 text-sm"> | |
| <div class="w-6 h-6 bg-gradient-to-br from-amber-500 to-amber-700 rounded-lg flex items-center justify-center text-white text-xs font-bold">A</div> | |
| <span>Generado por Ajonjolí AI</span> | |
| <span class="text-gray-300">•</span> | |
| <span>19/12/2025 08:22</span> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script> | |
| <script> | |
| function downloadPDF() { | |
| const element = document.body; | |
| const opt = { | |
| margin: 10, | |
| filename: 'dashboard-ventas-agosto-2025-ajonjoli.pdf', | |
| image: { type: 'jpeg', quality: 0.98 }, | |
| html2canvas: { scale: 2, useCORS: true }, | |
| jsPDF: { unit: 'mm', format: 'a4', orientation: 'landscape' } | |
| }; | |
| html2pdf().set(opt).from(element).save(); | |
| } | |
| Chart.defaults.font.family = "system-ui, -apple-system, sans-serif"; | |
| Chart.defaults.color = '#6b665f'; | |
| Chart.defaults.plugins.legend.labels.usePointStyle = true; | |
| Chart.defaults.plugins.legend.labels.padding = 20; | |
| new Chart(document.getElementById('categoriaBarChart'), { | |
| type: 'bar', | |
| data: { | |
| labels: ['Panificación', 'Galletas', 'Varios', 'Frutos Secos', 'Rapiditos', 'Repostería', 'Mayorista', 'Yogures', 'Harinas', 'Medallones'], | |
| datasets: [{ | |
| label: 'Facturación', | |
| data: [3325391, 1239732, 1175194, 923511, 895069, 745724, 394291, 359201, 334031, 257972], | |
| backgroundColor: ['#cca352', '#deb871', '#2d2a26', '#6b665f', '#a89780', '#d4c8b8', '#8b7355', '#c4a67c', '#9c8b7a', '#b5a18e'], | |
| borderRadius: 8, | |
| borderSkipped: false, | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| indexAxis: 'y', | |
| plugins: { | |
| legend: { display: false }, | |
| tooltip: { | |
| callbacks: { | |
| label: function(context) { | |
| return '$' + context.raw.toLocaleString('es-AR'); | |
| } | |
| } | |
| } | |
| }, | |
| scales: { | |
| x: { | |
| beginAtZero: true, | |
| grid: { color: '#f3f4f6' }, | |
| ticks: { | |
| callback: function(value) { | |
| if (value >= 1000000) return '$' + (value / 1000000).toFixed(1) + 'M'; | |
| if (value >= 1000) return '$' + (value / 1000).toFixed(0) + 'K'; | |
| return '$' + value; | |
| } | |
| } | |
| }, | |
| y: { grid: { display: false } } | |
| } | |
| } | |
| }); | |
| new Chart(document.getElementById('categoriaDoughnutChart'), { | |
| type: 'doughnut', | |
| data: { | |
| labels: ['Panificación', 'Galletas', 'Varios', 'Frutos Secos', 'Rapiditos', 'Otros'], | |
| datasets: [{ | |
| data: [25.2, 9.4, 8.9, 7.0, 6.8, 42.7], | |
| backgroundColor: ['#cca352', '#2d2a26', '#6b665f', '#a89780', '#d4c8b8', '#e8e0d5'], | |
| borderWidth: 0, | |
| hoverOffset: 10 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| cutout: '65%', | |
| plugins: { | |
| legend: { | |
| position: 'bottom', | |
| labels: { font: { size: 11 }, padding: 15 } | |
| }, | |
| tooltip: { | |
| callbacks: { | |
| label: function(context) { | |
| return context.label + ': ' + context.raw + '%'; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment