Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Data values are plot values i.e. values of each data plot (line, column, bar, pie) displayed on the chart.

FusionCharts data values

This section talks about:

Configuring text labels instead of numeric data values

Instead of displaying numeric data values, you can use text labels to denote data values for each data item.

A column 2D chart with custom text instead of numeric data values looks as below:

FusionCharts will load here..
{ "chart": { "theme": "fint", "caption": "Quarterly Revenue", "subcaption": "Last year", "xAxisName": "Quarter", "yAxisName": "Amount (In USD)", "numberPrefix": "$" }, "data": [ { "label": "Q1", "value": "1950000" }, { "label": "Q2", "value": "1450000" }, { "label": "Q3", "value": "1730000" }, { "label": "Q4", "value": "2120000", "displayValue": "Year's best" } ] }
{
    "chart": {
        "theme": "fint",
        "caption": "Quarterly Revenue",
        "subcaption": "Last year",
        "xAxisName": "Quarter",
        "yAxisName": "Amount (In USD)",
        "numberPrefix": "$"
    },
    "data": [
        {
            "label": "Q1",
            "value": "1950000"
        },
        {
            "label": "Q2",
            "value": "1450000"
        },
        {
            "label": "Q3",
            "value": "1730000"
        },
        {
            "label": "Q4",
            "value": "2120000",
            "displayValue": "Year's best"
        }
    ]
}
<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: 'column2d',
    renderAt: 'chart-container',
    id: 'myChart',
    width: '450',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "Quarterly Revenue",
            "subcaption": "Last year",
            "xAxisName": "Quarter",
            "yAxisName": "Amount (In USD)",
            "numberPrefix": "$"
        },
        "data": [{
            "label": "Q1",
            "value": "1950000"
        }, {
            "label": "Q2",
            "value": "1450000"
        }, {
            "label": "Q3",
            "value": "1730000"
        }, {
            "label": "Q4",
            "value": "2120000",
            //Custom display string
            "displayValue": "Year's best"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below is the attribute used to configure text as the data value:

Name

Description

displayValue

Used to display a custom text instead of the numerical value of data.

Configuring rotation of data values

You can display data values in the following modes:

  • Normal mode

  • Rotated mode

Normal Mode

In the normal mode, you can display data values horizontally as shown below:

FusionCharts will load here..
{ "chart": { "theme": "fint", "caption": "Quarterly Revenue", "subcaption": "Last year", "xAxisName": "Quarter", "yAxisName": "Amount (In USD)", "numberPrefix": "$", "rotateValues": "0" }, "data": [ { "label": "Q1", "value": "1950000" }, { "label": "Q2", "value": "1450000" }, { "label": "Q3", "value": "1730000" }, { "label": "Q4", "value": "2120000" } ] }
{
    "chart": {
        "theme": "fint",
        "caption": "Quarterly Revenue",
        "subcaption": "Last year",
        "xAxisName": "Quarter",
        "yAxisName": "Amount (In USD)",
        "numberPrefix": "$",
        "rotateValues": "0"
    },
    "data": [
        {
            "label": "Q1",
            "value": "1950000"
        },
        {
            "label": "Q2",
            "value": "1450000"
        },
        {
            "label": "Q3",
            "value": "1730000"
        },
        {
            "label": "Q4",
            "value": "2120000"
        }
    ]
}
<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: 'column2d',
    renderAt: 'chart-container',
    id: 'myChart',
    width: '450',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "Quarterly Revenue",
            "subcaption": "Last year",
            "xAxisName": "Quarter",
            "yAxisName": "Amount (In USD)",
            "numberPrefix": "$",
            "rotateValues": "0",
        },
        "data": [{
            "label": "Q1",
            "value": "1950000"
        }, {
            "label": "Q2",
            "value": "1450000"
        }, {
            "label": "Q3",
            "value": "1730000"
        }, {
            "label": "Q4",
            "value": "2120000"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Rotated Mode

In the rotated mode, you can rotate data values in a chart as shown below

FusionCharts will load here..
{ "chart": { "theme": "fint", "caption": "Quarterly Revenue", "subcaption": "Last year", "xAxisName": "Quarter", "yAxisName": "Amount (In USD)", "numberPrefix": "$", "rotateValues": "1" }, "data": [ { "label": "Q1", "value": "1950000" }, { "label": "Q2", "value": "1450000" }, { "label": "Q3", "value": "1730000" }, { "label": "Q4", "value": "2120000" } ] }
{
    "chart": {
        "theme": "fint",
        "caption": "Quarterly Revenue",
        "subcaption": "Last year",
        "xAxisName": "Quarter",
        "yAxisName": "Amount (In USD)",
        "numberPrefix": "$",
        "rotateValues": "1"
    },
    "data": [
        {
            "label": "Q1",
            "value": "1950000"
        },
        {
            "label": "Q2",
            "value": "1450000"
        },
        {
            "label": "Q3",
            "value": "1730000"
        },
        {
            "label": "Q4",
            "value": "2120000"
        }
    ]
}
<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: 'column2d',
    renderAt: 'chart-container',
    id: 'myChart',
    width: '450',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "Quarterly Revenue",
            "subcaption": "Last year",
            "xAxisName": "Quarter",
            "yAxisName": "Amount (In USD)",
            "numberPrefix": "$",
            //Used to display rotated values 
            "rotateValues": "1"
        },
        "data": [{
            "label": "Q1",
            "value": "1950000"
        }, {
            "label": "Q2",
            "value": "1450000"
        }, {
            "label": "Q3",
            "value": "1730000"
        }, {
            "label": "Q4",
            "value": "2120000"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below is the attribute used to rotate data values in the chart:

Name Description

rotateValues

Set to 1 to rotate data values and 0 to keep them horizontal.

Configuring placement of data values inside columns

You can place data values inside a chart and you can also rotate it for better clarity.

A column 2D chart with data values placed inside columns looks as shown below:

FusionCharts will load here..
{ "chart": { "caption": "Quarterly Revenue", "subcaption": "Last year", "xAxisName": "Quarter", "yAxisName": "Amount (In USD)", "numberPrefix": "$", "placevaluesInside": "1", "theme": "fint" }, "data": [ { "label": "Q1", "value": "1950000" }, { "label": "Q2", "value": "1450000" }, { "label": "Q3", "value": "1730000" }, { "label": "Q4", "value": "2120000" } ] }
{
    "chart": {
        "caption": "Quarterly Revenue",
        "subcaption": "Last year",
        "xAxisName": "Quarter",
        "yAxisName": "Amount (In USD)",
        "numberPrefix": "$",
        "placevaluesInside": "1",
        "theme": "fint"
    },
    "data": [
        {
            "label": "Q1",
            "value": "1950000"
        },
        {
            "label": "Q2",
            "value": "1450000"
        },
        {
            "label": "Q3",
            "value": "1730000"
        },
        {
            "label": "Q4",
            "value": "2120000"
        }
    ]
}
<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: 'column2d',
    renderAt: 'chart-container',
    id: 'myChart',
    width: '450',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Quarterly Revenue",
            "subcaption": "Last year",
            "xAxisName": "Quarter",
            "yAxisName": "Amount (In USD)",
            "numberPrefix": "$",
            //Place the value inside the plots
            "placevaluesInside": "1",
            //Theme
            "theme": "fint"
        },
        "data": [{
            "label": "Q1",
            "value": "1950000"
        }, {
            "label": "Q2",
            "value": "1450000"
        }, {
            "label": "Q3",
            "value": "1730000"
        }, {
            "label": "Q4",
            "value": "2120000"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below is the attribute used to place data values inside columns:

Name Description

placevaluesInside

Set this to 1 to show data values inside the column or to 0 to show values outside. By default, the chart tries to show the values outside the column.

Configuring display of data values

You can display specific data values as described in this sub-section.

A column 2D chart with specific data values placed inside columns looks as below:

FusionCharts will load here..
{ "chart": { "caption": "Quarterly Revenue", "subcaption": "Last year", "xAxisName": "Quarter", "yAxisName": "Amount (In USD)", "numberPrefix": "$", "numDivLines": "2", "theme": "fint", "showValues": "0" }, "data": [ { "label": "Q1", "value": "1950000", "showValue": "1" }, { "label": "Q2", "value": "1450000" }, { "label": "Q3", "value": "1730000" }, { "label": "Q4", "value": "2120000", "showValue": "1" } ], "trendlines": [ { "line": [ { "startvalue": "1750000", "color": "#1aaf5d", "displayvalue": "Target - $175K", "valueOnRight": "1" } ] } ] }
{
    "chart": {
        "caption": "Quarterly Revenue",
        "subcaption": "Last year",
        "xAxisName": "Quarter",
        "yAxisName": "Amount (In USD)",
        "numberPrefix": "$",
        "numDivLines": "2",
        "theme": "fint",
        "showValues": "0"
    },
    "data": [
        {
            "label": "Q1",
            "value": "1950000",
            "showValue": "1"
        },
        {
            "label": "Q2",
            "value": "1450000"
        },
        {
            "label": "Q3",
            "value": "1730000"
        },
        {
            "label": "Q4",
            "value": "2120000",
            "showValue": "1"
        }
    ],
    "trendlines": [
        {
            "line": [
                {
                    "startvalue": "1750000",
                    "color": "#1aaf5d",
                    "displayvalue": "Target - $175K",
                    "valueOnRight": "1"
                }
            ]
        }
    ]
}
<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: 'column2d',
    renderAt: 'chart-container',
    id: 'myChart',
    width: '450',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Quarterly Revenue",
            "subcaption": "Last year",
            "xAxisName": "Quarter",
            "yAxisName": "Amount (In USD)",
            "numberPrefix": "$",
            "numDivLines": "2",
            "theme": "fint",
            //Hiding all data values to show value of a specific data plot
            "showValues": "0"
        },
        "data": [{
            "label": "Q1",
            "value": "1950000",
            //Showing the data value for this data plot only
            "showValue": "1"
        }, {
            "label": "Q2",
            "value": "1450000"
        }, {
            "label": "Q3",
            "value": "1730000"
        }, {
            "label": "Q4",
            "value": "2120000",
            //Showing the data value for this data plot only
            "showValue": "1"
        }],
        "trendlines": [{
            "line": [{
                "startvalue": "1750000",
                "color": "#1aaf5d",
                "displayvalue": "Target - $175K",
                "valueOnRight": "1"
            }]
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below is the attribute used to display only specific data values:

Name

Description

showValues

Set it to 1 to show all data values in a chart and to 0 to hide it.

showValue

Set it to 1 to show a particular data value and to 0 to hide it. This setting overrides the showValues setting at the chart object level.

Skipping y-axis values

If there are a large number of values to be displayed along the y-axis, FusionCharts Suite XT allows you to display only every nth y-axis value.

A column 2D chart with y-axis values skipped to render only alternate values looks as below:

FusionCharts will load here..
{ "chart": { "caption": "Quarterly Revenue", "subcaption": "Last year", "xAxisName": "Quarter", "yAxisName": "Amount (In USD)", "numberPrefix": "$", "yAxisValuesStep": "2", "theme": "fint" }, "data": [ { "label": "Q1", "value": "1950000" }, { "label": "Q2", "value": "1450000" }, { "label": "Q3", "value": "1730000" }, { "label": "Q4", "value": "2120000" } ] }
{
    "chart": {
        "caption": "Quarterly Revenue",
        "subcaption": "Last year",
        "xAxisName": "Quarter",
        "yAxisName": "Amount (In USD)",
        "numberPrefix": "$",
        "yAxisValuesStep": "2",
        "theme": "fint"
    },
    "data": [
        {
            "label": "Q1",
            "value": "1950000"
        },
        {
            "label": "Q2",
            "value": "1450000"
        },
        {
            "label": "Q3",
            "value": "1730000"
        },
        {
            "label": "Q4",
            "value": "2120000"
        }
    ]
}
<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: 'column2d',
    renderAt: 'chart-container',
    id: 'myChart',
    width: '450',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Quarterly Revenue",
            "subcaption": "Last year",
            "xAxisName": "Quarter",
            "yAxisName": "Amount (In USD)",
            "numberPrefix": "$",
            //Y axis value step
            "yAxisValuesStep": "2",
            //Theme
            "theme": "fint"
        },
        "data": [{
            "label": "Q1",
            "value": "1950000"
        }, {
            "label": "Q2",
            "value": "1450000"
        }, {
            "label": "Q3",
            "value": "1730000"
        }, {
            "label": "Q4",
            "value": "2120000"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below is the attribute used to skip y-axis values:

Attribute

Description

yAxisValuesStep

Setting this variable to n will show the first value (from bottom) and every n-th value after that. e.g., a chart showing data for 12 months and set with yAxisValuesStep: 3 will show labels for January, April, July and October. The rest of the values will be skipped.

This attribute can also assume default values based on the space available in the chart to render y-axis values, and can override the values provided to avoid overlapping of y-axis values.

Customizing data value properties

You can customize the data value properties in terms of font, border, background, and alpha. Let us understand each of them in detail.

Font Properties

A column 2D chart with a blue color font and other customizations applied, looks as below:

FusionCharts will load here..
{ "chart": { "caption": "Quarterly Revenue", "subcaption": "Last year", "xAxisName": "Quarter", "yAxisName": "Amount (In USD)", "yaxismaxvalue": "2720000", "numberPrefix": "$", "theme": "fint", "placeValuesInside": "0", "rotateValues": "0", "valueFont": "Arial", "valueFontColor": "#6699cc", "valueFontSize": "12", "valueFontBold": "1", "valueFontItalic": "0" }, "data": [ { "label": "Q1", "value": "1950000" }, { "label": "Q2", "value": "1450000" }, { "label": "Q3", "value": "1730000" }, { "label": "Q4", "value": "2120000" } ] }
{
    "chart": {
        "caption": "Quarterly Revenue",
        "subcaption": "Last year",
        "xAxisName": "Quarter",
        "yAxisName": "Amount (In USD)",
        "yaxismaxvalue": "2720000",
        "numberPrefix": "$",
        "theme": "fint",
        "placeValuesInside": "0",
        "rotateValues": "0",
        "valueFont": "Arial",
        "valueFontColor": "#6699cc",
        "valueFontSize": "12",
        "valueFontBold": "1",
        "valueFontItalic": "0"
    },
    "data": [
        {
            "label": "Q1",
            "value": "1950000"
        },
        {
            "label": "Q2",
            "value": "1450000"
        },
        {
            "label": "Q3",
            "value": "1730000"
        },
        {
            "label": "Q4",
            "value": "2120000"
        }
    ]
}
<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: 'column2d',
    renderAt: 'chart-container',
    id: 'myChart',
    width: '450',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Quarterly Revenue",
            "subcaption": "Last year",
            "xAxisName": "Quarter",
            "yAxisName": "Amount (In USD)",
            "yaxismaxvalue": "2720000",
            "numberPrefix": "$",
            "theme": "fint",
            "placeValuesInside": "0",
            "rotateValues": "0",
            //Changing font
            "valueFont": "Arial",
            //Changing font color
            "valueFontColor": "#6699cc",
            //Changing font size
            "valueFontSize": "12",
            //Changing font weight
            "valueFontBold": "1",
            //Changing font style
            "valueFontItalic": "0"
        },
        "data": [{
            "label": "Q1",
            "value": "1950000"
        }, {
            "label": "Q2",
            "value": "1450000"
        }, {
            "label": "Q3",
            "value": "1730000"
        }, {
            "label": "Q4",
            "value": "2120000"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below is the list of attributes used to customize the font for data values:

Name

Description

valueFont

Sets the font family for data-values, e.g. Arial

valueFontColor

Sets the font color for data-values in hex code, eg. #00ffaa

valueFontSize

Specifies the data-value font size, with a range of 0 to 72.

valueFontBold

1 (default) sets font to bold and 0 sets it to normal.

valueFontItalic

1 italicizes the font and 0 (default) sets it to normal.

valueAlpha, valueFontAlpha

Sets the transparency for text, background and border of the data values. Value ranges from 0(transparent) to 100(opaque).

Customizing data value border

A Pie 2D chart with a dashed border around the data values looks as below:

FusionCharts will load here..
{ "chart": { "theme": "fint", "caption": "Age group of website customers", "subCaption": "Last year", "numberPrefix": "$", "valueBorderColor": "#666666", "valueBorderAlpha": "100", "valueBorderPadding": "5", "valueBorderRadius": "6", "valueBorderThickness": "0.5", "valueBorderDashed": "1", "valueBorderDashLen": "4", "valueBorderDashGap": "2", "valueFontSize": "11" }, "data": [ { "label": "Teenage", "value": "1250400" }, { "label": "Adult", "value": "1463300" }, { "label": "Middle-age", "value": "1050700" }, { "label": "Senior Citizen", "value": "491000" } ] }
{
    "chart": {
        "theme": "fint",
        "caption": "Age group of website customers",
        "subCaption": "Last year",
        "numberPrefix": "$",
        "valueBorderColor": "#666666",
        "valueBorderAlpha": "100",
        "valueBorderPadding": "5",
        "valueBorderRadius": "6",
        "valueBorderThickness": "0.5",
        "valueBorderDashed": "1",
        "valueBorderDashLen": "4",
        "valueBorderDashGap": "2",
        "valueFontSize": "11"
    },
    "data": [
        {
            "label": "Teenage",
            "value": "1250400"
        },
        {
            "label": "Adult",
            "value": "1463300"
        },
        {
            "label": "Middle-age",
            "value": "1050700"
        },
        {
            "label": "Senior Citizen",
            "value": "491000"
        }
    ]
}
<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: 'pie2d',
    renderAt: 'chart-container',
    id: 'myChart',
    width: '450',
    height: '350',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "Age group of website customers",
            "subCaption": "Last year",
            "numberPrefix": "$",
            //Changing border color for values
            "valueBorderColor": "#666666",
            //Changing border alpha
            "valueBorderAlpha": "100",
            //Changing border padding
            "valueBorderPadding": "5",
            //Changing border radius to enable rounded borders
            "valueBorderRadius": "6",
            //Changing border thickness
            "valueBorderThickness": "0.5",
            //Setting border style to dashed
            "valueBorderDashed": "1",
            //Setting border dash length
            "valueBorderDashLen": "4",
            //Setting gap between dash
            "valueBorderDashGap": "2",
            "valueFontSize": "11"

        },
        "data": [{
            "label": "Teenage",
            "value": "1250400"
        }, {
            "label": "Adult",
            "value": "1463300"
        }, {
            "label": "Middle-age",
            "value": "1050700"
        }, {
            "label": "Senior Citizen",
            "value": "491000"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below is the list of attributes used to customize the border for data values:

Name

Description

valueBorderColor

Sets the color of border around data value in hex code, eg. #00ffaa

valueBorderAlpha

Sets the transparency of border of the data values. Value ranges from 0(transparent) to 100(opaque).

valueBorderThickness

Sets data-value border thickness(in pixels).

valueBorderRadius

Sets data-value border radius(in pixels).

valueBorderDashed

1 makes data-value border dashed and 0 sets it to normal (default).

valueBorderDashGap

Sets the gap between two consecutive dashes of data-value border (in pixels).

valueBorderDashLen

Sets the length of each dash in data-value border (in pixels).

valueBorderHoverAlpha

Sets the value border alpha on hover

Customizing data value background

A Pie 2D chart with background properties for data values applied looks as below:

FusionCharts will load here..
{ "chart": { "caption": "Age group of website customers", "subCaption": "Last year", "valueBgColor": "#99ccff", "valueBgAlpha": "30", "valueBgHoverAlpha": "60", "valueFontSize": "13", "theme": "fint" }, "data": [ { "label": "Teenage", "value": "1250400" }, { "label": "Adult", "value": "1463300" }, { "label": "Middle-age", "value": "1050700" }, { "label": "Senior Citizen", "value": "491000" } ] }
{
    "chart": {
        "caption": "Age group of website customers",
        "subCaption": "Last year",
        "valueBgColor": "#99ccff",
        "valueBgAlpha": "30",
        "valueBgHoverAlpha": "60",
        "valueFontSize": "13",
        "theme": "fint"
    },
    "data": [
        {
            "label": "Teenage",
            "value": "1250400"
        },
        {
            "label": "Adult",
            "value": "1463300"
        },
        {
            "label": "Middle-age",
            "value": "1050700"
        },
        {
            "label": "Senior Citizen",
            "value": "491000"
        }
    ]
}
<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: 'pie2d',
    renderAt: 'chart-container',
    id: 'myChart',
    width: '450',
    height: '350',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Age group of website customers",
            "subCaption": "Last year",
            //Data value background properties 
            "valueBgColor": "#99ccff",
            "valueBgAlpha": "30",
            "valueBgHoverAlpha": "60",
            "valueFontSize": "13",
            //Theme
            "theme": "fint"
        },
        "data": [{
            "label": "Teenage",
            "value": "1250400"
        }, {
            "label": "Adult",
            "value": "1463300"
        }, {
            "label": "Middle-age",
            "value": "1050700"
        }, {
            "label": "Senior Citizen",
            "value": "491000"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below is the list of attributes used to customize the background for data values:

Name

Description

valueBgColor

Sets the background color of data value text in hex code, eg. #00ffaa

valueBgAlpha

Sets the transparency of text-background of the data values. Value ranges from 0(transparent) to 100(opaque).

valueBgHoverAlpha

Sets the value background alpha on hover

Top