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;

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"></apx-chart> — Reply to this email directly, view it on GitHub <#197 (comment)>, 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.