markus.wagner
Posts: 23
Joined: Thu Dec 13, 2018 2:51 pm

Different Tooltip per series & type

Hi,

i'm a bit confused with some other threads and the given highcharts api.

Recording to this link in the api, it should be possible, to define a separate formatter for each added series:
https://api.highcharts.com/highcharts/s ... tFormatter.

But i can't get it to work.
i have also found this thread viewtopic.php?f=9&t=41490, but it didn't suit exactly on my problem.

Is this an api-documentation error or am i just to dumb ? ;-)

What i want to do:

I have a stackedColumnChart with two series for the colums.
Additionally i have a third series for a line.
Now, i want to have a different tooltip for the line, and vor the columns.
-> Ok i found the possibility to do it with the general chart.plotoptions an if-then-else ..., but in my dynamic wrapper-class for sapui5, i don't want to code all future-charts in this if then else blocks. it should be a be so dynamic, that each series comes with it's own formatterOptions.

Could you help me a bit?

Fiddle:
https://jsfiddle.net/ph7bxLnd/
-> John/jane should have the same tooltip
->joe a different one
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Different Tooltip per series & type

Hi markus.wagner,

In the thread you found viewtopic.php?f=9&t=41490, we were talking about tooltip options like backgroundColor and similar. You can not set them through series.tooltip. But you can edit the tooltip's content through series. How? In the API you will not find anything like series.tooltip.formatter but series.tooltip.pointFormatter.
formatter vs pointFormatter ;)
https://api.highcharts.com/highcharts/s ... tFormatter

Here is a jsFiddle example: https://jsfiddle.net/BlackLabel/Lxph38j5

Best regards!
Rafal Sebestjanski,
Highcharts Team Lead
markus.wagner
Posts: 23
Joined: Thu Dec 13, 2018 2:51 pm

Re: Different Tooltip per series & type

Hi rafalS (or Czesc :-) ),

it seems to be an other problem- my investigations (btw. your example works in fiddle and it was exaclty what i did in my coding):
Due to the complexity of the whole application coding, i will follow to point out the problem with code-snippets.

I generate the SeriesData with a js.function inside a highchartsWrapper:

Code: Select all

this.getItems().forEach(function (element) { // items = allSeriesData /  element = series 
					var seriesBinding = chartBindings[1] + element.getData();
					var dataset = {
						type: element.getType(),
						name: element.getName(),
						data: dataModel.getProperty(seriesBinding),
						color: element.getColor(),
						dataLabels: {
							enabled: element.getDataLabels(),
							color: element.getLabelColor(),
							formatter: function () {
								return Highcharts.numberFormat(this.y, 0, '.', ',');
							}
						},
						targetOptions: {
							color: element.getTargetColor()
						},
						events: {
							click: function () {
									_that.fireEvent("onChartClick", {
										value: event
									});
								}
								//	"alert(this.name + ' clicked\n' +'Alt: ' + event.altKey + '\n' +'Control: ' + event.ctrlKey + '\n' +'Meta: ' + event.metaKey + '\n' +'Shift: ' + event.shiftKey);
						},
						tooltip: {
							pointFormatter: function () {
									return 'First <strong>line</strong> series.';
								}
								
						}
					};
					series.push(dataset);
				});
The resulting series-array is pushed to the whole json-config for chart generation via:

Code: Select all

	new Highcharts.Chart(this.getJsonConfig());
As we can see in developer-tools, the hierarchy is generated correctly (from my point of view).
pic1.PNG
pic1.PNG (38.78 KiB) Viewed 14952 times
pic2.PNG
pic2.PNG (3.18 KiB) Viewed 14952 times
--> strange: The event is called every time i click on a series -> everything is fine
--> The tooltip-formatter-function is never called in this scenario

--> As we can see in the codeSnippe, "event" / "pointFormatter" are defined exactly in the same way.
When i copy the event as a trigger function (just for tests), the result is the same: pointFormatter ist not called when tooltip is rendered

Code: Select all

events: {
							click: function () {
									_that.fireEvent("onChartClick", {
										value: event
									});
								}
								//	"alert(this.name + ' clicked\n' +'Alt: ' + event.altKey + '\n' +'Control: ' + event.ctrlKey + '\n' +'Meta: ' + event.metaKey + '\n' +'Shift: ' + event.shiftKey);
						},
						tooltip: {
							pointFormatter: function () {
								_that.fireEvent("onChartClick", {
									value: event
								});
							}
						}
Is there maybe an interpretaion or call-error in the pointFormatter ?
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Different Tooltip per series & type

markus.wagner,

hmm, it is hard to say without the ability to debugging a live code. Are you able to reproduce it in jsFiddle?

Also, can I ask you about the purpose of defying series the way you do?

Regards.
Rafal Sebestjanski,
Highcharts Team Lead
markus.wagner
Posts: 23
Joined: Thu Dec 13, 2018 2:51 pm

Re: Different Tooltip per series & type

Hi rafalS,

thanx for the reply.

I know its hard to find a bug/cause without the abilty of debugging, but i found somthing out:

If the series-tooltip is defined via pointFormatter and a general tooltip is defined (https://api.highcharts.com/highcharts/tooltip),
the general-definition is executed and the series-tooltip-definition is not called.

My intention was: i define a general tooltip, which works generally in all charts/series. I the special situations, where i need to define a specific tooltip for one series, i define it directly in the series and -> all series would take the general one, and the special series, takes the specific pointformatter.
It's a normal assumuption, that a "default-format" is taken when no "specific-format" is said.

-> With clearing/deleting the general-tooltip-definition and the definition of pointFormatters in each series in each chart, the tooltips are rendered as i need them for the project - but would it not be a good standardbehaviour that the tooltips should work this way:
"If no series tooltip-definition exists, took the general one" -> "If no general one, take highcharts default" ?


Offtopic:
"Also, can I ask you about the purpose of defying series the way you do?"

SAP Analytics Cloud uses Highcharts for the analytics applications, so we decided to take the same library, for a common coporate design in all analytics-applications. As we have/and would have more own sapui5 applications in the company, we need a general "highcharts-wrapper" for sapui5 applications. So i decided to build a wrapper-class which is as dynamic as possible.
So what i want for the developers is: Take a odataService, format the data for highcharts needs, bind them to a property, select the charttype - voilá chart is ready. -> in most cases this 4 steps should do about 50% application design.

Could i answer your question?
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Different Tooltip per series & type

Hi markus.wagner,

Will this work for you?: https://jsfiddle.net/BlackLabel/2mekwgnz

The idea is to execute the series.tooltip through the general tooltip (which you said that works in all your charts/series).

Regards.
Rafal Sebestjanski,
Highcharts Team Lead
markus.wagner
Posts: 23
Joined: Thu Dec 13, 2018 2:51 pm

Re: Different Tooltip per series & type

hi rafal,

sry for the late response.

Your fiddle doesn't fit to my general problem.
What i wanted to do is, definind a general tooltip, which will be rendered for all my charts.
I some special requirements, i wanted to ovverride the general tooltip with a series-specific one.
Now Highcharts schold render, for example 5 series in one chart with the general-tooltip, and the special series with the specific tooltip formatter defined in series.
--> This doesn't work, maybe a good feature for one of the next releases?!

I have fixed my problem with the following approach:
I do not define a general chart tooltip.
As all of my series are generated automatically by coding which follows after an oData-call,
i could check if a series has a user-defined tooltip. if yes, i fill the specific formatter in series-json.
If no specific formatter is defined, i have a fallback to a general formatter function, which will then take place as series fromatter.
So at the end, all my series have a tooltip-formatter defined, the general one or an specific.

Thx for your fast help !
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Different Tooltip per series & type

Oh, I am a little bit disappointed, because after I had read half of your post, I fastly coded something like this: https://jsfiddle.net/BlackLabel/yv3w4hmk
And then... I read the second half of your post, where you said that you did exactly the same (or at least something similar?) :D

Maybe my jsFiddle will help you a bit anyway.

Best regards!
Rafal Sebestjanski,
Highcharts Team Lead
markus.wagner
Posts: 23
Joined: Thu Dec 13, 2018 2:51 pm

Re: Different Tooltip per series & type

hehe :-)

Thx for this fast&nice support at this forum - after some starting-problems using highcharts, i'm really happy about my desicion using highcharts as the main chart-library at our company!
laxytt
Posts: 8
Joined: Wed Jun 22, 2022 2:29 pm

Re: Different Tooltip per series & type

rafalS wrote: Thu Jan 31, 2019 11:47 am Hi markus.wagner,

Will this work for you?: https://jsfiddle.net/BlackLabel/2mekwgnz

The idea is to execute the series.tooltip through the general tooltip (which you said that works in all your charts/series).

Regards.
Hi, I found your answer very helpful althouth I'm facing with an issue in my typescript enviroment.
I'm having an error: Property 'tooltipOptions' does not exist on type 'Series'.ts(2339)
I've tried with many types beyond TooltipFormatterContextObject, but I couldnt find the right one.
laxytt
Posts: 8
Joined: Wed Jun 22, 2022 2:29 pm

Re: Different Tooltip per series & type

I think it might be related to issue: https://github.com/highcharts/highcharts/issues/10814
Is the implementation something you would still suggest to use and how can I get rid of the typescript issue :wink:
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Different Tooltip per series & type

Hello,

As Torstein wrote in a ticket:
There are many private properties in the Highcharts classes that are not (and should not be) exposed.

The easiest way is to cast this custom property as any:
Demo: https://codesandbox.io/s/highcharts-typ ... c/index.ts

Let me know if you have any further questions!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
laxytt
Posts: 8
Joined: Wed Jun 22, 2022 2:29 pm

Re: Different Tooltip per series & type

Thank you for your response.
My eslint rules don't really like any type. But I've managed to cast it like so:

Code: Select all

( this.series as unknown as {
                tooltipOptions: { customTooltipPerSeries: () => unknown };
              }
 ).tooltipOptions.customTooltipPerSeries.call(this)
Maybe that would be useful for someone.
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Different Tooltip per series & type

You're welcome!

Thanks for sharing your solution.

In case of any further questions, feel free to contact us again.
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/

Return to “Highcharts Usage”