Highcharts Angular - How to show group size in tooltip

I'm currently using dataGrouping to group data in my chart with dates on the x-axis. I'm trying to show the group size in the tooltip like in this example (open a row clicking on show more info, open the sequence chart, wait for the data to download and then start drawing). The example I just showed you is made in Javascript and here's the code:

tooltip: {
shared: true,
split: false,
valueDecimals: 0,
formatter: function () {
var gr = this.points[0].series.currentDataGrouping;
if (gr !== undefined) { //grouping applied
const groupSize = gr.gapSize / 1000 / 60;
const groupSizeString = groupSize >= 60 ? groupSize / 60 + " hours" : groupSize + " minutes";
const pointTooltip = this.points
.map(x => "<span style=\"color:" + x.color + "\">●</span> " + x.series.name + ": <b>" + x.y + "</b><br/>")
.join("");

return "<span style=\"font-size: 10px\">" +
Highcharts.dateFormat('%Y/%b/%e %H:%M', this.x)
+ "</span><br/>" +
"<span style=\"font-size: 9px\">Group Size: " + groupSizeString + "</span><br/>" +
pointTooltip;
} else { //No grouping applied
const pointTooltip = this.points
.map(x => "<span style=\"color:" + x.color + "\">●</span> " + x.series.name + ": <b>" + x.y + "</b><br/>")
.join("");

return "<span style=\"font-size: 10px\">" +
Highcharts.dateFormat('%Y/%b/%e %H:%M', this.x)
+ "</span><br/>" +
"<span style=\"font-size: 9px\">Group Size: 5 minutes</span><br/>" +
pointTooltip;
}

}
},



I'm trying to translate this code to Angular's TypeScript. The problem is that this.points[0].series.currentDataGrouping is not working for me, I get: the property currentDataGrouping doesn't exist on type series. I haven't found other ways to access the current dataGrouping size.

Continue reading...