ApexCharts - Getting started
Overview
This doc will explain how to get ApexChart setup to use in an app.
Installing and Initializing
Add the following tags to your DOM header insertions:
<!-- Apex chart -->
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-apexcharts"></script>
Add the following line to a function on the named action ‘onAppLoad’, under the Global Named Actions (App level):
Vue.component('apexchart', VueApexCharts);
Example
Here is an example of how to draw a chart using ApexCharts in your app.
Sample Data
For this example we will be using these sample data, that can be saved to your Data Model as ‘data’:
{
"data": {
"chartOptions": {
"chart": {
"height": 350,
"stacked": true,
"toolbar": {
"show": true
},
"type": "bar",
"zoom": {
"enabled": true
}
},
"fill": {
"opacity": 1
},
"legend": {
"offsetY": 40,
"position": "right"
},
"plotOptions": {
"bar": {
"horizontal": false
}
},
"responsive": [{
"breakpoint": 480,
"options": {
"legend": {
"offsetX": -10,
"offsetY": 0,
"position": "bottom"
}
}
}],
"xaxis": {
"categories": ["01/01/2011 GMT", "01/02/2011 GMT", "01/03/2011 GMT", "01/04/2011 GMT", "01/05/2011 GMT", "01/06/2011 GMT"],
"type": "datetime"
}
},
"series": [{
"data": [44, 55, 41, 67, 22, 43],
"name": "PRODUCT A"
}, {
"data": [13, 23, 20, 8, 13, 27],
"name": "PRODUCT B"
}, {
"data": [11, 17, 15, 15, 21, 14],
"name": "PRODUCT C"
}, {
"data": [21, 7, 25, 13, 22, 8],
"name": "PRODUCT D"
}]
}
}
Adding charts to page schema
All we need is an html component with the ApexChart tag, as following:
{
"html": " <div id=\"chart\">\n <apexchart type=\"bar\" height=\"350\" :options=\"model.data.chartOptions\" :series=\"model.data.series\"></apexchart>\n </div>",
"styleClasses": "col-md-10",
"type": "html"
}
The expected result should be as shown in the image below.

Reference
More information can be found on ApexCharts docs
Last updated
Was this helpful?