Apex charts

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

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

Options

Here is a list with the data-* attributes you can use in order to configure the chart without the need to modify any JavaScript file. Simply add the data-PARAMETER_NAME attribute on the .spark-chart div, where PARAMETER_NAME is one of the options listed in the table below (e.g data-type="bar").

ParameterTypeDefaultDescription
togglestringspark-chartInitializes the Apex Chart library with the given options.
colorstringprimaryUse one of the given color modifier classes (e.g primary, info, success, warning, danger)
typestringlineThe spark chart type. It can be line or chart
idatasetarraynullInsert the chart’s values as an array (e.g data-dataset=”[20,30,40]”)
idatasetstringnullInsert the chart’s labels as strings separated by commas (e.g data-labels=”[1,2,3]”)
heightnumber35Set a custom height

Examples

Line

<div id="apex-line" data-color="primary"></div>

Spark charts

Initialize Apex Chart via data attributes or by creating a customized script following the official documentation. For now, we are offering a custom initialize feature via data attributes for spark charts.

Line

<div style="width: 100px;">
    <div class="spark-chart" data-toggle="spark-chart" data-color="primary" data-dataset="[47, 94, 24, 18, 26, 65, 31, 47, 10, 44, 45]" data-labels="1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11"></div>
</div>

Bar

<div style="width: 100px;">
    <div class="spark-chart" data-toggle="spark-chart" data-type="bar" data-color="primary" data-dataset="[47, 94, 24, 18, 26, 65, 31, 47, 10, 44, 45]" data-labels="1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11"></div>
</div>
Summary