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