HighMaps: Change state name on tooltip with various sets of data

Question

I have built a map based on a standard map provided by Highcharts. However, it has been customized to show two sets of data on the tooltip instead of one and also so that when one clicks on a state they are linked to another page with information for that state. The problem I am facing is I need to change the name of one of the states. I have the code to do that, but since I've already customized the map, I'm having a hard time getting everything to work together. Basically when I add the code for the name change, it removes one of sets of data in the tooltip for all the states. Anyone able to help me out with this (the great @ppotaczek perhaps :) ? Specifically, I need to change Distrito Federal to CDMX in the tooltip while not removing the the two data sets from the tooltip.

Here's a jsfiddle: https://jsfiddle.net/sstoker/3cdaqkyx/6/#save

Here's the relevant javascript code:

// 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]
                ];  


         data.forEach(function(el, i) {
           el.push(data1[i][1])
          });



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

                    title: {
                                text: ''
                        },

                        subtitle: {
                                text: ''
                        },

                legend: {
                title: {
                    text:'<span style="font-size:9.5px"> \< Bajo | Desarrollo democrático | Alto \> </span>',
                                 }
               },



                    plotOptions: { //For point links            
            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',
                        stops: [
                             [.0,'#6497b1'],
                             [.249,'#6497b1'],
                             [.25,'#005b96'],
                             [.499,'#005b96'],
                             [.5,' #03396c'],
                             [.749,'#03396c'],
                             [.75,'#011f4b']
                         ]
                    },

        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}'
           },

            });
});

and here is some javascript code that changes the name, but that is removing the second data series when I add it.

tooltip: {
    pointFormatter: function() {
        if (this['hc-key'] === 'mx-df') {
            return 'CDMX: ' + this.value;
        }

        return this.name + ' ' + this.value;
    }
}

Answer 1

Here's a solution to this problem. Add this code to the tooltip object.

              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);  
                }