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
.
Pie Chart
An example of an interactive pie chart to express data and information in terms of percentages and ratios.
metronic/tailwind/docs/views/pages/preview/pie-chart.html
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();
});
metronic/tailwind/docs/views/pages/preview/pie-chart.html
