Number format showing K, M in tooltip and data labels of Highcharts

Question & Answer
, ,
1

How do you set the formatting of the datalabels and tooltips to show K and M .
I was able to set the Y axis labels based on this: Highcharts language configuration: thousandsSep - Question & Answer - Amazon QuickSight Community

2

Hello @adevaraj !

Can you share an anonymized view of what your current code for your chart looks like?

I’m assuming you should be able to add something like the following to format your tooltip:

 "tooltip": {
    "headerFormat": "",
    "valueSuffix": " K"
  }
4 
"tooltip": {
    "headerFormat": "<span style='font-size:10px'>{point.key}</span><table>",
    "pointFormat": "<tr><td style='padding:0'>{series.name}: </td><td style='padding:0'><b>{point.y:,.1f}</b></td></tr>",
    "footerFormat": "</table>",
    "shared": true,
    "useHTML": true
  }
5 
"dataLabels":{
              "enabled":true,
              "formatter": ["formatValue", "value", 1],
              "crop": false,
              "allowOverlap":false,
        			"rotation":0,
              "borderRadius": 5,
              "align": "center",
              "x": 0,
              "y": -5,
              "style": {
                "colorByPoint": true,
                "fontWeight": "normal",
                "fontSize": "12px"
              }
6

I was able to get the data label to display K but I cannot set the number of digits after decimal point.
“format”:“{divide y 1000}K”,

1 Like
7

Hello @adevaraj !

After some research this may be a limitation but could you try the following?:

"dataLabels": {
    "enabled": true,
    "formatter": function () {
        return this.y.toFixed(4);
    },
    "crop": false,
    "allowOverlap": false,
    "rotation": 0,
    "borderRadius": 5,
    "align": "center",
    "x": 0,
    "y": -5,
    "style": {
        "colorByPoint": true,
        "fontWeight": "normal",
        "fontSize": "12px"
    }
}
8

image
image472Ă—526 16.2 KB

9

Hi @adevaraj,
It’s been awhile since last communication on this thread; were you able to find a work around for your case? As highcharts are still a newer feature to QuickSight, like Duncan said prior, this may still be a limitation.

I can mark this as a feature request to promote visibility to the support team but let us know if you have any additional questions as well.

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

Thank you!

10

I opened an AWS ticket and they are still trying to find a solution. I will post here if they find a solution.

11

There is an update although there are more bugs too. We should encase the values in braces.

“format”:“{(divide y 1000):,0.1f}K”

1 Like