Angular cannot using Highcharts X-range series

Question

I created a project with Angular framework and used Highcharts X-range but I can't do it by attaching Error as shown in the picture...

HTML:

typescript:

please someone who knows tell me how to fix it. Many thanks,

Please add the code, don't attach the pictures. – Vinay Somawat Jan 05 '22 at 10:34 — Vinay Somawat, Jan 05 '22 at 10:34

score 1 · Accepted Answer · answered Jan 05 '22 at 18:58

For loading xrange series you need to load module xrange.

import Xrange from 'highcharts/modules/xrange';
Xrange(Highcharts);

The partialFill it's not correct with object, you can see how they look at the API documentation data.partialFill.amount.

  data: [{
    x: Date.UTC(2014, 10, 21),
    x2: Date.UTC(2014, 11, 2),
    y: 0,
    partialFill: {
      amount: 0.5
    }
  }, {
    x: Date.UTC(2014, 11, 2),
    x2: Date.UTC(2014, 11, 5),
    y: 1
  }, {
    x: Date.UTC(2014, 11, 8),
    x2: Date.UTC(2014, 11, 9),
    y: 2
  }, {
    x: Date.UTC(2014, 11, 9),
    x2: Date.UTC(2014, 11, 19),
    y: 1
  }, {
    x: Date.UTC(2014, 11, 10),
    x2: Date.UTC(2014, 11, 23),
    y: 2
  }],

Demo: https://stackblitz.com/edit/highcharts-angular-basic-line-7km3p6?file=src%2Fapp%2Fapp.component.ts

API: https://api.highcharts.com/highcharts/series.xrange.data.partialFill

Many thanks, Your comments have helped me solve my problem very well. — khunying, Jan 27 '22 at 03:08

Angular cannot using Highcharts X-range series

1 Answers1