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,

Can you 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

[Author]

Posts