ember-apexchartsjs
A simple ember wrapper for apexcharts
Compatibility
- Ember.js v3.16 or above
- Ember CLI v2.13 or above
- Node.js v10 or above
Installation
ember install ember-apexchartsjs
Usage
Option 1: Type, height, width series, chartOptions as arguments
type = 'bar';
width = '800px';
height = '400px';
series = [{
name: 'Sales',
data: [30,40,35,50,49,60,70,91,125]
}];
chartOptions = {
title: {
text: 'Bar Chart'
},
xaxis: {
categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]
}
}Option 2: chartOptions as the only argument
const chartOptions = {
chart: {
height: '400px',
type: 'line',
width: '800px'
},
series: [{
data: [30,40,35,50,49,60,70,91,125]
}],
xaxis: {
categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]
}
}The complete set of supported chart types and chart options can be found here: Apexcharts Documentation
Actions
All the apexchart events can be specified as arguments to the ApexChart component.
The example below potrays the use of click and beforeMount events.
type = 'bar';
series = [{
name: 'Sales',
data: [30,40,35,50,49,60,70,91,125]
}];
@action
clickHandler() {
//click handler
}
@action
beforeMountHandler() {
//before mount handler
}Complete list of action arguments and their corresponding apexchart event below:
| Apexchart event | Action Argument |
|---|---|
| beforeMount | onBeforeMount |
| beforeZoom | onBeforeZoom |
| click | onClick |
| dataPointSelection | onDataPointSelection |
| dataPointMouseEnter | onDataPointMouseEnter |
| dataPointMouseLeave | onDataPointMouseLeave |
| legendClick | onLegendClick |
| markerClick | onMarkerClick |
| mouseMove | onMouseMove |
| mounted | onMounted |
| scrolled | onScrolled |
| selection | onSelection |
| updated | onUpdated |
| zoomed | onZoomed |
Contributing
See the Contributing guide for details.
License
This project is licensed under the MIT License.