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"

`

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.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[visor841]

I had the same issues here, and the workaround I found was to set a chart option in ionViewWillEnter (e.g. chartOptions.chart), which seems to refresh the chart and therefore properly display it.

I think ideally all of the chart options would be initially defined in ionViewWillEnter, but currently they need to be defined in the constructor or else the chart breaks with undefined errors. Perhaps #347 would improve this.

With #347 merged and released in 1.12, simply following the docs and defining the chart options in the constructor worked perfectly for me, so using ionViewWillEnter seems unnecessary now.

[julianpoemp]

this issue is still a problem. Was #347 published with the latest release to npm?

Because the rendering works on resize I assume that it's an issue on initialization when options were already provided as input.

[lztetreault-dev]

@julianpoemp the changes from my PR #347 have not been released to NPM. There is no documentation for this repo on how to publish so I assume that the maintainers publish updates manually.

@junedchhipa could you confirm what the process is for publishing new versions to NPM?

[visor841]

ng-apexcharts 1.12.0 is even better than I expected, it even appears to completely fix the issue (for me at least), with no workarounds needed!

I don't even need to use ionViewWillEnter, just defining the chart options in the constructor is enough. I did need to undo all of my workarounds, but everything worked properly once I set things up according the docs (in contrast, following the docs while using 1.11.0 caused a build error).