Home Forums Chart Support i am getting am error 'Cannot read property 'style' of undefined' in angular6

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • #26591

    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)=>{
    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.



    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.

    Angular Charts & Graphs

    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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.