UX: Formatting data labels in tooltip of a map

Hi,

is it possible to format the data label in the tooltip of a map widget?

image

I would like it to have a point as thousand separator and 1 decimal with comma as separator.

Best Regards,

Alex

Try the pointFormat on the tooltip:

  "chartOptions": {
      "tooltip": {
         "pointFormat": "{series.name}: <b>{point.y:,.1f}</b> <br/>"
      }
}

I think there are a few examples on the Charts list on the Demo App.

But if you want to swap the decimal to comma I think it is a global setting, not sure if possible on the chart itself.

hope this helps!

Thanks for the reply, Rodrigo.

Unfortunately it does not work. I tried formatting the tooltip in different ways using the examples described on highcharts.com, but maps seem to be different from the other charts. The UX demo does not have an example for this either.

The advanced options look like this:

{
“cardConfig”: {
“height”: “500”
},
“mapDataJoinByKey”: “iso-a2”,
“map”: {
“mapCode”: “$<<ApliqoFPM.FIN Company.FIN Company::UX_Map>>”
},
“mapOptions”: {
“mapsTooltipFormat”: “”
}
}

It’s a bit annoying that such a simple request from the customer can’t be done easily…

Best Regards,
Alex

@Alex , I had faced a similar issue in an older version of Apliqo and the following had worked for formatting the extra decimal points. However, it seems that since then, the ‘thousandSep’ has been made a global parameter, the original referenced JS file in the highchart folder has been removed. Since the Highchart maps are a separate widget, it is possible that the thousandSep parameter is not linked to the value set by the global parameters. I tried fiddling with the default.constant.js “highcharts_options” but not have any effect…

     'HIGHCHARTS_OPTIONS': {  // https://api.highcharts.com/highcharts/lang
            'global': {            
            },
            'lang': {
                'thousandsSep': ','
            }
        },

Thanks, weiwei. I can confirm that the HIGHCHARTS_OPTIONS parameter in default.constant.js only applies to charts but not to maps.

This e.g. is working for charts:
‘HIGHCHARTS_OPTIONS’: { // lang | Highcharts JS API Reference
‘global’: {},
‘tooltip’: {
‘backgroundColor’: ‘#FCFFC5’,
‘borderWidth’: 4
}
},

1 Like