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

• August 28, 2019 at 10:57 pm #26591
  
  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.

  August 29, 2019 at 10:59 am #26596
  
  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