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.

As of November 2024, there is an open issue on Highcharts' GitHub regarding the missing currentDataGrouping type in the Series object (#21869).

The recommended solution is to create a custom interface that extends Highcharts' built-in types. For example, I have a custom interface like this:

export interface SeriesWithDataGrouping extends Highcharts.Series {
  currentDataGrouping: {
    count: number;
    gapSize: number;
    higherRanks: Record<PropertyKey, unknown>;
    segmentStarts: number[];
    totalRange: number;
    unitName: 'month' | 'week' | 'day' | 'hour';
    unitRange: number;
  };
}

You can then use SeriesWithDataGrouping when accessing the currentDataGrouping property. For example:

const currentGrouping = (point.series as SeriesWithDataGrouping).currentDataGrouping.unitName;