ApexChart Angular doesn't render anything

[vgpastor]

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!!

[tguimmaraess]

The problem is that you are using chartOptions inside the constructor, use it inside ngOnInit instead

import {OnInit, 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 OnInit {
@ViewChild('chart') chart: ChartComponent = {} as ChartComponent;
public chartOptions: Partial<any> = {} as Partial<any>;

constructor() {

}

ngOnInit() {
  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'
  ]
  }
  };
}

}

[benboughton1]

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

[tguimmaraess]

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, //Define the height
       width: '100%', //Also give the chart a width
       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>

[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">

— 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: @.***>

[voettingen]

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

[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

[D3Dall]

i have the same problem. Setting up the chart in the ngOnInit do not resolve the problem. In my example, i update the series and the xaxis. If i update only one of these (series or xaxis), the chart render correctly. When i want to update the series and the xaxis at the same time, it doesn't work until i resize the browser.