Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

FusionCharts XT allows you to configure the functional properties of labels and tool-tips.

In this section, you will be shown how you can:

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..
{ "chart": { "theme": "fint", "caption": "Top Smartphone Ratings", "subcaption": "By Features", "xAxisName": "Features", "yAxisName": "Model", "showplotborder": "1", "xAxisLabelsOnTop": "1", "plottooltext": "
$rowLabel
Customer Ratings for $columnLabel : $datavalue
" }, "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",
        "plottooltext": "<div><b>$rowLabel</b><br/>Customer Ratings for $columnLabel : <b>$datavalue</b></div>"
    },
    "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"
            }
        ]
    }
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'heatmap',
    renderAt: 'chart-container',
    width: '800',
    height: '400',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "Top Smartphone Ratings",
            "subcaption": "By Features",
            "xAxisName": "Features",
            "yAxisName": "Model",
            "showplotborder": "1",
            "xAxisLabelsOnTop": "1",
            "plottooltext": "<div><b>$rowLabel</b><br/>Customer Ratings for $columnLabel : <b>$datavalue</b></div>"
        },
        "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",
                //Displaying a label on the bottom left corner of a dataplot
                "blLabel": "5.1 inch",
                //Displaying a label on the bottom right corner of a dataplot
                "brLabel": "AMOLED screen"
            }, {
                "rowid": "SGS5",
                "columnid": "price",
                "value": "9.3",
                //Displaying a label on the top left corner of a dataplot
                "tlLabel": "$600"
            }, {
                "rowid": "SGS5",
                "columnid": "backup",
                "value": "9.7",
                "brLabel": "Battery : 2800 MAH"
            }, {
                "rowid": "SGS5",
                "columnid": "cam",
                "value": "8",
                //Displaying a label on the top right corner of a dataplot
                "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"
            }]
        }
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below is a brief description of the attributes used to configure labels:

Attribute name Description

value

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.

displayValue

It is used to display any numeric or string value at the center of the data plot. This attribute overrides the value attribute, if both are used in the code. Number formatting features are not applicable on the value of this attribute.

tlLabel

It is used to display a label in the top-left corner of a data plot.

trLabel

It is used to display a label in the top-right corner of a data plot.

blLabel

It is used to display a label in the bottom-left corner of a data plot.

brLabel

It is used to display a label in the bottom-right corner of a data plot.

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..
{ "chart": { "caption": "Top Smartphone Ratings", "subcaption": "By Features", "xAxisName": "Features", "yAxisName": "Model", "showplotborder": "1", "xAxisLabelsOnTop": "1", "plottooltext": "
$rowLabel :
{br}Rating : $dataValue{br}$columnLabel : $tlLabel{br}$trLabel", "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"
            }
        ]
    }
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'heatmap',
    renderAt: 'chart-container',
    width: '550',
    height: '270',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Top Smartphone Ratings",
            "subcaption": "By Features",
            "xAxisName": "Features",
            "yAxisName": "Model",
            "showplotborder": "1",
            "xAxisLabelsOnTop": "1",
            //Configuring the tooltip using macros
            "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>",

            //Cosmetics
            "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"
            }]
        }
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below is a brief description of the attribute used to customize a tool-tip:

Attribute name Description

plotToolText

It is used to specify the custom text that will be displayed in the tool-tip.

Top