Apex charts

Modern & interactive Javascript charts to create beautiful representation of your data.

Official Documentation

Usage

JS

In order to use this plugin on your page you will need to include the following script in the “Page JS” area from the page’s footer:

<script src="/assets/libs/apexcharts/dist/apexcharts.min.js"></script>

Initialization

The initialialization scripts are located within the resources/js/components/charts/apexcharts.js.

Example

Line

<div style="width: 100px;">
    <div id="apex-spark-1" data-toggle="apex-chart"></div>
</div>
<div style="width: 100px;">
    <div id="apex-spark-2" data-toggle="apex-chart"></div>
</div>
<div style="width: 100px;">
    <div id="apex-spark-3" data-toggle="apex-chart"></div>
</div>
<div style="width: 100px;">
    <div id="apex-spark-4" data-toggle="apex-chart"></div>
</div>

Bar

<div style="width: 100px;">
    <div id="apex-spark-5" data-toggle="apex-chart"></div>
</div>
<div style="width: 100px;">
    <div id="apex-spark-6" data-toggle="apex-chart"></div>
</div>
<div style="width: 100px;">
    <div id="apex-spark-7" data-toggle="apex-chart"></div>
</div>
<div style="width: 100px;">
    <div id="apex-spark-8" data-toggle="apex-chart"></div>
</div>