Still have questions?
Contact support
You are looking at an outdated 7.10.0 version of this document. Switch to the 7.14.0 version to see the up to date information.

Map Tooltips

Overview

Tooltips in Maps are quite similar to the usual tooltips you can find and configure for any other chart type, the only differences is that you can use keywords provided by the map source.

To learn about Tooltips editing in general please visit Text Settings and Text Formatters.

Tooltips for Map regions

When you attach the data to your map, you can add some extra fields which you may want to show later in the tooltip. Just look through the Text Formatters article to know more about meta.

In the sample below we've got a map of Australia, where each state data contains some extra information which lately is viewed in tooltips on states hover.

Note that we added extra fields to each data point, and one of the regions has one extra field more than other. Then we used .textFormatter to transform our tooltips to make them show the information we need instead of what is displayed by default.

var mapDataSet = anychart.data.set([
            {'id': 'AU.WA', 'capital': 'Perth', 'population': 1507949},
            {'id': 'AU.JB', 'capital': 'Canberra', 'population': 377},
            {'id': 'AU.NS', 'capital': 'Sydney', 'population': 4293105},
            {'id': 'AU.VI', 'capital': 'Melbourne', 'population': 3800000},
            {'id': 'AU.NT', 'capital': 'Darwin', 'population': 113955},
            {'id': 'AU.TS', 'capital': 'Hobart', 'population': 205510},
            {'id': 'AU.CT', 'capital': 'Canberra', 'population': 374766},
            {'id': 'AU.SA', 'capital': 'Adelaide', 'population': 1138833},
            {'id': 'AU.QL', 'capital': 'Brisbane', 'population': 1820375}
]);


// create a map
var mapChart = anychart.map();
mapChart.geoData(anychart.maps.australia);

// set the series
var series = mapChart.choropleth(mapDataSet);
series.geoIdField('code_hasc');

// enable the tooltips and format them at once
series.tooltip().textFormatter(function(e){
   return "Capital: " + e.getDataValue("capital") +"\n"+
   "Population: " + e.getDataValue("population")
});

And here is a live sample:

JsFiddle Playground