mauri5566
Posts: 2
Joined: Sun May 23, 2021 11:10 am

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: https://bgpie.net/#!/rrc/00 (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:

Code: Select all

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.
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Highcharts Angular - how to show group size in tooltip

Hi,
We appreciate you reaching out to us.

Have you checked the solution in this blog post? Describes how to extend Highcharts in TypeScript.
https://www.highcharts.com/docs/advance ... g-problems

Here is a link to our official Angular wrapper.
https://github.com/highcharts/highcharts-angular

Let me know how are you doing with this.
Best regards.
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Stock”