How to fix this error Type 'number' has no properties in common with type 'XrangePointOptionsObject'

问题

I'm getting this error Type 'number' has no properties in common with type 'XrangePointOptionsObject'. I want to add bar chart using angular highchatrs in my angular project but I'm not able to add because of this error. So can you please help me to solve this error.

Thanks.

this is my component.ts file

import { Chart } from 'angular-highcharts';
import * as Highcharts from 'highcharts'

 @Component({
  selector: 'app-bar-chart',
  templateUrl: './bar-chart.component.html',
  styleUrls: ['./bar-chart.component.scss']
 })
export class BarChartComponent implements OnInit {

 orderChart: Chart;
 revenueChart: Chart;
 options: Highcharts.Options;

 constructor() { }

  ngOnInit() {
   this.init();
 }

 init() {
   this.options = {
    chart: {
      type: 'column'
    },
    title: {
      text: 'Total Predected Vs Actual'
   },
   xAxis:{
      categories: ['2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017'],
      crosshair: true        
   },     
   yAxis : {
      min: 0 ,

   },
   tooltip : {
      headerFormat: '<span style = "font-size:10px">{point.key}</span><table>',
      pointFormat: '<tr><td style = "color:{series.color};padding:0">{series.name}: </td>' +
         '<td style = "padding:0"><b>{point.y:.1f} mm</b></td></tr>', footerFormat: '</table>', 
   shared: true, useHTML: true
   },
   plotOptions : {
      column: {
         pointPadding: 0.2,
         borderWidth: 0
      }
   },
   series: [
      {
         name: "Predected",
         data :[14,17,9,10,6,19,6,8]
      },
      {
         name: "Actual",
         data: [65,74,44,66,9,23,36,51]
      }
      ]
 };
 let orderChart = new Chart(this.options);
 this.orderChart = orderChart;

 let revenueChart = new Chart(this.options);
 this.revenueChart = revenueChart;
 }

}

so the error is shown on the data in the series.

回答1:

I was facing the same issue. you need to use following input

[runOutsideAngular]="true"

so it will be

<highcharts-chart [Highcharts]="Highcharts" [options]="chartOptions.trends" [runOutsideAngular]="true"
            style="width: 100%; height: 400px; display: block;">
</highcharts-chart>

来源：https://stackoverflow.com/questions/62049476/how-to-fix-this-error-type-number-has-no-properties-in-common-with-type-xrang