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

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").

Parameter Type Default Description
toggle string spark-chart Initializes the Apex Chart library with the given options.
color string primary Use one of the given color modifier classes (e.g primary, info, success, warning, danger)
type string line The spark chart type. It can be line or chart
idataset array null Insert the chart’s values as an array (e.g data-dataset=”[20,30,40]”)
idataset string null Insert the chart’s labels as strings separated by commas (e.g data-labels=”[1,2,3]”)
height number 35 Set 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