Highmaps: Change periods to commas when setOptions wont work

I have built a customized map using Highmaps by Highcharts. I need to change the periods (decimal point) to commas. I know how to do it normally using setOptions, like this:

Highcharts.setOptions({
  lang: {
    drillUpText: "< < Regresar",
    decimalPoint: ',',
    thousandsSep: '.'
  },
});

However, the map’s code has been customized to change the tooltip information and setOptions is no longer working to change the periods to commas. I suspect its an easy fix for someone more advanced that I. Are there any JavaScript experts out there that can help me out with this? Here’s a jsfiddle: http://jsfiddle.net/sstoker/L60jg274/

Here’s the relevant JS code:

$(function() { //For point links

    (function(H) {
        H.Legend.prototype.setItemEvents = null;
    })(Highcharts)

    // Prepare demo data
    // Data is joined to map using value of 'hc-key' property by default.
    // See API docs for 'joinBy' for more info on linking data and map.
    const data = [
        ['mx-3622', 0.00],
        ['mx-bc', 5.59],
        ['mx-bs', 4.05],
        ['mx-so', 4.77],
        ['mx-cl', 6.91],
        ['mx-na', 8.88],
        ['mx-cm', 8.01],
        ['mx-qr', 4.87],
        ['mx-mx', 5.01],
        ['mx-mo', 0.089],
        ['mx-df', 8.12],
        ['mx-qt', 7.32],
        ['mx-tb', 3.17],
        ['mx-cs', 1.15],
        ['mx-nl', 6.88],
        ['mx-si', 6.64],
        ['mx-ch', 2.19],
        ['mx-ve', 0.66],
        ['mx-za', 8.03],
        ['mx-ag', 10],
        ['mx-ja', 3.35],
        ['mx-mi', 3.91],
        ['mx-oa', 0.8],
        ['mx-pu', 1.53],
        ['mx-gr', 0.0],
        ['mx-tl', 2.95],
        ['mx-tm', 5.47],
        ['mx-co', 9.46],
        ['mx-yu', 8.62],
        ['mx-dg', 4.47],
        ['mx-gj', 8.33],
        ['mx-sl', 4.35],
        ['mx-hg', 4.75]
    ];

    const data1 = [
        ['mx-3622', 0.0],
        ['mx-bc', 13],
        ['mx-bs', 21],
        ['mx-so', 17],
        ['mx-cl', 10],
        ['mx-na', 3],
        ['mx-cm', 8],
        ['mx-qr', 16],
        ['mx-mx', 15],
        ['mx-mo', 31],
        ['mx-df', 6],
        ['mx-qt', 9],
        ['mx-tb', 24],
        ['mx-cs', 28],
        ['mx-nl', 11],
        ['mx-si', 12],
        ['mx-ch', 26],
        ['mx-ve', 30],
        ['mx-za', 7],
        ['mx-ag', 1],
        ['mx-ja', 23],
        ['mx-mi', 22],
        ['mx-oa', 29],
        ['mx-pu', 27],
        ['mx-gr', 32],
        ['mx-tl', 25],
        ['mx-tm', 14],
        ['mx-co', 2],
        ['mx-yu', 4],
        ['mx-dg', 19],
        ['mx-gj', 5],
        ['mx-sl', 20],
        ['mx-hg', 18]
    ];


    // Create the chart
    var chart = Highcharts.mapChart('container', {
        chart: {
            backgroundColor: '#f3f7fa',
            map: 'countries/mx/mx-all',
        },

        title: {
            text: ''
        },

        subtitle: {
            text: ''
        },



        plotOptions: { //For point links
            series: {
                events: {
                    legendItemClick: function(e) {
                        return false;
                    }
                }
            },
            map: {
                point: {
                    events: {
                        click: function() {
                            $('#map1').trigger(this['hc-key']);
                        }
                    }
                }
            }



        },

        exporting: {
            buttons: {
                contextButton: {
                    align: 'center',
                    x: 0
                }
            },
            chartOptions: {
                chart: {
                    events: {
                        load: function() {
                            this.renderer.image('http://165.22.82.145/wp-content/uploads/2019/09/IDDMEX-Logo.svg',
                                480, // x
                                335, // y
                                75, // width
                                40, // height
                            ).add();
                        }
                    }
                }
            }
        },


        mapNavigation: {
            enabled: false,
            buttonOptions: {
                verticalAlign: 'bottom'
            }
        },

        colorAxis: {
            min: 0,
            maxColor: 'blue',

            events: {
                legendItemClick: function() {
                    console.log(this)
                }
            },

            dataClasses: [{
                from: 0,
                to: 3.000,
                color: '#6497b1'
            }, {
                from: 3.001,
                to: 4.500,
                color: '#005b96'
            }, {
                from: 4.510,
                to: 7.000,
                color: '#03396c'
            }, {
                from: 7.001,
                to: 10.000,
                color: '#011f4b'
            }]
        },

        legend: {
            title: {
                text: 'Desarrollo',
                style: {
                    color: ( // theme
                        Highcharts.defaultOptions &&
                        Highcharts.defaultOptions.legend &&
                        Highcharts.defaultOptions.legend.title &&
                        Highcharts.defaultOptions.legend.title.style &&
                        Highcharts.defaultOptions.legend.title.style.color
                    ) || 'black'
                }
            },
            align: 'left',
            verticalAlign: 'bottom',
            floating: true,
            layout: 'vertical',
            valueDecimals: 3,
            symbolRadius: 5,
            symbolHeight: 14
        },



        series: [{
            keys: ['hc-key', 'value', 'rank'],
            data: data,
            name: 'Índice 2018',
            states: {
                hover: {
                    color: '#f3bbd3'
                },
            },
            dataLabels: {
                enabled: false,
                format: '{point.name}'
            }
        }],

        tooltip: {
            pointFormat: ' {point.name} {point.value} <br>Ranking: {point.rank}',
            pointFormatter: function() {
                var firstRow = (this['hc-key'] === 'mx-df') ?
                    "CDMX" :
                    this.name;
                firstRow = firstRow + " " + this.value;
                var secondRow = "Ranking: " + this.rank;
                return (firstRow + "<br />" + secondRow);
            }
        },

    });

});

256 thoughts on “Highmaps: Change periods to commas when setOptions wont work”

  1. hello there and thank you for your information – I’ve definitely picked up something new from right here.
    I did however expertise some technical issues using this site, as I
    experienced to reload the web site lots of times previous to I could get
    it to load properly. I had been wondering if your web host is OK?
    Not that I’m complaining, but slow loading instances times will sometimes affect your placement in google
    and could damage your quality score if ads and marketing with Adwords.

    Anyway I’m adding this RSS to my e-mail and could look out for much more of your
    respective exciting content. Make sure you update this again very soon. http://herreramedical.org/azithromycin

    Reply
  2. Pingback: viagra sample
  3. Pingback: sildenafil 50 mg
  4. Pingback: cialis on line
  5. Pingback: otc viagra
  6. Pingback: canada viagra
  7. Pingback: cialis samples
  8. Pingback: cialis directions
  9. Pingback: cheapest viagra
  10. Pingback: cialis best price
  11. Pingback: cheap cialis pills
  12. Pingback: where i buy viagra
  13. Pingback: viagra cock
  14. Pingback: sildenafil 20mg
  15. Pingback: viagra bestellen
  16. Pingback: female viagra
  17. Pingback: cialis viagra
  18. Pingback: buy viagra online
  19. Pingback: price for viagra
  20. Pingback: sildenafilo
  21. Pingback: viagra generic
  22. Pingback: goodrx sildenafil
  23. Pingback: viagra cialis
  24. Pingback: hims viagra
  25. Pingback: cialis pills