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

Question

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.

I reproduce your code according to the highcharts-angular instructions and everything works fine - there is no errors. Demo: https://codesandbox.io/s/angular-53ncl API: https://github.com/highcharts/highcharts-angular — Sebastian Wędzel, May 28 '20 at 10:12

score 0 · Answer 1 · answered Jun 08 '20 at 07:32

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>

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

1 Answers1

Linked

Related