Map Legend

Overview
Simple Legend
Multiple Legends
Thresholds in Legend
Undefined Regions In Legend

Overview

AnyMap legend works the same way it works in all other chart types. Look through Legend Settings article for more information about legends:

This articles shows several samples how legend is used with AnyChart JavaScript maps.

Simple Legend

Legend is used predominantly to show names of the regions on a map and some side values that describes this series at some point (like sales amount, divorce rate, etc.).

In the sample below we display the map of the USA (colored states are states where ACME Corp. sells its goods) with a legend that displays a list of states and sales volume for each of them.

Playground

  // series setting
  var series = map.choropleth(dataSet);
  series.geoIdField('iso_3166_2');
  series.colorScale(anychart.scales.linearColor());
  series.hoverFill('#FF9933');
  series.name('Sales of ACME Corp.');
  series.hoverStroke(anychart.color.darken('#F79430'));
  series.selectFill('#663300');
  series.selectStroke(anychart.color.darken('#663300'));  
  series.colorScale(anychart.scales.linearColor('#E08529', '#753D05'));
    
  // some legend settings
  map.legend(true);
  series.legendItem().iconFill('#D98026');
  series.legendItem().iconType("circle");

Note that this series is colored using the colorScale and the color of the state depends on the value it represents. We have changed the legendItem icon from default rectangular to circle using iconType().

Multiple Legends

Multiple Legends might be useful when you need to show different data in one map. In the sample below we add the second legend, which regions represent those states where the expansion is planned.

Playground

Note that the Color Range is also used in the sample, read more about it in Color Range article.

Thresholds in Legend

You can use Legend with thresholds; with thresholds, the legend looks similar to a Color Range with an ordinal Color Scale.

Let's create one more data set and a legend for it and define another color scale. This new series tells us about rival companies average profit.

var series_other = map.choropleth(dataSet_other);
series_other.geoIdField('iso_3166_2');
series_other.name('Sales of other companies');
series_other.labels().fontSize(10).fontColor('#212121').format(function(){
  return (this.value);
});
series_other.tooltip().content().textWrap('byLetter').useHtml(true);
series_other.tooltip().contentFormatter(function() {
  return '<span style="font-size: 13px">' + '$ ' + this.value + 'm </span>';
});
  
var scale = anychart.scales.ordinalColor([
  {less: 5},
  {from: 5, to: 10},
  {greater: 10}
]);
    
scale.colors(['#73E6BF', '#54D1B5', '#26B2A6']);
    
series_other.colorScale(scale);
  
// legend settings
var legend = map.legend();
legend.enabled(true);
legend.itemsSourceMode('CATEGORIES');

Playground

Undefined Regions In Legend

If you've got a lot of undefined regions (regions with no data), but you need to color them, use the unboundRegions() method:

// set the color for undefined (unbound) regions
map.unboundRegions().fill('#FFFFDE');

Playground