Enable/Disable tooltip on stockchart

[ortizh]

Hi!

I recently change my chart from Highcharts.chart to Highcharts.stockChart.

In my previous chart, I implemented a menu to allow users to enable / disable tooltip. Here is the code I was using to do so:

Code: Select all

tooltip: {
				useHTML: true,
				stickOnContact: true,
				formatter: function() {
					if (tooltipEnabled) {
						var numor = getNumor(this.x);
						if (numor == 0) {
							numor = 'None';
						}
						var tooltip = Highcharts.dateFormat('%e %b %Y, %H:%M:%S', new Date(this.x));
						tooltip += '<br><b>Numor: </b>'+ numor;
				        tooltip += '<br><b>Value: </b>'+ this.y + '&nbsp;<input id="style1" type="color" value="' + this.color + '" onchange="changeColor(' + this.series.index + ', value)">';
				        return tooltip;
			        } else {
			        	return false;
			        }
				}
			},
			

Now with my stockChart I use the following code:

Code: Select all

tooltip: {
			    split: false, // to remove bottom tooltip
				xDateFormat: '%e %b %Y, %H:%M:%S',
				useHTML: true,
				stickOnContact: true,
				pointFormatter: function() {
					if (tooltipEnabled) {
						var numor = getNumor(this.x);
						if (numor == 0) {
							numor = 'None';
						}
						var tooltip = '<b>'+this.series.name+'</b>';
				        tooltip += '<br><b>Value: </b>'+ Highcharts.numberFormat(this.y,2,'.',' ') + '&nbsp;' + this.series.options.myParam3;
						tooltip += '<br><b>Numor: </b>'+ numor  + '&nbsp;<input id="style1" type="color" value="' + this.color + '" onchange="changeColor(' + this.series.index + ', value)">';
				        return tooltip;
			        } else {
			        	return false;
			        }
				}
			},

Unfortunately, disabling the tooltip does not work, it still appears (see attached image).
What am I doing wrong ?
Thanks !

[kamil.k]

Hello ortizh!

Thanks for contacting us again.

Since the stock chart has initially at least two tooltips available you need to handle both to achieve that. The way you did that seems fine but as you disabled the split property, you need to use the formatter property instead of pointFormatter, see: https://jsfiddle.net/BlackLabel/w5xvL6ze/.

Alternatively, you can leave the split property enabled (it is by default) and operate only on the formatter one. Note that the split property determines what should be returned from this method. In the above example, a simple string value is returned but since we enable that split property, an array should be returned. Take a look at an example: https://jsfiddle.net/BlackLabel/fvptgz4u/.

For a better understanding, I strongly recommend reading the full explanation of what exactly should be returned from the formatter method and under what conditions: https://api.highcharts.com/highstock/tooltip.formatter.

Let me know if that was what you were looking for,
Kind Regards!

[ortizh]

Hi Kamil,

Thanks for your answer.
I have just changed from pointFormatter to formatter and the tooltip is correctly disabled BUT when it is enabled its content is no longer ok: Y value is not correctly formatted and the date has disappeared (see tooltip.png and goodTooltip.png)

[kamil.k]

Tooltip formatting is split between 3 sections: header, point, and footer. The suggested formatter property updates/overrides all of them, so the default date that is defined in header is not visible. Therefore it should be added manually, here's an example: https://jsfiddle.net/BlackLabel/qLv1c7yn/.

Here you can read more about tooltip formatting: https://www.highcharts.com/docs/chart-concepts/tooltip.

According to the y value, a change from pointFormatter to formatter property shouldn't be the cause as it's custom defined, and the this.y value remains the same. Can you provide an example representation of your actual data so I can debug it?

Regards!

[ortizh]

Hi Kamil,

Thanks for your answer, now the date is correctly displayed in the tooltip!
The Y value is still not formatted as I expect. Here is the last version of the tooltip part of my chart:

Code: Select all

	tooltip: {
		split: false, // to remove bottom tooltip
		xDateFormat: '%e %b %Y, %H:%M:%S',
		useHTML: true,
		stickOnContact: true,
		formatter: function() {
			if (tooltipEnabled) {
				var numor = getNumor(this.x);
				if (numor == 0) {
					numor = 'None';
				}
				let tooltip = '<span style="font-size: 10px">' + Highcharts.dateFormat('%e %b %Y, %H:%M:%S', this.x) + '</span><br/>';
				tooltip += '<b>'+this.series.name+'</b>';
				tooltip += '<br><b>Value: </b>'+ Highcharts.numberFormat(this.y,2,'.',' ') + '&nbsp;' + this.series.options.myParam3;
				tooltip += '<br><b>Numor: </b>'+ numor  + '&nbsp;<input id="style1" type="color" value="' + this.color + '" onchange="changeColor(' + this.series.index + ', value)">';
				return [false, tooltip, false];
			} else {
				return false;
			}
		}
	},

And here is how my Y axis is set:

Code: Select all

	yAxis: [
		{
			opposite: false,
			labels: {
				formatter: function() {
		                	var ret, numericSymbols = ['k', 'M', 'G', 'T', 'P', 'E'], i = 6;
		                    	if(this.value >=1000) {
		                        	while (i-- && ret === undefined) {
		                        		multi = Math.pow(1000, i + 1);
		                            		if (this.value >= multi && numericSymbols[i] !== null) {
		                                		ret = (this.value / multi) + numericSymbols[i];
		                            		}
		                        	}
		                    	}
					return (ret ? ret : this.value);
		                },
		               style: {
			                color: colors[0][0]	// blue
			            }
			        },
			        title: {
			        	enabled: false,
			        style: {
			        	color:colors[0][0],
			        	fontWeight: 'bold'
				}
			}
		},

Thanks!

[kamil.k]

Great it works for you!

According to the y values, can you make sure about the data you're passing in? Please, take a look at this example: https://jsfiddle.net/BlackLabel/uatn9djf/. I created two points, the first one with a high value, so the effect is the same as on your screen. Can you provide me a fake data that represents your actual ones? I don't see any calculations on your y value inside the tooltip.formatter, so everything should come from your data.

[ortizh]

Hi Kamil,

You said:

"I don't see any calculations on your y value inside the tooltip.formatter"

but when I call:

Code: Select all

Highcharts.numberFormat(this.y,2,'.',' ')

it should format my Y values no ?

[kamil.k]

By calculations, I meant operations on your y data that can update/change it. The Highcharts.numberFormat only formats the data, by setting the decimals/separators, see the full docs here: https://api.highcharts.com/class-refere ... ckFunction.

Since the series.data property represents the data you refer to inside the tooltip by this.y property, it would be much more helpful for me if you could provide these. It doesn't have to be real data, just fake ones, which I can work on, and point you in the right direction.

My point in the previous response was that you refer to the this.y property without updating it (only the format is being changed by the Highcharts.numberFormat method you mentioned), so it should come directly from the data you pass in the series.

Looking forward to your response,
Regards!