Highmaps: How do you change the name of a state - highcharts

Question

I need to change the name of a state in this map from the Highmaps map collection. Specifically, I need to change the name of the "Distrito Federal" to "CDMX". In the series data it is this point: ['mx-df', 10]. I've searched around for an answer, but am having trouble understanding how to do it. Anyone out there able to help?
Here's a link to a JSFiddle: https://jsfiddle.net/sstoker/81w2revu/
Here's the HTML:
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/mx/mx-all.js"></script>
<div id="container"></div>
Here's the JavaScript:
// 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.
var data = [
['mx-3622', 0],
['mx-bc', 1],
['mx-bs', 2],
['mx-so', 3],
['mx-cl', 4],
['mx-na', 5],
['mx-cm', 6],
['mx-qr', 7],
['mx-mx', 8],
['mx-mo', 9],
['mx-df', 10],
['mx-qt', 11],
['mx-tb', 12],
['mx-cs', 13],
['mx-nl', 14],
['mx-si', 15],
['mx-ch', 16],
['mx-ve', 17],
['mx-za', 18],
['mx-ag', 19],
['mx-ja', 20],
['mx-mi', 21],
['mx-oa', 22],
['mx-pu', 23],
['mx-gr', 24],
['mx-tl', 25],
['mx-tm', 26],
['mx-co', 27],
['mx-yu', 28],
['mx-dg', 29],
['mx-gj', 30],
['mx-sl', 31],
['mx-hg', 32]
];
// Create the chart
Highcharts.mapChart('container', {
chart: {
map: 'countries/mx/mx-all'
},
title: {
text: 'Highmaps basic demo'
},
subtitle: {
text: 'Source map: Mexico'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
min: 0
},
series: [{
data: data,
name: 'Random data',
states: {
hover: {
color: '#BADA55'
}
},
dataLabels: {
enabled: true,
format: '{point.name + }'
}
}]
});
And here's the CSS:
#container {
height: 500px;
min-width: 310px;
max-width: 800px;
margin: 0 auto;
}
.loading {
margin-top: 10em;
text-align: center;
color: gray;
}

Answer 1

You can change the displayed information in tooltip and data label by using formatter function:
series: [{
...,
dataLabels: {
enabled: true,
formatter: function() {
if (this.point['hc-key'] === 'mx-df') {
return 'CDMX';
}
return this.point.name;
}
}
}],
tooltip: {
pointFormatter: function() {
if (this['hc-key'] === 'mx-df') {
return 'CDMX: ' + this.value;
}
return this.name + ' ' + this.value;
}
}
Live demo: https://jsfiddle.net/BlackLabel/hry758v3/
API Reference:
https://api.highcharts.com/highmaps/series.map.dataLabels.formatter
https://api.highcharts.com/highmaps/tooltip.pointFormatter