ember-apexchartsjs
v0.2.0 ember-addon
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]
}
}
<ApexChart
@type={{this.type}}
@width={{this.width}}
@height={{this.height}}
@series={{this.series}}
@chartOptions={{this.chartOptions}}
/>
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]
}
}
<ApexChart
@chartOptions={{this.chartOptions}}
/>
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
}
<ApexChart
@type={{this.type}}
@series={{this.series}}
@onClick={{this.clickHandler}}
@onBeforeMount={{this.beforeMountHandler}}
/>
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.
npm i ember-apexchartsjs
Metadata
- MIT
- 10.* || >= 12
- Balaji Manoharan
- released 6/25/2021