Loading
Configuring Labels and Tool-tips
FusionCharts XT allows you to configure the functional properties of labels and tool-tips.
In this section, you will be shown how you can:
-
Configure labels
-
Configure tool-tips
Configuring Labels
In a heat map chart a dataplot can show multiple labels in different positions. For example, you can display labels at the center and the four corners of a dataplot.
A heat map chart with the labels for the data plots configured looks like this:
FusionCharts will load here..
Given below is a brief description of the attributes used to configure labels:
| Attribute name | Description |
|---|---|
|
It is used to display a numeric value at the center of the dataplot. All number formatting features will be applicable if this attribute is used. |
|
It is used to display any numeric or string value at the center of the data plot. This attribute overrides the |
|
It is used to display a label in the top-left corner of a data plot. |
|
It is used to display a label in the top-right corner of a data plot. |
|
It is used to display a label in the bottom-left corner of a data plot. |
|
It is used to display a label in the bottom-right corner of a data plot. |
The data structure needed to configure labels for a heat map chart is given below:
{
"chart": {
"theme": "fint",
"caption": "Top Smartphone Ratings",
"subcaption": "By Features",
"xAxisName": "Features",
"yAxisName": "Model",
"showplotborder": "1",
"xAxisLabelsOnTop": "1"
},
"rows": {
"row": [
{
"id": "SGS5",
"label": "Samsung Galaxy S5"
},
{
"id": "HTC1M8",
"label": "HTC One (M8)"
},
{
"id": "IPHONES5",
"label": "Apple iPhone 5S"
},
{
"id": "LUMIA",
"label": "Nokia Lumia 1520"
}
]
},
"columns": {
"column": [
{
"id": "processor",
"label": "Processor"
},
{
"id": "screen",
"label": "Screen Size"
},
{
"id": "price",
"label": "Price"
},
{
"id": "backup",
"label": "Battery Backup"
},
{
"id": "cam",
"label": "Camera"
}
]
},
"dataset": [
{
"data": [
{
"rowid": "SGS5",
"columnid": "processor",
"value": "8.7",
"tlLabel": "Quad Core 2.5 GHz"
},
{
"rowid": "SGS5",
"columnid": "screen",
"value": "8.5",
"blLabel": "5.1 inch",
"brLabel": "AMOLED screen"
},
{
"rowid": "SGS5",
"columnid": "price",
"value": "9.3",
"tlLabel": "$600"
},
{
"rowid": "SGS5",
"columnid": "backup",
"value": "9.7",
"brLabel": "Battery : 2800 MAH"
},
{
"rowid": "SGS5",
"columnid": "cam",
"value": "8",
"trLabel": "16 MP"
},
{
"rowid": "HTC1M8",
"columnid": "processor",
"value": "9.2",
"tlLabel": "Quad Core 2.3 GHz"
},
{
"rowid": "HTC1M8",
"columnid": "screen",
"value": "8.3",
"blLabel": "5 inch",
"brLabel": "LCD screen"
},
{
"rowid": "HTC1M8",
"columnid": "price",
"value": "7.3",
"tlLabel": "$600"
},
{
"rowid": "HTC1M8",
"columnid": "backup",
"value": "8.8",
"brLabel": "Battery : 2600 MAH"
},
{
"rowid": "HTC1M8",
"columnid": "cam",
"value": "8.7",
"trLabel": "4 MP"
},
{
"rowid": "IPHONES5",
"columnid": "processor",
"value": "9.1",
"tlLabel": "Dual Core"
},
{
"rowid": "IPHONES5",
"columnid": "screen",
"value": "8.6",
"blLabel": "4 inch",
"brLabel": "Retina LCD screen"
},
{
"rowid": "IPHONES5",
"columnid": "price",
"value": "7.2",
"tlLabel": "$649"
},
{
"rowid": "IPHONES5",
"columnid": "backup",
"value": "8.4",
"brLabel": "Battery : 1560 MAH"
},
{
"rowid": "IPHONES5",
"columnid": "cam",
"value": "9.5",
"trLabel": "8 MP"
},
{
"rowid": "LUMIA",
"columnid": "processor",
"value": "8.8",
"tlLabel": "Quad Core 2.2 GHz"
},
{
"rowid": "LUMIA",
"columnid": "screen",
"value": "9.1",
"blLabel": "6 inch",
"brLabel": "LCD screen"
},
{
"rowid": "LUMIA",
"columnid": "price",
"value": "9.7",
"tlLabel": "$470"
},
{
"rowid": "LUMIA",
"columnid": "backup",
"value": "9.2",
"brLabel": "Battery : 3400 MAH"
},
{
"rowid": "LUMIA",
"columnid": "cam",
"value": "8.1",
"trLabel": "20MP"
}
]
}
],
"colorrange": {
"gradient": "0",
"minValue": "0",
"code": "#e24b1a",
"startLabel": "Poor",
"endLabel": "Good",
"color": [
{
"code": "#e24b1a",
"minValue": "1",
"maxValue": "5",
"label": "Bad"
},
{
"code": "#f6bc33",
"minValue": "5",
"maxValue": "8.5",
"label": "Average"
},
{
"code": "#6da81e",
"minValue": "8.5",
"maxValue": "10",
"label": "Good"
}
]
}
}
{
"chart": {
"theme": "fint",
"caption": "Top Smartphone Ratings",
"subcaption": "By Features",
"xAxisName": "Features",
"yAxisName": "Model",
"showplotborder": "1",
"xAxisLabelsOnTop": "1"
},
"rows": {
"row": [
{
"id": "SGS5",
"label": "Samsung Galaxy S5"
},
{
"id": "HTC1M8",
"label": "HTC One (M8)"
},
{
"id": "IPHONES5",
"label": "Apple iPhone 5S"
},
{
"id": "LUMIA",
"label": "Nokia Lumia 1520"
}
]
},
"columns": {
"column": [
{
"id": "processor",
"label": "Processor"
},
{
"id": "screen",
"label": "Screen Size"
},
{
"id": "price",
"label": "Price"
},
{
"id": "backup",
"label": "Battery Backup"
},
{
"id": "cam",
"label": "Camera"
}
]
},
"dataset": [
{
"data": [
{
"rowid": "SGS5",
"columnid": "processor",
"value": "8.7",
"tlLabel": "Quad Core 2.5 GHz"
},
{
"rowid": "SGS5",
"columnid": "screen",
"value": "8.5",
"blLabel": "5.1 inch",
"brLabel": "AMOLED screen"
},
{
"rowid": "SGS5",
"columnid": "price",
"value": "9.3",
"tlLabel": "$600"
},
{
"rowid": "SGS5",
"columnid": "backup",
"value": "9.7",
"brLabel": "Battery : 2800 MAH"
},
{
"rowid": "SGS5",
"columnid": "cam",
"value": "8",
"trLabel": "16 MP"
},
{
"rowid": "HTC1M8",
"columnid": "processor",
"value": "9.2",
"tlLabel": "Quad Core 2.3 GHz"
},
{
"rowid": "HTC1M8",
"columnid": "screen",
"value": "8.3",
"blLabel": "5 inch",
"brLabel": "LCD screen"
},
{
"rowid": "HTC1M8",
"columnid": "price",
"value": "7.3",
"tlLabel": "$600"
},
{
"rowid": "HTC1M8",
"columnid": "backup",
"value": "8.8",
"brLabel": "Battery : 2600 MAH"
},
{
"rowid": "HTC1M8",
"columnid": "cam",
"value": "8.7",
"trLabel": "4 MP"
},
{
"rowid": "IPHONES5",
"columnid": "processor",
"value": "9.1",
"tlLabel": "Dual Core"
},
{
"rowid": "IPHONES5",
"columnid": "screen",
"value": "8.6",
"blLabel": "4 inch",
"brLabel": "Retina LCD screen"
},
{
"rowid": "IPHONES5",
"columnid": "price",
"value": "7.2",
"tlLabel": "$649"
},
{
"rowid": "IPHONES5",
"columnid": "backup",
"value": "8.4",
"brLabel": "Battery : 1560 MAH"
},
{
"rowid": "IPHONES5",
"columnid": "cam",
"value": "9.5",
"trLabel": "8 MP"
},
{
"rowid": "LUMIA",
"columnid": "processor",
"value": "8.8",
"tlLabel": "Quad Core 2.2 GHz"
},
{
"rowid": "LUMIA",
"columnid": "screen",
"value": "9.1",
"blLabel": "6 inch",
"brLabel": "LCD screen"
},
{
"rowid": "LUMIA",
"columnid": "price",
"value": "9.7",
"tlLabel": "$470"
},
{
"rowid": "LUMIA",
"columnid": "backup",
"value": "9.2",
"brLabel": "Battery : 3400 MAH"
},
{
"rowid": "LUMIA",
"columnid": "cam",
"value": "8.1",
"trLabel": "20MP"
}
]
}
],
"colorrange": {
"gradient": "0",
"minValue": "0",
"code": "#e24b1a",
"startLabel": "Poor",
"endLabel": "Good",
"color": [
{
"code": "#e24b1a",
"minValue": "1",
"maxValue": "5",
"label": "Bad"
},
{
"code": "#f6bc33",
"minValue": "5",
"maxValue": "8.5",
"label": "Average"
},
{
"code": "#6da81e",
"minValue": "8.5",
"maxValue": "10",
"label": "Good"
}
]
}
}Configuring Tool-tips
By default, a heat map chart configures the tool-tip by including the values assigned to the value, displayValue, trLabel, tlLabel, brLabel, blLabel , tlType, trType, blType, and brType attributes.
FusionCharts Suite XT allows you to customize the information displayed in the tool-tip.
A heat map chart rendered with customized tool-tip text looks like this:
FusionCharts will load here..
Given below is a brief description of the attribute used to customize a tool-tip:
| Attribute name | Description |
|---|---|
|
It is used to specify the custom text that will be displayed in the tool-tip. |
The data structure needed to customize the tool-tip text looks like this:
{
"chart": {
"caption": "Top Smartphone Ratings",
"subcaption": "By Features",
"xAxisName": "Features",
"yAxisName": "Model",
"showplotborder": "1",
"xAxisLabelsOnTop": "1",
"plottooltext": "<div id='nameDiv' style='font-size: 12px; border-bottom: 1px dashed #666666; font-weight:bold; padding-bottom: 3px; margin-bottom: 5px; display: inline-block; color: #888888;' >$rowLabel :</div>{br}Rating : <b>$dataValue</b>{br}$columnLabel : <b>$tlLabel</b>{br}<b>$trLabel</b>",
"baseFontColor": "#333333",
"baseFont": "Helvetica Neue,Arial",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"subcaptionFontBold": "0",
"showBorder": "0",
"bgColor": "#ffffff",
"showShadow": "0",
"usePlotGradientColor": "0",
"canvasBgColor": "#ffffff",
"canvasBorderAlpha": "0",
"legendBgAlpha": "0",
"legendBorderAlpha": "0",
"legendShadow": "0",
"legendItemFontSize": "10",
"legendItemFontColor": "#666666",
"toolTipColor": "#ffffff",
"toolTipBorderThickness": "0",
"toolTipBgColor": "#000000",
"toolTipBgAlpha": "80",
"toolTipBorderRadius": "2",
"toolTipPadding": "5"
},
"rows": {
"row": [
{
"id": "SGS5",
"label": "Samsung Galaxy S5"
},
{
"id": "HTC1M8",
"label": "HTC One (M8)"
},
{
"id": "IPHONES5",
"label": "Apple iPhone 5S"
},
{
"id": "LUMIA",
"label": "Nokia Lumia 1520"
}
]
},
"columns": {
"column": [
{
"id": "processor",
"label": "Processor"
},
{
"id": "screen",
"label": "Screen Size"
},
{
"id": "price",
"label": "Price"
},
{
"id": "backup",
"label": "Battery Backup"
},
{
"id": "cam",
"label": "Camera"
}
]
},
"dataset": [
{
"data": [
{
"rowid": "SGS5",
"columnid": "processor",
"value": "8.7",
"tllabel": "Quad Core 2.5 GHz",
"trlabel": "OS : Android 4.4 Kitkat"
},
{
"rowid": "SGS5",
"columnid": "screen",
"value": "8.5",
"tllabel": "5.1 inch",
"trlabel": "AMOLED screen"
},
{
"rowid": "SGS5",
"columnid": "price",
"value": "9.3",
"tllabel": "$600"
},
{
"rowid": "SGS5",
"columnid": "backup",
"value": "9.7",
"tllabel": "29 Hrs",
"trlabel": "Battery : 2800 MAH"
},
{
"rowid": "SGS5",
"columnid": "cam",
"value": "8",
"tllabel": "16 MP",
"trlabel": "Front Camera : 2.1 MP"
},
{
"rowid": "HTC1M8",
"columnid": "processor",
"value": "9.2",
"tllabel": "Quad Core 2.3 GHz",
"trlabel": "OS : Android 4.4 Kitkat"
},
{
"rowid": "HTC1M8",
"columnid": "screen",
"value": "8.3",
"tllabel": "5 inch",
"trlabel": "LCD screen"
},
{
"rowid": "HTC1M8",
"columnid": "price",
"value": "7.3",
"tllabel": "$600"
},
{
"rowid": "HTC1M8",
"columnid": "backup",
"value": "8.8",
"tllabel": "20 Hrs",
"trlabel": "Battery : 2600 MAH"
},
{
"rowid": "HTC1M8",
"columnid": "cam",
"value": "8.7",
"tllabel": "4 MP",
"trlabel": "Front Camera : 5 MP"
},
{
"rowid": "IPHONES5",
"columnid": "processor",
"value": "9.1",
"tllabel": "Dual Core",
"trlabel": "OS : iOS 7"
},
{
"rowid": "IPHONES5",
"columnid": "screen",
"value": "8.6",
"tllabel": "4 inch",
"trlabel": "Retina LCD screen"
},
{
"rowid": "IPHONES5",
"columnid": "price",
"value": "7.2",
"tllabel": "$649"
},
{
"rowid": "IPHONES5",
"columnid": "backup",
"value": "8.4",
"tllabel": "10 Hrs",
"trlabel": "Battery : 1560 MAH"
},
{
"rowid": "IPHONES5",
"columnid": "cam",
"value": "9.5",
"tllabel": "8 MP",
"trlabel": "Front Camera : 1.2 MP"
},
{
"rowid": "LUMIA",
"columnid": "processor",
"value": "8.8",
"tllabel": "Quad Core 2.2 GHz",
"trlabel": "OS: Windows Phone 8"
},
{
"rowid": "LUMIA",
"columnid": "screen",
"value": "9.1",
"tllabel": "6 inch",
"trlabel": "LCD screen"
},
{
"rowid": "LUMIA",
"columnid": "price",
"value": "9.7",
"tllabel": "$470"
},
{
"rowid": "LUMIA",
"columnid": "backup",
"value": "9.2",
"tllabel": "27 Hrs",
"trlabel": "Battery : 3400 MAH"
},
{
"rowid": "LUMIA",
"columnid": "cam",
"value": "8.1",
"tllabel": "20MP",
"trlabel": "Front Camera : 1.2 MP"
}
]
}
],
"colorrange": {
"gradient": "0",
"minvalue": "0",
"code": "E24B1A",
"startlabel": "Poor",
"endlabel": "Good",
"color": [
{
"code": "E24B1A",
"minvalue": "1",
"maxvalue": "5",
"label": "Bad"
},
{
"code": "F6BC33",
"minvalue": "5",
"maxvalue": "8.5",
"label": "Average"
},
{
"code": "6DA81E",
"minvalue": "8.5",
"maxvalue": "10",
"label": "Good"
}
]
}
}
{
"chart": {
"caption": "Top Smartphone Ratings",
"subcaption": "By Features",
"xAxisName": "Features",
"yAxisName": "Model",
"showplotborder": "1",
"xAxisLabelsOnTop": "1",
"plottooltext": "<div id='nameDiv' style='font-size: 12px; border-bottom: 1px dashed #666666; font-weight:bold; padding-bottom: 3px; margin-bottom: 5px; display: inline-block; color: #888888;' >$rowLabel :</div>{br}Rating : <b>$dataValue</b>{br}$columnLabel : <b>$tlLabel</b>{br}<b>$trLabel</b>",
"baseFontColor": "#333333",
"baseFont": "Helvetica Neue,Arial",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"subcaptionFontBold": "0",
"showBorder": "0",
"bgColor": "#ffffff",
"showShadow": "0",
"usePlotGradientColor": "0",
"canvasBgColor": "#ffffff",
"canvasBorderAlpha": "0",
"legendBgAlpha": "0",
"legendBorderAlpha": "0",
"legendShadow": "0",
"legendItemFontSize": "10",
"legendItemFontColor": "#666666",
"toolTipColor": "#ffffff",
"toolTipBorderThickness": "0",
"toolTipBgColor": "#000000",
"toolTipBgAlpha": "80",
"toolTipBorderRadius": "2",
"toolTipPadding": "5"
},
"rows": {
"row": [
{
"id": "SGS5",
"label": "Samsung Galaxy S5"
},
{
"id": "HTC1M8",
"label": "HTC One (M8)"
},
{
"id": "IPHONES5",
"label": "Apple iPhone 5S"
},
{
"id": "LUMIA",
"label": "Nokia Lumia 1520"
}
]
},
"columns": {
"column": [
{
"id": "processor",
"label": "Processor"
},
{
"id": "screen",
"label": "Screen Size"
},
{
"id": "price",
"label": "Price"
},
{
"id": "backup",
"label": "Battery Backup"
},
{
"id": "cam",
"label": "Camera"
}
]
},
"dataset": [
{
"data": [
{
"rowid": "SGS5",
"columnid": "processor",
"value": "8.7",
"tllabel": "Quad Core 2.5 GHz",
"trlabel": "OS : Android 4.4 Kitkat"
},
{
"rowid": "SGS5",
"columnid": "screen",
"value": "8.5",
"tllabel": "5.1 inch",
"trlabel": "AMOLED screen"
},
{
"rowid": "SGS5",
"columnid": "price",
"value": "9.3",
"tllabel": "$600"
},
{
"rowid": "SGS5",
"columnid": "backup",
"value": "9.7",
"tllabel": "29 Hrs",
"trlabel": "Battery : 2800 MAH"
},
{
"rowid": "SGS5",
"columnid": "cam",
"value": "8",
"tllabel": "16 MP",
"trlabel": "Front Camera : 2.1 MP"
},
{
"rowid": "HTC1M8",
"columnid": "processor",
"value": "9.2",
"tllabel": "Quad Core 2.3 GHz",
"trlabel": "OS : Android 4.4 Kitkat"
},
{
"rowid": "HTC1M8",
"columnid": "screen",
"value": "8.3",
"tllabel": "5 inch",
"trlabel": "LCD screen"
},
{
"rowid": "HTC1M8",
"columnid": "price",
"value": "7.3",
"tllabel": "$600"
},
{
"rowid": "HTC1M8",
"columnid": "backup",
"value": "8.8",
"tllabel": "20 Hrs",
"trlabel": "Battery : 2600 MAH"
},
{
"rowid": "HTC1M8",
"columnid": "cam",
"value": "8.7",
"tllabel": "4 MP",
"trlabel": "Front Camera : 5 MP"
},
{
"rowid": "IPHONES5",
"columnid": "processor",
"value": "9.1",
"tllabel": "Dual Core",
"trlabel": "OS : iOS 7"
},
{
"rowid": "IPHONES5",
"columnid": "screen",
"value": "8.6",
"tllabel": "4 inch",
"trlabel": "Retina LCD screen"
},
{
"rowid": "IPHONES5",
"columnid": "price",
"value": "7.2",
"tllabel": "$649"
},
{
"rowid": "IPHONES5",
"columnid": "backup",
"value": "8.4",
"tllabel": "10 Hrs",
"trlabel": "Battery : 1560 MAH"
},
{
"rowid": "IPHONES5",
"columnid": "cam",
"value": "9.5",
"tllabel": "8 MP",
"trlabel": "Front Camera : 1.2 MP"
},
{
"rowid": "LUMIA",
"columnid": "processor",
"value": "8.8",
"tllabel": "Quad Core 2.2 GHz",
"trlabel": "OS: Windows Phone 8"
},
{
"rowid": "LUMIA",
"columnid": "screen",
"value": "9.1",
"tllabel": "6 inch",
"trlabel": "LCD screen"
},
{
"rowid": "LUMIA",
"columnid": "price",
"value": "9.7",
"tllabel": "$470"
},
{
"rowid": "LUMIA",
"columnid": "backup",
"value": "9.2",
"tllabel": "27 Hrs",
"trlabel": "Battery : 3400 MAH"
},
{
"rowid": "LUMIA",
"columnid": "cam",
"value": "8.1",
"tllabel": "20MP",
"trlabel": "Front Camera : 1.2 MP"
}
]
}
],
"colorrange": {
"gradient": "0",
"minvalue": "0",
"code": "E24B1A",
"startlabel": "Poor",
"endlabel": "Good",
"color": [
{
"code": "E24B1A",
"minvalue": "1",
"maxvalue": "5",
"label": "Bad"
},
{
"code": "F6BC33",
"minvalue": "5",
"maxvalue": "8.5",
"label": "Average"
},
{
"code": "6DA81E",
"minvalue": "8.5",
"maxvalue": "10",
"label": "Good"
}
]
}
}There! You have now seen how you can configure labels and tool-tips for heat map charts.