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(--tw-primary)']
},
xaxis: {
categories: categories,
axisBorder: {
show: false,
},
maxTicks: 12,
axisTicks: {
show: false
},
labels: {
style: {
colors: 'var(--tw-gray-500)',
fontSize: '12px'
}
},
crosshairs: {
position: 'front',
stroke: {
color: 'var(--tw-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(--tw-gray-500)',
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-gray-600">
${monthName}, 2024 Sales
</div>
<div class="flex items-center gap-1.5">
<div class="font-semibold text-md text-gray-900">
${formattedNumber}
</div>
<span class="badge badge-outline badge-success badge-xs">
+24%
</span>
</div>
</div>
`
);
}
},
markers: {
size: 0,
colors: 'var(--tw-primary-light)',
strokeColors: 'var(--tw-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(--tw-gray-200)',
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="card">
<div class="card-header">
<h3 class="card-title">
Area Chart
</h3>
<button class="btn btn-sm btn-icon btn-light btn-clear">
<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(--tw-primary)', 'var(--tw-brand)', 'var(--tw-success)', 'var(--tw-info)', 'var(--tw-warning)'];
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(--tw-light)' // 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(--tw-gray-700)', // 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="card">
<div class="card-header">
<h3 class="card-title">
Pie Chart
</h3>
<button class="btn btn-sm btn-icon btn-light btn-clear">
<i class="ki-outline ki-dots-vertical">
</i>
</button>
</div>
<div class="card-body flex justify-center items-center px-3 py-1">
<div id="pie_chart">
</div>
</div>
</div>