You must be logged in to post your query.
Home › Forums › Chart Support › i am getting am error 'Cannot read property 'style' of undefined' in angular6
Tagged: Cannot read property 'style' of undefined' in angular6
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.
@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.
BarContainer
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
You must be logged in to reply to this topic. Login/Register