i am getting am error 'Cannot read property 'style' of undefined' in angular6

[GirishAcharya]

I am Using doughnut chart on my dashboard screen during loading the canvas there is no issue but when I move from dashboard to another page I am getting this error.
———————————————————————————————————————-
CanvasJS Error: Chart Container with id “BarContainer” was not found
core.js:15724 ERROR TypeError: Cannot read property ‘style’ of undefined
at s._updateOptions (canvasjs.min.js:156)
at s._initialize (canvasjs.min.js:158)
at s.render (canvasjs.min.js:166)
at VulReportComponent.push../src/app/components/Report/app.vulReport.ts.VulReportComponent.drawChart (app.Report.ts:252)
at SafeSubscriber._next (app.Report.ts:174)
at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:196)
at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:134)
at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:77)
at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (map.js:41)
—————————————————————————————————————-
Here is the code
export class AppComponent implements OnInit {
data: any;
ngOnInit() {
this._Service.acb().subscribe(con => {
this.data = con
});

var chart = new CanvasJS.Chart(“BarContainer”, {
animationEnabled: true,
title: {
text: “Classification”,
fontSize: 16,
fontFamily: ‘Open Sans’,
fontWeight: ‘normal’,
fontColor: ‘#313233’,
fontStyle: ‘normal’,
verticalAlign: “top”,
horizontalAlign: “center”,
},
data: [{
type: “doughnut”,
startAngle: 90,
innerRadius: 60,
cursor: “pointer”,
labelAutoFit: true,
indexLabelFontSize: 13,
indexLabelFontWeight: ‘normal’,
indexLabelFontFamily: ‘Open Sans’,
indexLabelFontStyle: ‘normal’,
indexLabelPlacement: “inside”,
indexLabel: “#percent%”,
toolTipContent: “<b>{label}:</b> {y} (#percent%)”,
dataPoints: this.data
click: (e)=>{
}
}]
});
chart.render();
}
———————————————————————————–
this error occurs when I change the page multiple time (dashboard to another page comeback to dashboard…) there is some issue while define the id(BarContainer)I guess. please help me with this issue.

[Manoj Mohan]

@girishacharya,

From the error shown above, it seems there is no div with id BarContainer on executing the code to render the chart. You can try to define div with id BarContainer in your html file.

Also, you can check out our Angular Charts Gallery for examples on integrating chart in angular app.

If you are still facing the issue, kindly share Sample Project along with sample data reproducing the issue over Google Drive / Onedrive so that we can look into the code, understand the scenario better and help you out?

—-
Manoj Mohan
Team CanvasJS