Search code examples
highchartsangular2-highcharts

HighCharts Currency in Maps


In my HighCharts Map, I have values that are currency. On the hover, I'd like them to appear as $, but they just appear are raw numbers.

Here's what I have so far

            series: [
                {
                    type: 'map',
                    name: 'Orders $',
                    states: {
                        hover: {
                            color: '#BADA55',
                        },
                    },
                    dataLabels: {
                        enabled: true,
                        format: '{point.name}',
                    },
                    allAreas: true,
                    data: this.model,
                },
            ],

Solution

  • It will be enough to set pointFormat property in tooltip configuration object:

      tooltip: {
        ...,
        pointFormat: '{point.value}$'
      }
    

    Live demo: https://jsfiddle.net/BlackLabel/xp71L0jv/

    API Reference: https://api.highcharts.com/highcharts/tooltip.pointFormat