Legend in Map

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

Overview

The legend works in maps just the same way as it works in charts, please refer to:

In this tutorial we will show couple of samples of legend usage in maps and show how to display threshold in legend.

Simple Legend

Usually legend is used to show names of the regions on a map, and, probably, some additional values attached to this regions, for example sales amount in the certain states.

In the sample below we will 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.

Data is attached to the states in a following way:

XML Syntax

XML Code

    
            01
            <series type="MapRegions">
        
            02
              <point y="2000" name="WA" />
        
            03
              <point y="2000" name="OR" />
        
            04
              <point y="2500" name="ID" />
        
            05
              <point y="500" name="MT" />
        
            06
              <point y="3000" name="WY" />
        
            07
            </series>

The legend will be placed to the right of the map and its format is set to show region name and value attached to the regions:

XML Syntax

XML Code

    
            01
            <legend enabled="true" ignore_auto_item="True" position="Right" align="Near" align_by="dataplot" columns="1" width="30%" horizontal_padding="0">
        
            02
              <title enabled="true">
        
            03
                <text><![CDATA[Sales Per Region]]></text>
        
            04
              </title>
        
            05
              <columns_separator enabled="false" />
        
            06
              <font render_as_html="true" />
        
            07
              <items>
        
            08
                <item source="points" series="Details">
        
            09
                  <text><![CDATA[%cbegin<font size="12" face="Verdana"><textformat tabstops='[100]'>{%REGION_NAME}	${%Value}{numDecimals:0}</textformat></font>%cend]]></text>
        
            10
                </item>
        
            11
                <item source="series" series="Details">
        
            12
                  <text><![CDATA[%cbegin<font size="12" face="Verdana"><textformat tabstops='[100]'><b>Total:	${%DataPlotYSum}{numDecimals:0}</textformat></b></font>%cend]]></text>
        
            13
                </item>
        
            14
              </items>
        
            15
            </legend>

And here is a sample map with the legend, note that legend items is interactive - it highlights the corresponding region. Or all regions on Total item.

Note: <textformat tabstops='[100]'> is used to create table layout.

Live Sample: USA Sales Simple Legend Sample

Multiple Legends

Multiple Legends are useful when you want to divide some data into different legends, in the sample below we will put the same sales data into one legend, and in another table we will place ACME Corp. planned expansion states.

Additional legend is set in <controls> node in <chart_settings>:

XML Syntax

XML Code

    
            01
            <controls>
        
            02
              <legend enabled="true" ignore_auto_item="True" position="Right" align="Near" align_by="dataplot" columns="1" width="30%" horizontal_padding="0">
        
            03
                <title enabled="true">
        
            04
                  <text><![CDATA[Expansion]]></text>
        
            05
                </title>
        
            06
                <columns_separator enabled="false" />
        
            07
                <items>
        
            08
                  <item source="points" series="Expansion">
        
            09
                    <text><![CDATA[{%Icon} {%REGION_NAME} ({%PlannedExpansionPeriod}{enabled:False})]]></text>
        
            10
                  </item>
        
            11
                </items>
        
            12
              </legend>
        
            13
            </controls>

So, the additional legend shows "Expansion" series and placed below the main one. We also added custom PlannedExpansionPeriod attribute to the points in "Expansion" series, and show this attribute value both in the additional legend and in tooltips.

The sample of multiple legend map:

Live Sample: USA Sales Multiple Legends Sample

Thresholds in Legend

When the map is colored using threshold you can add this threshold to the legend so its description will be shown.

To do that you should configure legend items. The sample below shows map of the China with custom threshold.

Legend is configured to show it:

XML Syntax

XML Code

    
            01
            <legend enabled="true" position="float" inside_dataplot="true" anchor="RightTop" horizontal_padding="5" vertical_padding="5" ignore_auto_item="true">
        
            02
              <title>
        
            03
                <text><![CDATA[Illiteracy Rate]]></text>
        
            04
              </title>
        
            05
              <items>
        
            06
                <item source="Thresholds" thrshold="thrIlliteracy" />
        
            07
              </items>
        
            08
            </legend>

Live Sample: Sample China Illiteracy Rate Legend Showing Threshold Sample

Undefined Regions in Legend

To show undefined regions in legend you should use a built-in series name - "AnyChart_UndefinedRegions"

XML Syntax

XML Code

    
            01
            <items>
        
            02
              <item source="points" series="AnyChart_UndefinedRegions" />
        
            03
            </items>

Sample colored map of Japan with legend populated from undefined regions series:

Live Sample: Undefined Regions in Legend Flash Map of Japan with tooltips