User avatar
Kruppe
Posts: 12
Joined: Thu Feb 25, 2021 8:25 pm

How to set tooltip for Histogram with dual series in date format

While creating a Histogram(https://jsfiddle.net/Kruppe/t0qsrze5/21/) with dual series in date format, I got following problems :
  • How to set tooltip (separately) for scattered points & columns in date format? Hereby for the scatter points, point.x is the numbering and point.y is the time(in ms); but for columns,  the tooltip seems indicating a range of datetime; so following (commented) global tooltip does not fit:

Code: Select all

tooltip: {
    pointFormat: '{point.x}: {point.y: %H:%M:%S}'
},
  • Or, would it be possible to define plotOption.tooltip in each serie, or maybe use xDateformat? I tried but not successful.(is my chart definition xAxis/yAxis correct?)
  • The datasets was dumped from Django/python code, how to use 'tooltip.formatter' function there?
  • BTW: why the scattered series, one in circular dots, one in quadrangular dots?

Many thanks for any insightful thoughts. :idea:
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: How to set tooltip for Histogram with dual series in date format

Hello Kruppe,

Thanks for contacting us with your questions.

In you case you can either set tooltip rules for all series of specific type with plotOptions:

Code: Select all

  plotOptions: {
    histogram: {
      tooltip: {
        ...tooltip settings
      },
    },
   } 
...or set properties for only one series exclusively within that series' options:

Code: Select all

  series: [{
    type: 'histogram',
    tooltip: {
      ...tooltip options
    }
  }]
Demo: https://jsfiddle.net/BlackLabel/7tgs4cfw/

This should be an answer to your second question, you can exactly like that define tooltip options for each series.

When it comes to dataset it doesn't really mater from where it comes from as long as the format is correct. To use tooltip.formatter you need to pass your callback function which should format tooltip (its text, elements etc) from a scratch.
API reference:


Scatter series have different marker symbols to make it easier to distinguish one from another. Of course it can be changed. To do this you need to use marker.symbol property.
API reference: https://api.highcharts.com/highcharts/s ... ker.symbol

Let me know if you have any further questions!
Best regards!
Mateusz Bernacik
Highcharts Developer
User avatar
Kruppe
Posts: 12
Joined: Thu Feb 25, 2021 8:25 pm

Re: How to set tooltip for Histogram with dual series in date format

Thanks @mateusz.b! really helped & solved my questions ...

But the one "tooltip.formatter" may need your further assistance. My chart is configured in json format with a Django view.py, which would be like :

Code: Select all

myChart= { 
	'chart' = {
		'type' : 'spline',
		...
	},
	... 
	'tooltip' : {
		'formatter': "function () {
            				return 'The value for <b>' + this.x +'</b> is <b>' + this.y + '</b>' ";
	},
	...
} 
...
dumpedChart = json.dumps(myChart)

As you can see the formatter command with function () {} involves the symbols of " and {}, which will conflict with Django/Python grammar, thus makes Django/python not able to parse tbrings up error.
hen
This conflict has been long and asked also at StackOverflow, seems impossible, but I still wonder if anyone asked here in forum before and the ultimate judgement from native Highcharts™ developer/experts.

Best regards
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: How to set tooltip for Histogram with dual series in date format

Hello Kruppe,

Information that your chart config comes in JSON format is crucial here, unfortunately you can't use tooltip.formatter in this case due to JSON limitations. As you probably know JSON is a data description language and function is not supported data type. You need to rely on properties like headerFormat, pointFormat etc. but advanced tooltip configuration can be impossible here.

Best regards!
Mateusz Bernacik
Highcharts Developer
User avatar
Kruppe
Posts: 12
Joined: Thu Feb 25, 2021 8:25 pm

Re: How to set tooltip for Histogram with dual series in date format

@mateusz.b, many thanks for your quick response. Thus this case can be closed.
----
BTW: Maybe allow my suggestions to make this forum better:
1. @ function to mention and notify the people in thread or registered in forum;
2. Give user in discussion KUDO ( or upvote/downvote) to thank to people helped, thus encourage people help ranks their knowledge level and mark as experts.
3. Mark as solution or close, so that it archived within knowledge database;
4. It would be even more professional, if the Highcharts keywords can be automatically highlighted/syntax not only in code section.

Cheers!
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: How to set tooltip for Histogram with dual series in date format

Hi Kruppe,

I'm glad we figured it out.

When it comes to your suggestions - thanks a lot, such feedback is really valuable for us. I completely agree with your proposed features, especially third and second one. Sometimes we talk about forum and possible improvements and I will definitelly bring these up.

Best regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Usage”