Load event in Highcharts is not firing, the same code is working with javascript but when I move it to angular its not working. Can anybody please help.
Html Code snippet
<chart [options]="dwellTimePerZoneOptions"></chart>
Typescript Code snippet:
let yThreshold = 25;
this.dwellTimePerZoneOptions = {
chart: {
type: 'columnrange',
inverted: true,
width: this.chartWidth,
events: {
load: function () {
debugger;
var series = this.series[0],
points = series.points,
newPoints = [];
points.forEach((point) => {
// add x value to options
point.options.x = point.x;
// original values are used in tooltip and data labels formatter
point.options.originalLow = point.low;
point.options.originalHigh = point.high;
if (point.low < yThreshold && point.high > yThreshold) {
// split the point
newPoints.push($.extend({}, point.options, {
low: point.low,
high: yThreshold,
partOfSplitPoint: 'bottom'
}), $.extend({}, point.options, {
low: yThreshold,
high: point.high,
partOfSplitPoint: 'top'
}));
} else {
// splitting not needed - just pass original options
newPoints.push(point.options);
}
});
// color the points
newPoints.forEach(function (pointOptions) {
if (pointOptions.high <= yThreshold) {
pointOptions.color = 'green';
} else {
pointOptions.color = 'red';
}
});
series.setData(newPoints, false);
// new data label will show up after the redraw
this.redraw();
}
}
},
title: {
text: 'Dwell Time Per Zone'
},
subtitle: {
text: 'Building C, New York, USA'
},
xAxis: {
categories: ['Zone A', 'Zone B', 'Zone C', 'Zone D', 'Dock Zone', 'Stage Zone']
},
yAxis: {
title: {
text: 'Min & Max Time ( Hrs )'
}
},
legend: {
enabled: false
},
series: [{
name: 'Dwell Time (hrs)',
data: [
[0.5, 22.6],
[2.9, 29.5],
[9.2, 30.7],
[7.3, 26.5],
[4.4, 18.0],
[3.5, 9.8]
],
dataLabels: {
enabled: true,
formatter: function () {
var point = this.point;
switch (this.y) {
case point.originalLow:
return point.originalLow;
case point.originalHigh:
return point.originalHigh;
default:
return point.partOfSplitPoint ? null : point.y;
}
}
}
}],
tooltip: {
followPointer: true,
pointFormatter: function () {
return "<span style='color:{" + this.color + "}'>\u25CF</span> " + this.series.name + ": <b>" + this.originalLow + " - " + this.originalHigh + "</b><br/>"
}
}
};
While debugging I found that load function inside event is not getting called. I am not able to figure out what I am missing, can anybody please help. Thanks in advance.
