Using ng-apexcharts within ionic

[Iheff]

Hi when I try to use this module (in an ionic project), I get complaints that "ApexCharts" is not defined... I figure that is something to do with the script you are pointing to in the angular.json file - ionic projects don't have this file (and adding it doesn't seem to trigger anything.) Do you know how I would define that instruction for an ionic build, I haven't managed to find anyone with similar issue. Trying to avoid using highcharts, apex is much more beautiful out of the box. Thanks so much for your work so far!

[junedchhipa]

Can you try any of the solutions listed on this thread? https://github.com/apexcharts/apexcharts.js/issues/256

[morrisjdev]

You could try to load apexcharts from typescript using this workaround:

import * as apexcharts from 'apexcharts';
window.ApexCharts = apexcharts.default;

Add this two lines in any .ts file like main.ts or app.module.ts.

I used it for the Stackblitz example where changes in angular.json also have no effect: Stackblitz Example

Let me know if this solved your issue.

[Iheff]

Hey guys thanks for response I will try these and report back tomorrow. much appreciated.

[AdaLollA]

Did you guys get this to work that way? I am running ionic/angular 4.3.0 with angular 7.2.2. Adding the two lines below (as suggested above) "changed" the bug from "ApexCharts is not defined" to

TypeError: this.chartObj.render is not a function at ChartComponent.push../node_modules/ng-apexcharts/fesm5/ng-apexcharts.js.ChartComponent.render (ng-apexcharts.js:140)

import * as apexcharts from 'apexcharts'; (window as any).ApexCharts = apexcharts.constructor;

Any further ideas?

[BNRao]

Hi Guys, Can you please suggest if working with Apex charts is recommended with Ionic? Considering all the challenges ?

[jalle007]

Its best chart library I know But I need to use it with Ionic framework.

Will it work ?

[AdaLollA]

I am not sure if my opinion is very valuable since my last attempts were around July. I went through a lot of different attempts to fix bugs and implement workarounds to "sort of" be able to use it within the Ionic framework. To be honest after a couple of hours i switched to chart.js which has a lot of powerful features such as out of the box animations and very straight forward usage. Depending on what your goal is apexcharts might be the right lib, but considering it didn't work well then and there have been no progression updates in this thread until now... You might also be better off using chart.js or something similar to it.

If you need specific implementations you can hmu to figure out the fitting lib.

[cbh6]

I managed to get it working on ionic 4 with Angular You need to 1- Have a div in your component's template with any id <div id="chart"></div> 2- Import import * as t from 'apexcharts'; in your component.ts 3- In ngAfterViewInit:

const ApexCharts = t.default;
const chartElement = document.querySelector('#chart');
const chart = new ApexCharts(chartElement, yourOptions);
chart.render();

You'd also need to import NgApexchartsModule in app.module and add the script to your angular.js file