mkamuch
Posts: 5
Joined: Wed Oct 05, 2022 7:16 am

Showing timeinterval between categories in tooltip

Hi there :)

I have a question on how to solve this little problem i have.
I'm trying to show a interval between timestamps in the categories array
Highcharts screenshot.png
Highcharts screenshot.png (17.26 KiB) Viewed 189 times
So i want it to show the interval 07:00 - 08:00 in the tooltip instead of the single 07:00 and so on.
But still keeping categories as they are.

My code looks like this. Using typescript and getting my data from SQL

Code: Select all

	private async initPcsPackedChart() {
		Highcharts.chart(document.getElementById('pcsPackedChart')!, <Highcharts.Options>{
			chart: {
				type: 'column',
				backgroundColor: '#FCFCFC'
			},
			title: {
				text: 'Pcs. packed per hour',
				style: {
					color: '#333',
				}
			},
			xAxis: {
				categories: [
					'00:00',
					'01:00',
					'02:00',
					'03:00',
					'04:00',
					'05:00',
					'06:00',
					'07:00',
					'08:00',
					'09:00',
					'10:00',
					'11:00',
					'12:00',
					'13:00',
					'14:00',
					'15:00',
					'16:00',
					'17:00',
					'18:00',
					'19:00',
					'20:00',
					'21:00',
					'22:00',
					'23:00'
				],
				labels: {
					style: {
						color: '#333',
					}
				}
			},
			yAxis: {
				min: 0,
				title: {
					text: 'Pcs.'
				},
				labels: {
					style: {
						color: '#333',
					}
				}
			},
			legend: {
				itemStyle: {
					color: '#333'
				},
				itemHoverStyle: {
					color: '#000'
				}
			},
			navigation: {
				buttonOptions: {
					enabled: false
				}
			},
			tooltip: {
				headerFormat: '<span style="font-weight:bold;font-size:10px; color:#333">{point.key}</span><table>',
				pointFormat: '<tr><td style="font-weight:bold;color:{series.color};padding-right:5px">{series.name}: </td>' +
					'<td style="padding:0; color:#333;"><b>{point.y}</b></td></tr>',
				footerFormat: '</table>',
				shared: true,
				useHTML: true,
				backgroundColor: '#fff'
			},
			plotOptions: {
				column: {
					pointPadding: 0.2,
					borderWidth: 0
				}
			},
			series: [{
				name: 'Pcs. packed',
				data: this.getPackedPerHour(),
				color: '#163535'
			}],
		})
	};
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Showing timeinterval between categories in tooltip

Hi there!

Welcome to our forum and thank you for contacting us with your question.

To achieve this feature, I would recommend using the tooltip.formatter to create a custom formatting for your tooltip. Take a look at the simple implementation of it in the demo below, and feel free to build your whole custom tooltip around it.

DEMO: https://jsfiddle.net/BlackLabel/pthaxdug/
API Reference: https://api.highcharts.com/highcharts/tooltip.formatter

In case of any other questions, do not hesitate to ask,
Regards!
Kamil Musiałowski
Highcharts Developer
mkamuch
Posts: 5
Joined: Wed Oct 05, 2022 7:16 am

Re: Showing timeinterval between categories in tooltip

kamil.m wrote: Wed Oct 05, 2022 8:20 am Hi there!

Welcome to our forum and thank you for contacting us with your question.

To achieve this feature, I would recommend using the tooltip.formatter to create a custom formatting for your tooltip. Take a look at the simple implementation of it in the demo below, and feel free to build your whole custom tooltip around it.

DEMO: https://jsfiddle.net/BlackLabel/pthaxdug/
API Reference: https://api.highcharts.com/highcharts/tooltip.formatter

In case of any other questions, do not hesitate to ask,
Regards!

You're a lifesaver, thank you so much! It's working like a charm :)
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Showing timeinterval between categories in tooltip

Thank you! I'm glad that you are happy with the solution.
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Usage”