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>
Customization
To align with the design system of Metronic,
ApexCharts styles are extensively customized as a Tailwind CSS compatible plugin in
src/core/plugins/components/apexcharts.js
.
The corresponding CSS is added into the global style bundle
/dist/assets/css/styles.css
.
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>
