ember-apexchartsjs

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.