Multiple value Tooltip using Highcharts

Question & Answer
, ,
1

Hi All,

Is there any example as how can we add multiple fields in Tooltip and data labels using Highcharts ?

Brief explanation about my use case:
I have to show both metric and % of total as tooltip and data label for a bubble chart. How do i achieve the data series mapping and also data calling from tooltips block.

Thanks,
Prantika

1 Like
2

Hii @prantika_sinha!!!

in my case it’s work when I call a HTML function, like this:

"tooltip": {
  "shared": true, // Enables a shared tooltip for all series at the hovered point
  "useHTML": true, // Allows the use of HTML in the tooltip for more complex styling
  "headerFormat": "<span style=\"color:{point.color}\">\u25CF</span><b> ( variable title of my x axis):</b> {point.key}<br/>", // Formats the header with a colored bullet point and the label of my variable of x axis followed by the point's key
  "pointFormat": "<table><thead><tr><th>(name of color variable on chart)</th><th>(name of value variable on chart)</th></tr></thead><tbody><tr><td>{series.name}</td><td>{#if (lt point.y 0)}{(multiply point.y -1):,.0f}{else}{point.y:,.0f}{/if}</td></tr></tbody></table>" // Formats the main content as a table with headers "(name of color variable on chart)" and "(name of value variable on chart)". It displays the series name and the point's value. If the value is negative, it multiplies it by -1 to display it as positive.
}

hope this help you! let me know if it get right, please!

3

Hi @lary_andr ,

Thank you for sharing this. But I am actually looking to add another value field in the tooltip only.

Here is a sample visual which I want to achieve:
Bubble chart complex tooltip

Thanks,
Prantika

4

@prantika_sinha, thank you for the demo! It really helped me understand the problem.

After researching a lot about this, I realized that the filter necessary to make the bubbles distinct on the graphs is only possible when you use the filter like in this part:

          "filter",
          ["getColumn", 0, 1, 2],
          // Adjusted to compare only two values at a time
 ["==", ["get", ["item"], 0], ["item", 2], ["item", 1]]
        ],

The issue is that, in this way, it’s impossible to compare column 0 with more than one value, which is why the second column ends up being 0.

In this case, I thought that the way we need to work to make this graph function properly, it’s not feasible to add another field and make it work well. This is because when I remove the “==” from the filter, the bubbles are not distinct by the name of the country as you want.

1 Like
5

Thanks for researching!!
I believe this is a limitation then.

6

Hi @prantika_sinha,
As this is a current limitation, I’ll go ahead and mark this as a feature request. If you have anything else that you’d like to add, feel free to comment below. Otherwise, I’ll close out this topic in 3 business days.

Thank you!