mprose7
Posts: 4
Joined: Wed Sep 15, 2021 3:50 pm

Add completed value to gantt tooltip

Is there better way to add completed value to tooltip?

Code: Select all

  tooltip: {
	headerFormat: '<b>{point.name}</b><br>{point.start}<br>{point.end}',
	xDateFormat: '%e. %b',
	formatter: function(tooltip) {
			let output = tooltip.defaultFormatter.call(this, tooltip);
				customText = Math.round(this.point.completed *100);
			if (customText) {
				output.push(`<span>Completed: ${customText}%</span>`);
			}
			return output;
		}
	},
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Add completed value to gantt tooltip

Hello mprose7,

Welcome to our forum and thanks for contacting us with your question!

It depends what do you mean by "better way", but in general, if you want to show completed value in tooltip, then your approach is valid and most likely the best way to achieve such result. Depending on your needs, you could consider using pointFormatter instead of formatter, but the result would be fairly similar.
Demo with example: https://jsfiddle.net/gh/get/library/pur ... management
API reference: https://api.highcharts.com/gantt/tooltip.pointFormatter

Let me know if you have any further questions!
Best regards!
Mateusz Bernacik
Highcharts Developer
mprose7
Posts: 4
Joined: Wed Sep 15, 2021 3:50 pm

Re: Add completed value to gantt tooltip

Thanks for the reply,
i thought there can be simpler approach, but ok.
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Add completed value to gantt tooltip

Hello mprose7,

Sorry to disappoint you, but as I said that is the preferred solution, especially when some logic or calculations are involved.

Best regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Gantt”