Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

Now that we know how to create a simple map (hyperlinks to the Simple Data Driven Map section) we will now look at customization of different map attributes. Below is a list of basic customizations possible for maps:

  • Showing full names in map labels

  • Showing values in labels

  • Showing labels only for specific entities

  • Customizing label display text

  • Customizing fonts

  • Using short names in tooltips

  • Turning off entity tool-tips

  • Handling null entities

Showing full names in map labels

FusionCharts Suite XT shows only the short names of the entities on the map by default. You can set the map to display the full name of the entity.

A map with its full entity names displayed looks like the chart below. Here each of the continents are entities and their full names are part of the label.

FusionCharts will load here..

The attributes used to customize this behavior are

Attribute Name

Description

showLabels

Set this to 1 (default) to show labels on the map or 0 to remove labels.

useSNameInLabels

Setting this to1 (default) displays the short name of the entity. Set it to 0 to display full name.

Given below is the data used to build the map

{ "chart": { "caption": "Global Population", "theme": "fint", "formatNumberScale": "0", "numberSuffix": "M", "showLabels": "1", "includeNameInLabels": "1", "useSNameInLabels": "0" }, "colorrange": { "color": [ { "minvalue": "0", "maxvalue": "100", "code": "#D0DFA3", "displayValue": "< 100M" }, { "minvalue": "100", "maxvalue": "500", "code": "#B0BF92", "displayValue": "100-500M" }, { "minvalue": "500", "maxvalue": "1000", "code": "#91AF64", "displayValue": "500M-1B" }, { "minvalue": "1000", "maxvalue": "5000", "code": "#A9FF8D", "displayValue": "> 1B" } ] }, "data": [ { "id": "NA", "value": "515" }, { "id": "SA", "value": "373" }, { "id": "AS", "value": "3875" }, { "id": "EU", "value": "727" }, { "id": "AF", "value": "885" }, { "id": "AU", "value": "32" } ] }
{
    "chart": {
        "caption": "Global Population",
        "theme": "fint",
        "formatNumberScale": "0",
        "numberSuffix": "M",
        "showLabels": "1",
        "includeNameInLabels": "1",
        "useSNameInLabels": "0"
    },
    "colorrange": {
        "color": [
            {
                "minvalue": "0",
                "maxvalue": "100",
                "code": "#D0DFA3",
                "displayValue": "< 100M"
            },
            {
                "minvalue": "100",
                "maxvalue": "500",
                "code": "#B0BF92",
                "displayValue": "100-500M"
            },
            {
                "minvalue": "500",
                "maxvalue": "1000",
                "code": "#91AF64",
                "displayValue": "500M-1B"
            },
            {
                "minvalue": "1000",
                "maxvalue": "5000",
                "code": "#A9FF8D",
                "displayValue": "> 1B"
            }
        ]
    },
    "data": [
        {
            "id": "NA",
            "value": "515"
        },
        {
            "id": "SA",
            "value": "373"
        },
        {
            "id": "AS",
            "value": "3875"
        },
        {
            "id": "EU",
            "value": "727"
        },
        {
            "id": "AF",
            "value": "885"
        },
        {
            "id": "AU",
            "value": "32"
        }
    ]
}

Showing values in labels

You can set the entity label to show data values. In the chart below, we have configured the labels to show the population value along with the continent short name.

FusionCharts will load here..

The attributes used to enable showing data values in labels are as follows:

Attribute Name

Description

includeValueInLabels

Set this attribute to 1 to display data values as part of the entity labels. The default value is 0.

labelSepChar

Specifies the character that works as a separator for the data value from the label name. This character is prefixed to the data value in the label.

Given below is the data used to build the map

{ "chart": { "caption": "Global Population", "theme": "fint", "formatNumberScale": "0", "numberSuffix": "M", "showLabels": "1", "labelSepChar": ": ", "includeValueInLabels": "1" }, "colorrange": { "color": [ { "minvalue": "0", "maxvalue": "100", "code": "#D0DFA3", "displayValue": "< 100M" }, { "minvalue": "100", "maxvalue": "500", "code": "#B0BF92", "displayValue": "100-500M" }, { "minvalue": "500", "maxvalue": "1000", "code": "#91AF64", "displayValue": "500M-1B" }, { "minvalue": "1000", "maxvalue": "5000", "code": "#A9FF8D", "displayValue": "> 1B" } ] }, "data": [ { "id": "NA", "value": "515" }, { "id": "SA", "value": "373" }, { "id": "AS", "value": "3875" }, { "id": "EU", "value": "727" }, { "id": "AF", "value": "885" }, { "id": "AU", "value": "32" } ] }
{
    "chart": {
        "caption": "Global Population",
        "theme": "fint",
        "formatNumberScale": "0",
        "numberSuffix": "M",
        "showLabels": "1",
        "labelSepChar": ": ",
        "includeValueInLabels": "1"
    },
    "colorrange": {
        "color": [
            {
                "minvalue": "0",
                "maxvalue": "100",
                "code": "#D0DFA3",
                "displayValue": "< 100M"
            },
            {
                "minvalue": "100",
                "maxvalue": "500",
                "code": "#B0BF92",
                "displayValue": "100-500M"
            },
            {
                "minvalue": "500",
                "maxvalue": "1000",
                "code": "#91AF64",
                "displayValue": "500M-1B"
            },
            {
                "minvalue": "1000",
                "maxvalue": "5000",
                "code": "#A9FF8D",
                "displayValue": "> 1B"
            }
        ]
    },
    "data": [
        {
            "id": "NA",
            "value": "515"
        },
        {
            "id": "SA",
            "value": "373"
        },
        {
            "id": "AS",
            "value": "3875"
        },
        {
            "id": "EU",
            "value": "727"
        },
        {
            "id": "AF",
            "value": "885"
        },
        {
            "id": "AU",
            "value": "32"
        }
    ]
}

Showing labels only for specific entities

Labels are shown for all entities by default. It is possible to display labels only for specific entities of interest. In the example below we display labels for two most populous continents.

FusionCharts will load here..

Here only Asia and Africa have their labels displayed while the other continents have no display text set for labels.

The attribute to configure display of labels is as follows:

Attribute Name

Description

showLabel

Set this attribute to 1 to show a specific entity label, or to 0 otherwise. To control display for specific entities, this should be defined at an entity level.

Given below is the data used to build the map

{ "chart": { "caption": "World's Two Most Populous Continents", "theme": "fint", "formatNumberScale": "0", "numberSuffix": "M", "useSNameInLabels": "0" }, "colorrange": { "color": [ { "minvalue": "0", "maxvalue": "100", "code": "#D0DFA3", "displayValue": "< 100M" }, { "minvalue": "100", "maxvalue": "500", "code": "#B0BF92", "displayValue": "100-500M" }, { "minvalue": "500", "maxvalue": "1000", "code": "#91AF64", "displayValue": "500M-1B" }, { "minvalue": "1000", "maxvalue": "5000", "code": "#A9FF8D", "displayValue": "> 1B" } ] }, "data": [ { "id": "NA", "value": "515" }, { "id": "SA", "value": "373" }, { "id": "AS", "value": "3875", "showLabel": "1" }, { "id": "EU", "value": "727" }, { "id": "AF", "value": "885", "showLabel": "1" }, { "id": "AU", "value": "32" } ] }
{
    "chart": {
        "caption": "World's Two Most Populous Continents",
        "theme": "fint",
        "formatNumberScale": "0",
        "numberSuffix": "M",
        "useSNameInLabels": "0"
    },
    "colorrange": {
        "color": [
            {
                "minvalue": "0",
                "maxvalue": "100",
                "code": "#D0DFA3",
                "displayValue": "< 100M"
            },
            {
                "minvalue": "100",
                "maxvalue": "500",
                "code": "#B0BF92",
                "displayValue": "100-500M"
            },
            {
                "minvalue": "500",
                "maxvalue": "1000",
                "code": "#91AF64",
                "displayValue": "500M-1B"
            },
            {
                "minvalue": "1000",
                "maxvalue": "5000",
                "code": "#A9FF8D",
                "displayValue": "> 1B"
            }
        ]
    },
    "data": [
        {
            "id": "NA",
            "value": "515"
        },
        {
            "id": "SA",
            "value": "373"
        },
        {
            "id": "AS",
            "value": "3875",
            "showLabel": "1"
        },
        {
            "id": "EU",
            "value": "727"
        },
        {
            "id": "AF",
            "value": "885",
            "showLabel": "1"
        },
        {
            "id": "AU",
            "value": "32"
        }
    ]
}

Customizing label display text

It is also possible to use a completely customizable text to display for each specific entity. In the chart below we configure the data label of each continent as sparse, moderate or dense based on the population density.

FusionCharts will load here..

The attribute used to define the display text for labels is as follows:

Attribute Name

Description

displayValue

Specifies the text to display as the entity label.

The data used to build this map is given below

{ "chart": { "caption": "Global Population Density", "showBorder": "1", "borderThickness": "3", "theme": "fint", "formatNumberScale": "0" }, "colorrange": { "color": [ { "minvalue": "0", "maxvalue": "10", "code": "#A9FF8D", "displayValue": "Sparse" }, { "minvalue": "10", "maxvalue": "35", "code": "#D0DFA3", "displayValue": "Moderate" }, { "minvalue": "35", "maxvalue": "100", "code": "#91AF64", "displayValue": "Dense" } ] }, "data": [ { "id": "NA", "value": "22.1", "showLabel": "1", "displayValue": "Moderate" }, { "id": "SA", "value": "22.0", "showLabel": "1", "displayValue": "Moderate" }, { "id": "AS", "value": "95.0", "showLabel": "1", "displayValue": "Dense" }, { "id": "EU", "value": "72.5", "showLabel": "1", "displayValue": "Dense" }, { "id": "AF", "value": "33.7", "showLabel": "1", "displayValue": "Moderate" }, { "id": "AU", "value": "3.2", "showLabel": "1", "displayValue": "Sparse" } ] }
{
    "chart": {
        "caption": "Global Population Density",
        "showBorder": "1",
        "borderThickness": "3",
        "theme": "fint",
        "formatNumberScale": "0"
    },
    "colorrange": {
        "color": [
            {
                "minvalue": "0",
                "maxvalue": "10",
                "code": "#A9FF8D",
                "displayValue": "Sparse"
            },
            {
                "minvalue": "10",
                "maxvalue": "35",
                "code": "#D0DFA3",
                "displayValue": "Moderate"
            },
            {
                "minvalue": "35",
                "maxvalue": "100",
                "code": "#91AF64",
                "displayValue": "Dense"
            }
        ]
    },
    "data": [
        {
            "id": "NA",
            "value": "22.1",
            "showLabel": "1",
            "displayValue": "Moderate"
        },
        {
            "id": "SA",
            "value": "22.0",
            "showLabel": "1",
            "displayValue": "Moderate"
        },
        {
            "id": "AS",
            "value": "95.0",
            "showLabel": "1",
            "displayValue": "Dense"
        },
        {
            "id": "EU",
            "value": "72.5",
            "showLabel": "1",
            "displayValue": "Dense"
        },
        {
            "id": "AF",
            "value": "33.7",
            "showLabel": "1",
            "displayValue": "Moderate"
        },
        {
            "id": "AU",
            "value": "3.2",
            "showLabel": "1",
            "displayValue": "Sparse"
        }
    ]
}

Customising fonts

You can customize font-related properties for each entity. In this example the font is set to Helvetica and the size of the label name is proportional to the value of each entity.

FusionCharts will load here..

The attributes used for customizing label fonts are as follows:

Attribute Name

Description

font

Specifies the font to be used in the entity

fontSize

Specifies the size of the font to be used with the entity

fontColor

Specifies the color of the font to be used with the entity

fontBold

Specifies if the label font will be bold formatted

Given below is the data used to build the map

{ "chart": { "caption": "Global Population", "theme": "fint", "formatNumberScale": "0", "numberSuffix": "M", "showLabels": "1" }, "colorrange": { "color": [ { "minvalue": "0", "maxvalue": "100", "code": "#D0DFA3", "displayValue": "< 100M" }, { "minvalue": "100", "maxvalue": "500", "code": "#B0BF92", "displayValue": "100-500M" }, { "minvalue": "500", "maxvalue": "1000", "code": "#91AF64", "displayValue": "500M-1B" }, { "minvalue": "1000", "maxvalue": "5000", "code": "#A9FF8D", "displayValue": "> 1B" } ] }, "data": [ { "id": "NA", "value": "515", "Font": "Helvetica", "FontSize": "15", "FontColor": "#383838" }, { "id": "SA", "value": "373", "Font": "Helvetica", "FontSize": "15", "FontColor": "#383838" }, { "id": "AS", "value": "3875", "Font": "Helvetica", "FontSize": "35", "FontColor": "#383838" }, { "id": "EU", "value": "727", "Font": "Helvetica", "FontSize": "20", "FontColor": "#383838" }, { "id": "AF", "value": "885", "Font": "Helvetica", "FontSize": "25", "FontColor": "#383838" }, { "id": "AU", "value": "32", "Font": "Helvetica", "FontSize": "10", "FontColor": "#383838" } ] }
{
    "chart": {
        "caption": "Global Population",
        "theme": "fint",
        "formatNumberScale": "0",
        "numberSuffix": "M",
        "showLabels": "1"
    },
    "colorrange": {
        "color": [
            {
                "minvalue": "0",
                "maxvalue": "100",
                "code": "#D0DFA3",
                "displayValue": "< 100M"
            },
            {
                "minvalue": "100",
                "maxvalue": "500",
                "code": "#B0BF92",
                "displayValue": "100-500M"
            },
            {
                "minvalue": "500",
                "maxvalue": "1000",
                "code": "#91AF64",
                "displayValue": "500M-1B"
            },
            {
                "minvalue": "1000",
                "maxvalue": "5000",
                "code": "#A9FF8D",
                "displayValue": "> 1B"
            }
        ]
    },
    "data": [
        {
            "id": "NA",
            "value": "515",
            "Font": "Helvetica",
            "FontSize": "15",
            "FontColor": "#383838"
        },
        {
            "id": "SA",
            "value": "373",
            "Font": "Helvetica",
            "FontSize": "15",
            "FontColor": "#383838"
        },
        {
            "id": "AS",
            "value": "3875",
            "Font": "Helvetica",
            "FontSize": "35",
            "FontColor": "#383838"
        },
        {
            "id": "EU",
            "value": "727",
            "Font": "Helvetica",
            "FontSize": "20",
            "FontColor": "#383838"
        },
        {
            "id": "AF",
            "value": "885",
            "Font": "Helvetica",
            "FontSize": "25",
            "FontColor": "#383838"
        },
        {
            "id": "AU",
            "value": "32",
            "Font": "Helvetica",
            "FontSize": "10",
            "FontColor": "#383838"
        }
    ]
}

Using short names in tooltips

Tooltips in maps show the full name of the entity along with the value by default. The tooltip can be configured to show only the short name. In the chart below, we have set the labels to show the entity full names and the tooltip shows the short name.

FusionCharts will load here..

The attribute used to customize tooltips is explained here

Attribute Name

Description

useSNameInToolTip

Set this to 1 to display the entity short name in tooltip. Set this to 0 (default) to show entity full name instead.

Given below is the data used to build the map

{ "chart": { "caption": "Global Population", "theme": "fint", "formatNumberScale": "0", "numberSuffix": "M", "showLabels": "1", "useSNameInToolTip": "1", "useSNameInLabels": "0" }, "colorrange": { "color": [ { "minvalue": "0", "maxvalue": "100", "code": "#D0DFA3", "displayValue": "< 100M" }, { "minvalue": "100", "maxvalue": "500", "code": "#B0BF92", "displayValue": "100-500M" }, { "minvalue": "500", "maxvalue": "1000", "code": "#91AF64", "displayValue": "500M-1B" }, { "minvalue": "1000", "maxvalue": "5000", "code": "#A9FF8D", "displayValue": "> 1B" } ] }, "data": [ { "id": "NA", "value": "515" }, { "id": "SA", "value": "373" }, { "id": "AS", "value": "3875" }, { "id": "EU", "value": "727" }, { "id": "AF", "value": "885" }, { "id": "AU", "value": "32" } ] }
{
    "chart": {
        "caption": "Global Population",
        "theme": "fint",
        "formatNumberScale": "0",
        "numberSuffix": "M",
        "showLabels": "1",
        "useSNameInToolTip": "1",
        "useSNameInLabels": "0"
    },
    "colorrange": {
        "color": [
            {
                "minvalue": "0",
                "maxvalue": "100",
                "code": "#D0DFA3",
                "displayValue": "< 100M"
            },
            {
                "minvalue": "100",
                "maxvalue": "500",
                "code": "#B0BF92",
                "displayValue": "100-500M"
            },
            {
                "minvalue": "500",
                "maxvalue": "1000",
                "code": "#91AF64",
                "displayValue": "500M-1B"
            },
            {
                "minvalue": "1000",
                "maxvalue": "5000",
                "code": "#A9FF8D",
                "displayValue": "> 1B"
            }
        ]
    },
    "data": [
        {
            "id": "NA",
            "value": "515"
        },
        {
            "id": "SA",
            "value": "373"
        },
        {
            "id": "AS",
            "value": "3875"
        },
        {
            "id": "EU",
            "value": "727"
        },
        {
            "id": "AF",
            "value": "885"
        },
        {
            "id": "AU",
            "value": "32"
        }
    ]
}

Turning off entity tooltips

In FusionCharts Suite XT, tooltips are on by default but can be turned off for entities. Tooltips have been removed for the chart below.

FusionCharts will load here..

The attribute to configure tooltip display behaviour is as follows:

Attribute Name

Description

showEntityToolTip

Set this to 1 (default) to display tooltip on entity hover, set it to 0 otherwise.

The data that is used to build this map is shown here

{ "chart": { "caption": "Global Population", "theme": "fint", "formatNumberScale": "0", "numberSuffix": "M", "showLabels": "1", "showEntityToolTip": "0", "useSNameInLabels": "0" }, "colorrange": { "color": [ { "minvalue": "0", "maxvalue": "100", "code": "#D0DFA3", "displayValue": "< 100M" }, { "minvalue": "100", "maxvalue": "500", "code": "#B0BF92", "displayValue": "100-500M" }, { "minvalue": "500", "maxvalue": "1000", "code": "#91AF64", "displayValue": "500M-1B" }, { "minvalue": "1000", "maxvalue": "5000", "code": "#A9FF8D", "displayValue": "> 1B" } ] }, "data": [ { "id": "NA", "value": "515" }, { "id": "SA", "value": "373" }, { "id": "AS", "value": "3875" }, { "id": "EU", "value": "727" }, { "id": "AF", "value": "885" }, { "id": "AU", "value": "32" } ] }
{
    "chart": {
        "caption": "Global Population",
        "theme": "fint",
        "formatNumberScale": "0",
        "numberSuffix": "M",
        "showLabels": "1",
        "showEntityToolTip": "0",
        "useSNameInLabels": "0"
    },
    "colorrange": {
        "color": [
            {
                "minvalue": "0",
                "maxvalue": "100",
                "code": "#D0DFA3",
                "displayValue": "< 100M"
            },
            {
                "minvalue": "100",
                "maxvalue": "500",
                "code": "#B0BF92",
                "displayValue": "100-500M"
            },
            {
                "minvalue": "500",
                "maxvalue": "1000",
                "code": "#91AF64",
                "displayValue": "500M-1B"
            },
            {
                "minvalue": "1000",
                "maxvalue": "5000",
                "code": "#A9FF8D",
                "displayValue": "> 1B"
            }
        ]
    },
    "data": [
        {
            "id": "NA",
            "value": "515"
        },
        {
            "id": "SA",
            "value": "373"
        },
        {
            "id": "AS",
            "value": "3875"
        },
        {
            "id": "EU",
            "value": "727"
        },
        {
            "id": "AF",
            "value": "885"
        },
        {
            "id": "AU",
            "value": "32"
        }
    ]
}

Handling null entities

It is likely that all entities within a map don’t have an associated value (or have a null value). Such entities can be customized by modifying the transparency, color and hover effects. The chart below shows a sales tracker across continents with some entities having a null value.

FusionCharts will load here..

The attributes used to configure null entities are mentioned below:

Attribute Name

Description

nullEntityColor

Specifies the color for null value entities.

nullEntityAlpha

Specifies the transparency of the entity. Value can be set between 0 (completely transparent) to 100 (opaque).

hoverOnNull

Set this to 1 to enable hover effects for null entities, or to 0 (default?) otherwise.

The data for this chart is shown below

{ "chart": { "caption": "Global Sales Tracker", "theme": "fint", "formatNumberScale": "0", "numberSuffix": "M", "showLabels": "1", "nullEntityColor": "#C2C2D6", "nullEntityAlpha": "50", "hoverOnNull": "0", "useSNameInLabels": "0" }, "colorrange": { "color": [ { "minvalue": "0", "maxvalue": "100", "code": "#D0DFA3", "displayValue": "Below 100M" }, { "minvalue": "100", "maxvalue": "500", "code": "#B0BF92", "displayValue": "100-500M" }, { "minvalue": "500", "maxvalue": "1000", "code": "#91AF64", "displayValue": "500-1000M" } ] }, "data": [ { "id": "NA", "value": "515" }, { "id": "SA", "value": "373" }, { "id": "EU", "value": "727" }, { "id": "AU", "value": "37" } ] }
{
    "chart": {
        "caption": "Global Sales Tracker",
        "theme": "fint",
        "formatNumberScale": "0",
        "numberSuffix": "M",
        "showLabels": "1",
        "nullEntityColor": "#C2C2D6",
        "nullEntityAlpha": "50",
        "hoverOnNull": "0",
        "useSNameInLabels": "0"
    },
    "colorrange": {
        "color": [
            {
                "minvalue": "0",
                "maxvalue": "100",
                "code": "#D0DFA3",
                "displayValue": "Below 100M"
            },
            {
                "minvalue": "100",
                "maxvalue": "500",
                "code": "#B0BF92",
                "displayValue": "100-500M"
            },
            {
                "minvalue": "500",
                "maxvalue": "1000",
                "code": "#91AF64",
                "displayValue": "500-1000M"
            }
        ]
    },
    "data": [
        {
            "id": "NA",
            "value": "515"
        },
        {
            "id": "SA",
            "value": "373"
        },
        {
            "id": "EU",
            "value": "727"
        },
        {
            "id": "AU",
            "value": "37"
        }
    ]
}
Top