ApexChart Angular doesn't render anything

Hi!

I’m trying to integrate apexchart into my webapp, but doen’t render anything and no error are show in console.

I based the test in https://apexcharts.com/angular-chart-demos/line-charts/basic/

My stack "@angular/common": "~13.0.0", "@ionic/angular": "^6.0.0", "apexcharts": "^3.33.1", "ng-apexcharts": "^1.7.0", The steps that i make: 1º Install npm libraries 2º Add NgApexchartsModule to app.module.ts 3º In a tab page

` import {AfterViewInit, Component, ViewChild} from ‘@angular/core’; import { ApexAxisChartSeries, ApexChart, ApexDataLabels, ApexGrid, ApexStroke, ApexTitleSubtitle, ApexXAxis, ChartComponent } from ‘ng-apexcharts’;

export type ChartOptions = { series: ApexAxisChartSeries; chart: ApexChart; xaxis: ApexXAxis; dataLabels: ApexDataLabels; grid: ApexGrid; stroke: ApexStroke; title: ApexTitleSubtitle; };

@Component({ selector: ‘app-profile’, templateUrl: ‘profile.page.html’, styleUrls: [‘profile.page.scss’] }) export class ProfilePage implements AfterViewInit { @ViewChild(‘chart’) chart: ChartComponent; public chartOptions: Partial<ChartOptions>;

constructor() { this.chartOptions = { series: [ { name: ‘Desktops’, data: [10, 41, 35, 51, 49, 62, 69, 91, 148] } ], chart: { height: 350, type: ‘line’, zoom: { enabled: false } }, dataLabels: { enabled: false }, stroke: { curve: ‘straight’ }, title: { text: ‘Product Trends by Month’, align: ‘left’ }, grid: { row: { colors: [‘#f3f3f3’, ‘transparent’], // takes an array which will be repeated on columns opacity: 0.5 } }, xaxis: { categories: [ ‘Jan’, ‘Feb’, ‘Mar’, ‘Apr’, ‘May’, ‘Jun’, ‘Jul’, ‘Aug’, ‘Sep’ ] } };

}

} `

In profile.page.html

<apx-chart [series]="chartOptions.series" [chart]="chartOptions.chart" [xaxis]="chartOptions.xaxis" [dataLabels]="chartOptions.dataLabels" [grid]="chartOptions.grid" [stroke]="chartOptions.stroke" [title]="chartOptions.title" ></apx-chart>

I’m make any thing wrong?? Thanks!!

[benboughton1]

Thanks for that. I managed to get it firing with something similar. (I got the ElementRef.nativeElement and fired the buildChart method, then render, I think it ended up being). Not sure about OP but thankyou for your help.

On Mon, 23 May 2022, 5:18 am Thiago Guimarães, @.***> wrote:

I have same issue even when chartOptions is inside ngOnInit. I can get chart to render when I resize the page.

Try to add this to your chartOptions

chart: { height: 350, width: ‘100%’, type: ‘bar’ }

Example:

//Chart options this.chartOptions = {

…

chart: { height: 350, width: ‘100%’, type: ‘bar’ },

…

}

and in your template, in the apex chart component tag, you could have this:

[chart]="chartOptions.chart

Example:

<apx-chart [chart]=“chartOptions.chart”></apx-chart>

— Reply to this email directly, view it on GitHub https://github.com/apexcharts/ng-apexcharts/issues/197#issuecomment-1133956920, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAQEGD6A2KPXEG5IVGIBPFTVLKCCFANCNFSM5PJUWYVA . You are receiving this because you commented.Message ID: @.***>

[tguimmaraess]

Any solution for this issue available? We have the same problem, only rendering after resizing

Have you tried setting up the chart in your ngOnInit and giving it a height and width? Also you could try @benboughton1’s solution