0

I am using highcharts in my angular application. Even though my charts are rendering on load, i am still getting highcharts #error-13 in my console.

I am calling my render chart method inside ngOnInit lifecycle hook. I also added the check to verify that the method should only be called once the data is available.

My html: <div [attr.id]="chartContainerID" class="chart-container mt-0"></div>

My ts file:

export class MyComponent implements OnInit, {
  chartContainerId: string;

  constructor(private xrangechart: XrangeChartService, ) {
    if (!this.chartContainerId) {
    this.chartContainerId = String(Math.random());
  }}

  ngOnInit() {
    // to do call the service here.
    this.getData();
  }

  renderChart(chartOptions: any) {
    const chart = this.xrangechart.renderChart(this.chartContainerId, chartOptions);
    if (chart) {
       this.plotShapes(chart);
    }
 }
 getData() {
   this.dataservice.subscribe(data => {
    if (data !== null && data !== undefined &) {
      console.log(data);
      this.dataReturned = data;
      this.renderChart(this.setChartOptions());
    }
  });
}


  setChartOptions() {
    const chartOptions: any = {};
    // Setting chart height
    chartOptions.height = 300;
    // Setting the click event on the label
    chartOptions.data = this.dataReturned.data;
    // to set the yaxis
    chartOptions.yAxis = {
        gridLineWidth: chartContainer.gridLineWidth,
        margin: 0,
        title: {
            text: ''
        },
        categories: this.data.categories,
        reversed: true
      };
    return chartOptions;
  }


  plotShapes(chart: any) {
    // some logic to plot shape
}

}

expected: The error in the console should not be present and the charts should be rendered without any error

Thushara
  • 57
  • 5

1 Answers1

0

This error comes up due container not found where your chart will be draw. like: 

<div [attr.id]="chartContainerID" class="chart-container mt-0"></div>

make sure your div have id attribute before chart's rendering. you have to call chart render method after you div have an id attribute. because as seed your code you have dynamic id in your div.

Manish Balodia
  • 1,863
  • 2
  • 23
  • 37