Multiple chart components with same id creates severe rendering issues

[patolax]

This is my scenario

I have a presentation component with canvas <canvas ngChartjs id="mainChart" [datasets]="lineChartData" [labels]="lineChartLabels" [options]="lineChartOptions" [legend]="lineChartLegend" [chartType]="lineChartType">

This component is used by two smart/data components, say temp-chart and rain-chart.

When I try to show both temp-chart and rain-chart on the main page at the same time. this.ngChartjsService.getChart('mainChart'); cannot figure out the correct instance endup creating a mess. I think the issue is the storeService code below uses the id which is 'mainChart' in this case and ends up giving the same chart instance for both smart components creating these rendering issues.

this.storeService.addChart(this.element.nativeElement.id, this.chart);

Is there a way to get around it. I am using Angular 7 and "ng-chartjs": "0.0.9".

[93Alliance]

You can try use ViewChild

html

<canvas #ngChartjs="ngChartjs"></canvas>

ts

@ViewChild('ngChartjs', {static: true})
private readonly ngChartjs: NgChartjsDirective;

[patolax]

I get this There is no directive with "exportAs" set to "ngChartjs" ("<canvas [ERROR ->]#ngChartjs="ngChartjs">

I have imported NgChartjsModule.

It would be better and userfriendly if we can use the service.

[93Alliance]

Because the version you are using is low, the exportAs directive is not supported.

If you want to use the ngChartjsService service,you can do it by dynamically modifying the value of the id

[patolax]

Cannot upgrade to a newer agular version for a few months. I tried data binding to id by [id]="newId" but that's not working as well. ngChartjsService returns null. Is there any alternative for "ng-chartjs": "0.0.9". Thanks!

[93Alliance]

I will fix this issue in the latest version, you will can get the instance of chart by id.

[93Alliance]

If you can't update version,you can use it by this method https://stackblitz.com/edit/angular-gksa52

[patolax]

awsome, that worked really well.

Thanks a lot.