Highcharts tooltip in columns that are both left aligned like Quicksight tooltip

Question & Answer
,
1

I am trying to have 2 columns in highcharts’ tooltip that are both left aligned like in Quicksight.

Current in QS:
image

Currently in Highcharts visuals:
image

Here is my code:

"tooltip": {
    "headerFormat": "<span style='font-size:10px'>{point.key}</span><table><br/>",
    "pointFormat": "<span style='color:{series.color}'>{series.name}</span>: <b>{point.y:,.1f}</b> ({point.change/1000}K)<br/>",
    "footerFormat": "</table>",
    "shared": true,
    "useHTML": true
  }
2

Hi @adevaraj,
There are still some limitations within QuickSight’s highchart options when it comes to dealing with tool tips. Here’s some documentation on Highcharts API reference that would allow you to alter the alignment:

And here’s a demo:

https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/tooltip/footerformat/

Let me know if this does not work for your case as I believe some others have also been hitting roadblocks when it comes to the Highchart tool tips and I can mark this as a feature request.

3

Hi @adevaraj,
Following up here as it’s been awhile since we last heard from you. Did you have any additional questions regarding your topic?

If we do not hear back within the next 3 business days, I’ll close out this topic.

Thank you!

4

The issue was the tooltip has to be a separate section. We were including it under series.
This is the code we used for the tooltip.

"tooltip": {
    "shared": true,
    "useHTML": true,
    "headerFormat": "<table><tr><td> &nbsp &nbsp{point.key}</td></tr>",
    "pointFormat": "<tr><td><span style='color:{series.color}'>●</span>{series.name}:</td><td> {(multiply point.y 100):,.1f}% </td></tr>",
    "footerFormat": "</table>"
  }
5

Hi @adevaraj,
So is that the code that you applied to fix your issue or are you asking if it’s possible to setup the tooltip in a separate section? If that’s the case, by separate section do you mean outside of the visual?

6

that was the solution that worked for us.