Setting custom labels
Part of FusionMaps XT
js
Copy
const dataSource = {
chart: {
caption: "Asia Population - 2018",
subcaption: "Highlighting highest and lowest populations",
theme: "candy",
formatnumberscale: "1",
showlabels: "0",
entitytooltext: "Population of $lName is $datavalue",
showmarkerlabels: "1",
connectorthickness: "1",
entityfillhovercolor: "#E9F9F6"
},
colorrange: {
gradient: "1",
code: "#D5FFF6",
minvalue: "0",
maxvalue: "1500000000",
color: [
{
minvalue: "0",
maxvalue: "500000000",
code: "#82D8C9",
label: "Low"
},
{
minvalue: "500000000",
maxvalue: "1000000000",
code: "#5DC080",
label: "Medium"
},
{
minvalue: "1000000000",
maxvalue: "1500000000",
code: "#29B6A3",
label: "High"
}
]
},
data: [
{
id: "010",
value: "1415045928",
showlabel: "1",
displayvalue: "China : 1500M",
fontcolor: "#000000",
tooltext: "China has highest population of 1500M"
},
{
id: "014",
value: "1354051854"
},
{
id: "015",
value: "266794980"
},
{
id: "033",
value: "200813818"
},
{
id: "005",
value: "166368149"
},
{
id: "019",
value: "127185332"
},
{
id: "034",
value: "106512074"
},
{
id: "047",
value: "96491146",
showlabel: "0"
},
{
id: "016",
value: "82011735"
},
{
id: "052",
value: "81916871"
},
{
id: "042",
value: "69183173"
},
{
id: "008",
value: "53855735"
},
{
id: "023",
value: "51164435"
},
{
id: "054",
value: "39339753"
},
{
id: "001",
value: "36373176"
},
{
id: "055",
value: "33554343"
},
{
id: "046",
value: "32364996"
},
{
id: "028",
value: "32042458"
},
{
id: "031",
value: "29624035"
},
{
id: "056",
value: "28915284"
},
{
id: "022",
value: "25610672"
},
{
id: "049",
value: "23694089"
},
{
id: "039",
value: "20950041"
},
{
id: "053",
value: "18284407"
},
{
id: "021",
value: "18403860"
},
{
id: "009",
value: "16245729"
},
{
id: "003",
value: "9923914"
},
{
id: "062",
value: "9903802"
},
{
id: "058",
value: "9541615"
},
{
id: "041",
value: "9107211"
},
{
id: "063",
value: "8452841"
},
{
id: "050",
value: "7428887"
},
{
id: "026",
value: "6961210"
},
{
id: "064",
value: "6093509"
},
{
id: "025",
value: "6132932"
},
{
id: "044",
value: "5851466"
},
{
id: "038",
value: "5791901"
},
{
id: "057",
value: "4829946"
},
{
id: "061",
value: "4197128"
},
{
id: "013",
value: "3907131"
},
{
id: "030",
value: "3121772"
},
{
id: "002",
value: "2934152"
},
{
id: "059",
value: "2694849"
},
{
id: "060",
value: "1566993"
},
{
id: "006",
value: "817054"
},
{
id: "051",
value: "632418"
},
{
id: "007",
value: "434076",
fontcolor: "#00008B",
tooltext: "Brunei has lowest population of 434K"
},
{
id: "036",
value: "\t143964709"
}
],
markers: {
shapes: [
{
id: "myCustomShape",
type: "circle",
fillcolor: "#476b6b",
fillhovercolor: "#FFFF00",
showborder: "0"
}
],
items: [
{
shapeid: "myCustomShape",
id: "BR",
x: "519",
y: "530",
radius: "2",
fontcolor: "#FF0000",
tooltext: "Brunei has lowest population of 434K"
},
{
shapeid: "myCustomShape",
id: "BR-LABEL",
x: "650",
y: "470",
label: "Brunei : 434K",
labelpos: "RIGHT",
radius: "0",
tooltext: "Brunei has lowest population of 434K"
}
],
connectors: [
{
from: "BR",
to: "BR-LABEL",
tooltext: "Brunei has lowest population of 434K"
}
]
}
};
FusionCharts.ready(function() {
var myChart = new FusionCharts({
type: "maps/asia",
renderAt: "chart-container",
width: "100%",
height: "100%",
dataFormat: "json",
dataSource
}).render();
});
html
Copy
<div id="chart-container"></div>