Currently, I am utilizing dataGrouping to group data in my chart based on dates along the x-axis. My goal is to display the group size in the tooltip similar to what was shown in this example (click on "show more info," then open the sequence chart, wait for data to download, and observe the drawing process). The example provided is coded in Javascript as follows:
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 am attempting to convert this code into Angular's TypeScript. However, I am encountering an issue where
this.points[0].series.currentDataGrouping