Attribute Reference

Example of USA Chart:

FusionCharts will load here..

JavaScript embedding code:

<script type="text/javascript">
    FusionCharts.ready(function(){
        var myChart = new FusionCharts({
            "type": "usa",
            "dataFormat": "jsonurl",
            "dataSource": "chartdata.json"
        });
    });
</script>

Data for this chart:

JSON
XML

{
    "chart": {
        "caption": "Annual Sales by State",
        "subcaption": "Last year",
        "entityFillHoverColor": "#cccccc",
        "numberScaleValue": "1,1000,1000",
        "numberScaleUnit": "K,M,B",
        "numberPrefix": "$",
        "showLabels": "1",
        "theme": "fusion"
    },
    "colorrange": {
        "minvalue": "0",
        "startlabel": "Low",
        "endlabel": "High",
        "code": "#e44a00",
        "gradient": "1",
        "color": [
            {
                "maxvalue": "56580",
                "displayvalue": "Average",
                "code": "#f8bd19"
            },
            {
                "maxvalue": "100000",
                "code": "#6baa01"
            }
        ]
    },
    "data": [
        {
            "id": "HI",
            "value": "3189"
        },
        {
            "id": "DC",
            "value": "2879"
        },
        {
            "id": "MD",
            "value": "920"
        },
        {
            "id": "DE",
            "value": "4607"
        },
        {
            "id": "RI",
            "value": "4890"
        },
        {
            "id": "WA",
            "value": "34927"
        },
        {
            "id": "OR",
            "value": "65798"
        },
        {
            "id": "CA",
            "value": "61861"
        },
        {
            "id": "AK",
            "value": "58911"
        },
        {
            "id": "ID",
            "value": "42662"
        },
        {
            "id": "NV",
            "value": "78041"
        },
        {
            "id": "AZ",
            "value": "41558"
        },
        {
            "id": "MT",
            "value": "62942"
        },
        {
            "id": "WY",
            "value": "78834"
        },
        {
            "id": "UT",
            "value": "50512"
        },
        {
            "id": "CO",
            "value": "73026"
        },
        {
            "id": "NM",
            "value": "78865"
        },
        {
            "id": "ND",
            "value": "50554"
        },
        {
            "id": "SD",
            "value": "35922"
        },
        {
            "id": "NE",
            "value": "43736"
        },
        {
            "id": "KS",
            "value": "32681"
        },
        {
            "id": "OK",
            "value": "79038"
        },
        {
            "id": "TX",
            "value": "75425"
        },
        {
            "id": "MN",
            "value": "43485"
        },
        {
            "id": "IA",
            "value": "46515"
        },
        {
            "id": "MO",
            "value": "63715"
        },
        {
            "id": "AR",
            "value": "34497"
        },
        {
            "id": "LA",
            "value": "70706"
        },
        {
            "id": "WI",
            "value": "42382"
        },
        {
            "id": "IL",
            "value": "73202"
        },
        {
            "id": "KY",
            "value": "79118"
        },
        {
            "id": "TN",
            "value": "44657"
        },
        {
            "id": "MS",
            "value": "66205"
        },
        {
            "id": "AL",
            "value": "75873"
        },
        {
            "id": "GA",
            "value": "76895"
        },
        {
            "id": "MI",
            "value": "67695"
        },
        {
            "id": "IN",
            "value": "33592"
        },
        {
            "id": "OH",
            "value": "32960"
        },
        {
            "id": "PA",
            "value": "54346"
        },
        {
            "id": "NY",
            "value": "42828"
        },
        {
            "id": "VT",
            "value": "77411"
        },
        {
            "id": "NH",
            "value": "51403"
        },
        {
            "id": "ME",
            "value": "64636"
        },
        {
            "id": "MA",
            "value": "51767"
        },
        {
            "id": "CT",
            "value": "57353"
        },
        {
            "id": "NJ",
            "value": "80788"
        },
        {
            "id": "WV",
            "value": "95890"
        },
        {
            "id": "VA",
            "value": "83140"
        },
        {
            "id": "NC",
            "value": "97344"
        },
        {
            "id": "SC",
            "value": "88234"
        },
        {
            "id": "FL",
            "value": "88234"
        }
    ]
}

<chart caption="Annual Sales by State" subcaption="Last year" entityfillhovercolor="#cccccc" numberscalevalue="1,1000,1000" numberscaleunit="K,M,B" numberprefix="$" showlabels="1" theme="fusion">
    <colorrange minvalue="0" startlabel="Low" endlabel="High" code="#e44a00" gradient="1">
        <color maxvalue="56580" displayvalue="Average" code="#f8bd19" />
        <color maxvalue="100000" code="#6baa01" />
    </colorrange>
    <set id="HI" value="3189" />
    <set id="DC" value="2879" />
    <set id="MD" value="920" />
    <set id="DE" value="4607" />
    <set id="RI" value="4890" />
    <set id="WA" value="34927" />
    <set id="OR" value="65798" />
    <set id="CA" value="61861" />
    <set id="AK" value="58911" />
    <set id="ID" value="42662" />
    <set id="NV" value="78041" />
    <set id="AZ" value="41558" />
    <set id="MT" value="62942" />
    <set id="WY" value="78834" />
    <set id="UT" value="50512" />
    <set id="CO" value="73026" />
    <set id="NM" value="78865" />
    <set id="ND" value="50554" />
    <set id="SD" value="35922" />
    <set id="NE" value="43736" />
    <set id="KS" value="32681" />
    <set id="OK" value="79038" />
    <set id="TX" value="75425" />
    <set id="MN" value="43485" />
    <set id="IA" value="46515" />
    <set id="MO" value="63715" />
    <set id="AR" value="34497" />
    <set id="LA" value="70706" />
    <set id="WI" value="42382" />
    <set id="IL" value="73202" />
    <set id="KY" value="79118" />
    <set id="TN" value="44657" />
    <set id="MS" value="66205" />
    <set id="AL" value="75873" />
    <set id="GA" value="76895" />
    <set id="MI" value="67695" />
    <set id="IN" value="33592" />
    <set id="OH" value="32960" />
    <set id="PA" value="54346" />
    <set id="NY" value="42828" />
    <set id="VT" value="77411" />
    <set id="NH" value="51403" />
    <set id="ME" value="64636" />
    <set id="MA" value="51767" />
    <set id="CT" value="57353" />
    <set id="NJ" value="80788" />
    <set id="WV" value="95890" />
    <set id="VA" value="83140" />
    <set id="NC" value="97344" />
    <set id="SC" value="88234" />
    <set id="FL" value="88234" />
</chart>

Functional Attributes

These attributes let you control a variety of functional elements on the map. For example, you can opt to show/hide entity labels, display them above/below the markers, and so on.

chart : {

showLabels : Boolean [+]

Sets whether entity labels will be shown or hidden

Default value: 0 (hidden)

Range: 0/1

includeNameInLabels : Boolean [+]

Sets whether entity names will be shown as a part of map labels

This attribute works only when the showLabels attribute is set to 1.

Range: 0/1

includeValueInLabels : Boolean [+]

Sets whether entity values will be shown as a part of map labels

This attribute works only when the showLabels attribute is set to 1.

Range: 0/1

useSNameInLabels : Boolean [+]

Sets whether an entity's short name or long name will be a part of the map label

Default value: 1 (the short name is used in the label)

This attribute works only when the showLabels attribute is set to 1.

Range: 0/1

useSNameInToolTip : Boolean [+]

Sets whether an entity's short name or long name will be a part of the tooltip for an entity

Default value: 1 (the long name is used in the tooltip)

This attribute works only when the showLabels attribute is set to 1.

Range: 0/1

showShadow : Boolean [+]

Sets whether a shadow effect will be applied to the map

Default value: 0 (the effect is not applied)

Range: 0/1

caption : String [+]

Sets the map caption

subCaption : String [+]

Sets the map sub-caption

captionPosition : String [+]

Sets the caption and sub-caption position

Default value: top-center

Range: top-left, top-right, bottom-left, bottom-right and top-center

clickURL : String [+]

The entire map can act as a hotspot. This attribute is used to specify the URL to define the hotspot link for the map. The link can be specified in FusionCharts Link Format.

hoverOnEmpty : Boolean [+]

Sets whether the tooltip will shown for entities that don't have a value assigned in the JSON data

Range: 0/1

aboutMenuItemLabel : String [+]

Sets the menu item label for the custom context menu item

entityLabelsOnTop : Boolean [+]

Sets whether entity labels will be shown above or below the markers on a map

Default value: 1 (the labels appear above the markers)

Range: 0/1

}

Map Cosmetics

The following attributes let you configure map cosmetics like background color, background alpha etc.

chart : {

showCanvasBorder : Boolean [+]

Sets whether a border will be shown around the canvas

Default value: 0 (the canvas border is hidden)

Range: 0/1

canvasBorderColor : Color [+]

Sets the color for the canvas border, if the border is shown

Range: Hex Color Code

canvasBorderThickness : Number [+]

Sets the thickness for the canvas border, if the border is shown

Range: In Pixels

canvasBorderAlpha : Number [+]

Sets the transparency for the canvas border, if the border is shown

Range: 0-100

bgColor : Color [+]

Sets the background color for the map

To apply a gradient color background, specify a comma-separated list of the hex color codes to be used

bgAlpha : Number [+]

Sets the background transparency

To set the transparency for a gradient background, specify a comma-separated list of the transparency value for each color.

Range: 0-100

bgRatio : Number [+]

For a gradient backgrouns, sets the ratio of each color constituent.

Range: 0-100

bgAngle : Number [+]

For a gradient backgrouns, sets the angle of each color constituent.

Range: 0-360

bgImage : String [+]

Sets an image as the map background by taking the path and name of the image as the value

bgImageAlpha : Number [+]

Sets the transparency of the background image

Range: 0-100

bgImageDisplayMode : String [+]

Sets the display mode for the background image

Acceptable values include:

stretch: Image is expanded to fit the entire map area, without maintaining original constraints

tile: Image is repeated as a pattern on the entire map area

fit: Image is made to fit proportionately on the map area

fill: Image is made to proportionately fill the entire map area

center: Image is positioned at the center of the map area

none: None of the above modes are applied

Default value: none

Range: stretch, tile, fit, fill, center, none

bgImageVAlign : String [+]

Sets the vertical alignment of the background image

Range: top, middle, bottom

bgImageHAlign : String [+]

Sets the horizontal alignment of the background image

Range: left, middle, right

bgImageScale : Number [+]

Sets the magnifying scale for the background image

This attribute will only work when bgImageDisplayMode is set to none, center, or tile.

Range: 0-300

logoURL : String [+]

Sets the path to load external logo (image file) on the map

Range: URL

logoPosition : String [+]

Sets the logo position

Acceptable values include: TL (top-left), TR (top-right), BL (bottom-left), BR (bottom-right), CC (center of the screen)

Range: TL, TR, BL, BR, CC

logoAlpha : Number [+]

Sets the logo transparency

Range: 0-100

logoScale : Number [+]

Sets the magnifying scale for the logo

Range: 0-300

logoLink : String [+]

Links the logo to an external URL, specify the link in this attribute. The link can be in FusionCharts Link Format, allowing you to link to new windows, pop-ups, frames etc.

Range: URL

}

Map Entities Cosmetics

These attributes let you configure how your entities will appear on the map.

chart : {

showBorder : Boolean [+]

Sets whether the entity borders will be shown or hidden

Default value: 1 (the borders are shown)

Range: 0/1

borderColor : Color [+]

Sets the border color for map entities

Range: Hex Color Code

borderAlpha : Number [+]

Sets the border transparency for map entities

Range: 0-100

fillColor : Color [+]

Sets the default fill color for the entities, if no color range has been specified

Range: Hex Color Code

fillAlpha : Alpha [+]

Sets the transparency for the fill color of the entities

Range: 0-100

useHoverColor : Boolean [+]

Sets whether the entities will be rendered in a different color—specified using the hoverColor attribute—when the mouse pointer is hovered over them

Range: 0/1

hoverColor : Color [+]

Sets the color that will be applied to an entity when the mouse pointer is hovered over it

Range: Hex Color Code

nullEntityColor : Color [+]

Sets a default color for enities that are not assigned any value in the map data

Range: Hex Color Code

nullEntityAlpha : Number [+]

Sets a default transparency for enities that are not assigned any value in the map data

Range: 0-100

showEntityToolTip : Boolean [+]

Sets whether the tooltip for the entities will be shown or hidden

Default value: 1 (the tooltip is shown)

Range: 0/1

labelConnectorColor : Hex Color Code [+]

Specifies the color of the static label connector. This attribute is used when you want to explicitly define the color of the label connector. If not set, the label connector color is taken from connectorColor attribute.

labelConnectorAlpha : Number [+]

Specifies the transparency of the static label connector. This attribute is used when you want to explicitly define the transparency of the label connector. If not set, the label connector alpha is taken from connectorAlpha attribute.

Range: 0-100

}

Number Formatting

chart : {

formatNumber : Boolean [+]

Sets whether the numbers displayed on the map will be formatted using commas

For example, when formatNumber is set to 1, the number will be rendered as 40,000; when formatNumber is set to 0, it will be rendered as 40000.

Range: 0/1

decimals : Number [+]

Sets the number of decimal places to which all numbers on the map will be rounded to.

Range: 0-10

forceDecimals : Boolean [+]

Sets whether zero padding will be forced for decimal numbers

For example, if you limit the maximum number of digits after the decimal point to 2, a number like 55.344 will be rounded to 55.34. This does not mean that all numbers will be displayed with a fixed number of decimal places. For instance 55 will not be displayed as 55.00 and 55.1 will not become 55.10. To have fixed number of decimal places attached to all the numbers, set this attribute to 1.

Range: 0/1

numberPrefix : String [+]

Sets a prefix for the numbers on the map

For example, to represent all dollars figure on the map, set this attribute to $. The numbers will then be rendered as $40000, $50000.