ember-apexchartsjs v0.2.0

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:

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.