Country Sessions
Radial Chart
Pyramid Chart
Sessions by Countries
Sessions by Countries
Device Analytics
Sessions by Countries
Sessions by Countries
📋 ApexCharts Source Code Examples
Enhanced Donut Chart
// Enhanced Donut Chart Configuration
var optionsEight = {
series: [44, 55, 13, 43, 22],
chart: {
type: 'donut',
background: 'transparent',
height: 350,
width: '100%',
animations: {
enabled: true,
easing: 'easeinout',
speed: 800
}
},
labels: ['Desktop', 'Mobile', 'Tablet', 'Smart TV', 'Other'],
colors: ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6'],
legend: {
position: 'bottom',
horizontalAlign: 'center',
fontSize: '14px',
labels: {
colors: chartTextColor,
useSeriesColors: false
}
},
dataLabels: {
enabled: true,
style: {
fontSize: '14px',
fontWeight: 'bold',
colors: ['#ffffff']
},
background: {
enabled: true,
foreColor: '#ffffff',
padding: 4,
borderRadius: 2,
opacity: 0.9
}
},
plotOptions: {
pie: {
donut: {
size: '65%',
labels: {
show: true,
name: {
show: true,
fontSize: '16px',
fontWeight: 600,
color: chartTextColor
},
value: {
show: true,
fontSize: '24px',
fontWeight: 700,
color: chartTextColor
}
}
}
}
},
fill: {
type: 'gradient',
gradient: {
shade: 'light',
type: 'vertical',
shadeIntensity: 0.5,
gradientToColors: ['#1D4ED8', '#059669', '#D97706', '#DC2626', '#7C3AED'],
opacityFrom: 0.8,
opacityTo: 0.6
}
}
};
var chart = new ApexCharts(document.querySelector("#chart8"), optionsEight);
chart.render();Line Chart with Theme Support
// ApexCharts Line Chart with Theme Support
var optionsFive = {
series: [{
name: "High - 2013",
data: [28, 29, 33, 36, 32, 32, 33]
}, {
name: "Low - 2013",
data: [12, 11, 14, 18, 17, 13, 13]
}],
chart: {
height: 350,
type: 'line',
background: 'transparent',
dropShadow: {
enabled: true,
color: '#000',
top: 18,
left: 7,
blur: 10,
opacity: 0.2
}
},
colors: ['#77B6EA', '#10B981'],
dataLabels: {
enabled: true
},
stroke: {
curve: 'smooth'
},
title: {
text: 'Average High & Low Temperature',
align: 'left',
style: {
color: chartTextColor
}
},
grid: {
borderColor: chartGridColor,
row: {
colors: [chartGridColor, 'transparent'],
opacity: 0.3
}
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
title: {
text: 'Month',
style: {
color: chartTextColor
}
},
labels: {
style: {
colors: chartTextColor
}
}
},
yaxis: {
title: {
text: 'Temperature',
style: {
color: chartTextColor
}
},
labels: {
style: {
colors: chartTextColor
}
}
},
legend: {
position: 'top',
horizontalAlign: 'right',
floating: true,
offsetY: -25,
offsetX: -5,
labels: {
colors: chartTextColor
}
},
tooltip: {
theme: document.documentElement.getAttribute('data-bs-theme') === 'dark' ? 'dark' : 'light'
}
};
var chart = new ApexCharts(document.querySelector("#chart5"), optionsFive);
chart.render();Theme Integration & CSS Variables
// Theme-aware chart 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 ApexCharts
var options = {
chart: {
background: 'transparent'
},
xaxis: {
labels: {
style: {
colors: chartTextColor
}
}
},
yaxis: {
labels: {
style: {
colors: chartTextColor
}
}
},
grid: {
borderColor: chartGridColor,
row: {
colors: [chartGridColor, 'transparent'],
opacity: 0.3
}
},
legend: {
labels: {
colors: chartTextColor
}
},
tooltip: {
theme: document.documentElement.getAttribute('data-bs-theme') === 'dark' ? 'dark' : 'light'
}
};