Plugins

ApexCharts

ApexCharts is a modern charting library that helps developers to create beautiful and interactive visualizations for web pages. It is an open-source project licensed under MIT and is free to use in commercial applications.

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

Pie Chart

An example of an interactive pie chart to express data and information in terms of percentages and ratios.

Pie Chart