📈 Sales Performance
📊 Revenue by Category
🥧 Market Share
Live🎯 Customer Satisfaction
Excellent📈 Growth Rate
+12.5%🌡️ Temperature Trends
📊 Product Performance
🎪 User Engagement
Real-time💰 Financial Overview
Critical📈 Analytics Dashboard
Updated🚀 Advanced Analytics Dashboard
📋 Chart.js Source Code Examples
Enhanced Line Chart
// Enhanced Line Chart with Chart.js
const lineCtx = document.getElementById('lineChart').getContext('2d');
const lineChart = new Chart(lineCtx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets: [{
label: 'Sales Revenue',
data: [12000, 19000, 15000, 25000, 22000, 30000, 28000, 35000, 32000, 40000, 38000, 45000],
borderColor: '#61bcff',
backgroundColor: 'rgba(97, 188, 255, 0.1)',
borderWidth: 3,
fill: true,
tension: 0.4,
pointBackgroundColor: '#61bcff',
pointBorderColor: '#fff',
pointBorderWidth: 2,
pointRadius: 6
}, {
label: 'Target',
data: [15000, 15000, 15000, 15000, 15000, 15000, 15000, 15000, 15000, 15000, 15000, 15000],
borderColor: '#f56565',
backgroundColor: 'rgba(245, 101, 101, 0.1)',
borderWidth: 2,
borderDash: [5, 5],
fill: false,
tension: 0
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
labels: {
color: chartTextColor,
usePointStyle: true,
padding: 20
}
},
tooltip: {
backgroundColor: 'rgba(0, 0, 0, 0.8)',
titleColor: '#ffffff',
bodyColor: '#ffffff',
borderColor: 'rgba(97, 188, 255, 0.5)',
borderWidth: 1
}
},
scales: {
x: {
grid: {
color: chartGridColor
},
ticks: {
color: chartTextColor
}
},
y: {
grid: {
color: chartGridColor
},
ticks: {
color: chartTextColor,
callback: function(value) {
return '$' + value.toLocaleString();
}
}
}
}
}
});Enhanced Bar Chart
// Enhanced Bar Chart with Chart.js
const barCtx = document.getElementById('barChart').getContext('2d');
const barChart = new Chart(barCtx, {
type: 'bar',
data: {
labels: ['Electronics', 'Clothing', 'Books', 'Home & Garden', 'Sports', 'Beauty'],
datasets: [{
label: 'Q4 Revenue',
data: [45000, 32000, 18000, 25000, 15000, 22000],
backgroundColor: [
'rgba(104, 211, 145, 0.8)',
'rgba(97, 188, 255, 0.8)',
'rgba(190, 130, 250, 0.8)',
'rgba(250, 152, 74, 0.8)',
'rgba(245, 101, 101, 0.8)',
'rgba(234, 73, 152, 0.8)'
],
borderColor: [
'#68d391',
'#61bcff',
'#be82fa',
'#fa984a',
'#f56565',
'#ea4998'
],
borderWidth: 2,
borderRadius: 8,
borderSkipped: false
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
labels: {
color: chartTextColor,
usePointStyle: true,
padding: 20
}
},
tooltip: {
backgroundColor: 'rgba(0, 0, 0, 0.8)',
titleColor: '#ffffff',
bodyColor: '#ffffff',
callbacks: {
label: function(context) {
return 'Revenue: $' + context.parsed.y.toLocaleString();
}
}
}
},
scales: {
x: {
grid: {
color: chartGridColor
},
ticks: {
color: chartTextColor
}
},
y: {
grid: {
color: chartGridColor
},
ticks: {
color: chartTextColor,
callback: function(value) {
return '$' + value.toLocaleString();
}
}
}
}
}
});Chart.js Theme Integration
// Theme-aware Chart.js configuration
function getCSSVar(varName) {
return getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
}
// Get theme-aware colors
const chartTextColor = getCSSVar('--chart-text-color') || 'rgba(255, 255, 255, 0.8)';
const chartGridColor = getCSSVar('--chart-grid-color') || 'rgba(255, 255, 255, 0.1)';
// Example usage in Chart.js
const chartOptions = {
plugins: {
legend: {
labels: {
color: chartTextColor,
usePointStyle: true,
padding: 20
}
},
tooltip: {
backgroundColor: 'rgba(0, 0, 0, 0.8)',
titleColor: '#ffffff',
bodyColor: '#ffffff'
}
},
scales: {
x: {
grid: {
color: chartGridColor
},
ticks: {
color: chartTextColor
}
},
y: {
grid: {
color: chartGridColor
},
ticks: {
color: chartTextColor,
callback: function(value) {
return '$' + value.toLocaleString();
}
}
}
}
};
// Initialize chart with theme-aware options
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: chartData,
options: chartOptions
});