# 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

Show code

    <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

Show code

    <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

Show code

    <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>