Installation
ApexCharts is installed via NPM as a third-party dependency by referring to
package.json
.
During the
Theme Installation
process,
it is compiled by the
Build Tools
into the
/dist/assets/vendors/apexcharts
directory.
Require Assets
To use ApexCharts in your pages, you need to include the following dependency assets in the order shown.
<!DOCTYPE html>
<html>
<head>
<!--Vendor styles -->
<link href="/dist/assets/vendors/apexcharts/apexcharts.css" rel="stylesheet"/>
<!--Core styles-->
<link href="/dist/assets/css/styles.css" rel="stylesheet"/>
</head>
<body>
<h1>
Hello world!
</h1>
<!--Core bundle script-->
<script src="/dist/assets/js/core.bundle.js">
</script>
<!--Vendor script -->
<script src="/dist/assets/vendors/apexcharts/apexcharts.min.js">
</script>
<!--Custom script -->
<script src="/dist/assets/pages/plugins/apexcharts/area-chart.js">
</script>
</body>
</html>
Area Chart
An example of an interactive area chart featuring
a preview tooltip that displays detailed information when hovering over specific data points.
Area Chart
class KTExampleAreaChart {
static init() {
const data = [75, 25, 45, 15, 85, 35, 70, 25, 35, 15, 45, 30];
const categories = [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec',
];
const options = {
series: [
{
name: 'series1',
data: data,
},
],
chart: {
height: 250,
type: 'area',
toolbar: {
show: false,
},
},
dataLabels: {
enabled: false,
},
legend: {
show: false,
},
stroke: {
curve: 'smooth',
show: true,
width: 3,
colors: ['var(--color-primary)'],
},
xaxis: {
categories: categories,
axisBorder: {
show: false,
},
maxTicks: 12,
axisTicks: {
show: false,
},
labels: {
style: {
colors: 'var(--color-secondary-foreground)',
fontSize: '12px',
},
},
crosshairs: {
position: 'front',
stroke: {
color: 'var(--color-primary)',
width: 1,
dashArray: 3,
},
},
tooltip: {
enabled: false,
formatter: undefined,
offsetY: 0,
style: {
fontSize: '12px',
},
},
},
yaxis: {
min: 0,
max: 100,
tickAmount: 5, // This will create 5 ticks: 0, 20, 40, 60, 80, 100
axisTicks: {
show: false,
},
labels: {
style: {
colors: 'var(--color-secondary-foreground)',
fontSize: '12px',
},
formatter: (value) => {
return `$${value}K`;
},
},
},
tooltip: {
enabled: true,
custom({ series, seriesIndex, dataPointIndex, w }) {
const number = parseInt(series[seriesIndex][dataPointIndex]) * 1000;
const month = w.globals.seriesX[seriesIndex][dataPointIndex];
const monthName = categories[month];
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
});
const formattedNumber = formatter.format(number);
return `
<div class="flex flex-col gap-2 p-3.5">
<div class="font-medium text-2sm text-white">
${monthName}, 2025 Sales
</div>
<div class="flex items-center gap-1.5">
<div class="font-semibold text-md text-mono">
${formattedNumber}
</div>
<span class="kt-kt-badge kt-kt-badge-outline kt-kt-badge-success kt-badge-sm">
+24%
</span>
</div>
</div>
`;
},
},
markers: {
size: 0,
colors: 'var(--color-primary)',
strokeColors: 'var(--color-primary)',
strokeWidth: 4,
strokeOpacity: 1,
strokeDashArray: 0,
fillOpacity: 1,
discrete: [],
shape: 'circle',
radius: 2,
offsetX: 0,
offsetY: 0,
onClick: undefined,
onDblClick: undefined,
showNullDataPoints: true,
hover: {
size: 8,
sizeOffset: 0,
},
},
fill: {
gradient: {
enabled: true,
opacityFrom: 0.25,
opacityTo: 0,
},
},
grid: {
borderColor: 'var(--color-border)',
strokeDashArray: 5,
clipMarkers: false,
yaxis: {
lines: {
show: true,
},
},
xaxis: {
lines: {
show: false,
},
},
},
};
const element = document.querySelector('#area_chart');
if (!element) return;
const chart = new ApexCharts(element, options);
chart.render();
}
}
KTDom.ready(() => {
KTExampleAreaChart.init();
});
<div class="kt-card">
<div class="kt-card-header">
<h3 class="kt-card-title">
Area Chart
</h3>
<button class="kt-btn kt-btn-icon kt-btn-outline">
<i class="ki-outline ki-dots-vertical">
</i>
</button>
</div>
<div class="px-3 py-1">
<div id="area_chart">
</div>
</div>
</div>
Pie Chart
An example of an interactive pie chart to express data and information in terms of percentages and ratios.
Pie Chart
class KTExamplePieChart {
static init() {
const data = [44, 55, 41, 17, 15];
const labels = ['ERP', 'HRM', 'DMS', 'CRM', 'DAM'];
const colors = [
'var(--color-primary)',
'var(--color-orange-500)',
'var(--color-green-500)',
'var(--color-violet-500)',
'var(--color-yellow-500)',
];
const options = {
series: data,
labels: labels,
colors: colors,
fill: {
colors: colors,
},
chart: {
type: 'donut',
},
stroke: {
show: true,
width: 2, // Set the width of the border
colors: 'var(--color-background)', // Set the color of the border
},
dataLabels: {
enabled: false,
},
plotOptions: {
pie: {
expandOnClick: false,
},
},
legend: {
offsetY: -5,
offsetX: -10,
fontSize: '14px', // Set the font size
fontWeight: '500', // Set the font weight
labels: {
colors: 'var(--color-secondary-foreground)', // Set the font color for the legend text
useSeriesColors: false, // Optional: Set to true to use series colors for legend text
},
markers: {
width: 8,
height: 8,
},
},
responsive: [
{
breakpoint: 480,
options: {
chart: {
width: 200,
},
legend: {
position: 'bottom',
},
},
},
],
};
const element = document.querySelector('#pie_chart');
if (!element) return;
const chart = new ApexCharts(element, options);
chart.render();
}
}
KTDom.ready(() => {
KTExamplePieChart.init();
});
<div class="kt-card">
<div class="kt-card-header">
<h3 class="kt-card-title">
Pie Chart
</h3>
<button class="kt-btn kt-btn-icon kt-btn-outline">
<i class="ki-outline ki-dots-vertical">
</i>
</button>
</div>
<div class="kt-card-content flex justify-center items-center px-3 py-1">
<div id="pie_chart">
</div>
</div>
</div>
Bar Chart
An example of a vertical bar chart using ApexCharts with Metronic styling.
Bars use the primary color and support tooltips on hover.
Bar Chart
class KTExampleBarChart {
static init() {
const data = [44, 55, 41, 67, 22, 43];
const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'];
const options = {
series: [
{
name: 'Sales',
data: data,
},
],
chart: {
height: 250,
type: 'bar',
toolbar: {
show: false,
},
},
plotOptions: {
bar: {
borderRadius: 4,
columnWidth: '55%',
},
},
dataLabels: {
enabled: false,
},
legend: {
show: false,
},
stroke: {
show: true,
width: 2,
colors: ['transparent'],
},
xaxis: {
categories: categories,
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
style: {
colors: 'var(--color-secondary-foreground)',
fontSize: '12px',
},
},
},
yaxis: {
axisTicks: {
show: false,
},
labels: {
style: {
colors: 'var(--color-secondary-foreground)',
fontSize: '12px',
},
},
},
fill: {
colors: ['var(--color-primary)'],
opacity: 1,
},
tooltip: {
enabled: true,
y: {
formatter: (value) => `$${value}K`,
},
},
grid: {
borderColor: 'var(--color-border)',
strokeDashArray: 5,
yaxis: {
lines: {
show: true,
},
},
xaxis: {
lines: {
show: false,
},
},
},
};
const element = document.querySelector('#bar_chart');
if (!element) return;
const chart = new ApexCharts(element, options);
chart.render();
}
}
KTDom.ready(() => {
KTExampleBarChart.init();
});
<div class="kt-card">
<div class="kt-card-header">
<h3 class="kt-card-title">
Bar Chart
</h3>
<button class="kt-btn kt-btn-icon kt-btn-outline">
<i class="ki-outline ki-dots-vertical">
</i>
</button>
</div>
<div class="px-3 py-1">
<div id="bar_chart">
</div>
</div>
</div>
Line Chart
An example of a line chart with smooth curve and markers.
Uses Metronic primary color and supports tooltips on hover.
Line Chart
class KTExampleLineChart {
static init() {
const data = [28, 29, 33, 36, 32, 32, 33];
const categories = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
const options = {
series: [
{
name: 'Visitors',
data: data,
},
],
chart: {
height: 250,
type: 'line',
toolbar: {
show: false,
},
zoom: {
enabled: false,
},
},
dataLabels: {
enabled: false,
},
legend: {
show: false,
},
stroke: {
curve: 'smooth',
width: 3,
colors: ['var(--color-primary)'],
},
xaxis: {
categories: categories,
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
style: {
colors: 'var(--color-secondary-foreground)',
fontSize: '12px',
},
},
},
yaxis: {
axisTicks: {
show: false,
},
labels: {
style: {
colors: 'var(--color-secondary-foreground)',
fontSize: '12px',
},
},
},
markers: {
size: 4,
colors: ['var(--color-primary)'],
strokeColors: 'var(--color-background)',
strokeWidth: 2,
hover: {
size: 6,
},
},
grid: {
borderColor: 'var(--color-border)',
strokeDashArray: 5,
yaxis: {
lines: {
show: true,
},
},
xaxis: {
lines: {
show: false,
},
},
},
tooltip: {
enabled: true,
},
};
const element = document.querySelector('#line_chart');
if (!element) return;
const chart = new ApexCharts(element, options);
chart.render();
}
}
KTDom.ready(() => {
KTExampleLineChart.init();
});
<div class="kt-card">
<div class="kt-card-header">
<h3 class="kt-card-title">
Line Chart
</h3>
<button class="kt-btn kt-btn-icon kt-btn-outline">
<i class="ki-outline ki-dots-vertical">
</i>
</button>
</div>
<div class="px-3 py-1">
<div id="line_chart">
</div>
</div>
</div>
Donut Chart
An example of a donut chart with a center label showing the total.
Uses Metronic color variables and supports a legend at the bottom.
Donut Chart
class KTExampleDonutChart {
static init() {
const data = [35, 25, 20, 12, 8];
const labels = ['Product A', 'Product B', 'Product C', 'Product D', 'Other'];
const colors = [
'var(--color-primary)',
'var(--color-orange-500)',
'var(--color-green-500)',
'var(--color-violet-500)',
'var(--color-secondary-foreground)',
];
const options = {
series: data,
labels: labels,
colors: colors,
chart: {
type: 'donut',
height: 280,
},
stroke: {
show: true,
width: 2,
colors: ['var(--color-background)'],
},
plotOptions: {
pie: {
donut: {
size: '65%',
labels: {
show: true,
total: {
show: true,
label: 'Total',
color: 'var(--color-secondary-foreground)',
fontSize: '14px',
formatter: (w) => {
const sum = w.globals.seriesTotals.reduce((a, b) => a + b, 0);
return sum;
},
},
value: {
color: 'var(--color-foreground)',
fontSize: '20px',
fontWeight: 600,
},
},
},
expandOnClick: false,
},
},
dataLabels: {
enabled: false,
},
legend: {
position: 'bottom',
offsetY: 8,
labels: {
colors: 'var(--color-secondary-foreground)',
},
markers: {
width: 8,
height: 8,
},
},
responsive: [
{
breakpoint: 480,
options: {
chart: {
width: 280,
},
legend: {
position: 'bottom',
},
},
},
],
};
const element = document.querySelector('#donut_chart');
if (!element) return;
const chart = new ApexCharts(element, options);
chart.render();
}
}
KTDom.ready(() => {
KTExampleDonutChart.init();
});
<div class="kt-card">
<div class="kt-card-header">
<h3 class="kt-card-title">
Donut Chart
</h3>
<button class="kt-btn kt-btn-icon kt-btn-outline">
<i class="ki-outline ki-dots-vertical">
</i>
</button>
</div>
<div class="kt-card-content flex justify-center items-center px-3 py-1">
<div id="donut_chart">
</div>
</div>
</div>
Horizontal Bar Chart
An example of a horizontal bar chart for comparing categories.
Uses Metronic primary color and supports tooltips on hover.
Horizontal Bar Chart
class KTExampleHorizontalBarChart {
static init() {
const data = [44, 55, 41, 67, 22];
const categories = ['Italy', 'Japan', 'China', 'Canada', 'UK'];
const options = {
series: [
{
name: 'Revenue',
data: data,
},
],
chart: {
height: 250,
type: 'bar',
toolbar: {
show: false,
},
},
plotOptions: {
bar: {
horizontal: true,
borderRadius: 4,
barHeight: '65%',
distributed: false,
},
},
dataLabels: {
enabled: false,
},
legend: {
show: false,
},
stroke: {
show: true,
width: 2,
colors: ['transparent'],
},
xaxis: {
categories: categories,
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
style: {
colors: 'var(--color-secondary-foreground)',
fontSize: '12px',
},
},
},
yaxis: {
labels: {
style: {
colors: 'var(--color-secondary-foreground)',
fontSize: '12px',
},
},
},
fill: {
colors: ['var(--color-primary)'],
opacity: 1,
},
tooltip: {
enabled: true,
y: {
formatter: (value) => `$${value}K`,
},
},
grid: {
borderColor: 'var(--color-border)',
strokeDashArray: 5,
xaxis: {
lines: {
show: true,
},
},
yaxis: {
lines: {
show: false,
},
},
},
};
const element = document.querySelector('#horizontal_bar_chart');
if (!element) return;
const chart = new ApexCharts(element, options);
chart.render();
}
}
KTDom.ready(() => {
KTExampleHorizontalBarChart.init();
});
<div class="kt-card">
<div class="kt-card-header">
<h3 class="kt-card-title">
Horizontal Bar Chart
</h3>
<button class="kt-btn kt-btn-icon kt-btn-outline">
<i class="ki-outline ki-dots-vertical">
</i>
</button>
</div>
<div class="px-3 py-1">
<div id="horizontal_bar_chart">
</div>
</div>
</div>
