document.addEventListener('DOMContentLoaded', function() { // Sample data - replace with actual API calls if needed const months = ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez']; const tokenData = { labels: months, datasets: [{ label: 'Tokens Gerados', data: [1245, 1890, 1823, 2345, 2789, 3021, 3420, 3210, 2956, 2567, 2108, 1765], backgroundColor: 'rgba(255, 88, 15, 0.8)', borderColor: 'rgba(255, 61, 0, 1)', borderWidth: 1, borderRadius: { topLeft: 6, topRight: 6 }, borderSkipped: false }] }; // Chart configuration const config = { type: 'bar', data: tokenData, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false }, tooltip: { callbacks: { label: function(context) { return context.parsed.y.toLocaleString() + ' tokens'; } } } }, scales: { y: { beginAtZero: true, grid: { drawBorder: false, color: 'rgba(0, 0, 0, 0.05)' }, ticks: { callback: function(value) { return value.toLocaleString(); } } }, x: { grid: { display: false } } }, animation: { duration: 1000, easing: 'easeOutQuart' } } }; // Initialize chart const ctx = document.getElementById('tokenChart').getContext('2d'); new Chart(ctx, config); });