FusionCharts Logo
v3.12.1
Demos
Beginner's Guide
Charts / Gauges / Maps Guide
Customizing Charts
API
Integrating With Your Stack
Help

Data Plot

Data plot refers to the column in column chart, lines in a line chart, pie/doughnut slices in a pie/doughnut chart. This section shows how you can enhance the way your data plot looks with the help of colors, gradients and hover effects.

This section talks about:

Configuring colors for data plots

Specifying color for individual data plots

Using FusionCharts Suite XT you can specify a custom color for each data plot. A column 2D chart with colors based on the quarter of the year is shown below:

FusionCharts will load here..
{ "chart": { "caption": "Monthly Revenue", "subCaption": "Last year", "xAxisName": "Month", "yAxisName": "Amount (In USD)", "numberPrefix": "$", "theme": "fint" }, "data": [ { "label": "Jan", "value": "420000", "color": "#008ee4" }, { "label": "Feb", "value": "810000", "color": "#008ee4" }, { "label": "Mar", "value": "720000", "color": "#008ee4" }, { "label": "Apr", "value": "550000", "color": "#9b59b6" }, { "label": "May", "value": "910000", "color": "#9b59b6" }, { "label": "Jun", "value": "510000", "color": "#9b59b6" }, { "label": "Jul", "value": "680000", "color": "#6baa01" }, { "label": "Aug", "value": "620000", "color": "#6baa01" }, { "label": "Sep", "value": "610000", "color": "#6baa01" }, { "label": "Oct", "value": "490000", "color": "#e44a00" }, { "label": "Nov", "value": "900000", "color": "#e44a00" }, { "label": "Dec", "value": "730000", "color": "#e44a00" } ] }
{
    "chart": {
        "caption": "Monthly Revenue",
        "subCaption": "Last year",
        "xAxisName": "Month",
        "yAxisName": "Amount (In USD)",
        "numberPrefix": "$",
        "theme": "fint"
    },
    "data": [
        {
            "label": "Jan",
            "value": "420000",
            "color": "#008ee4"
        },
        {
            "label": "Feb",
            "value": "810000",
            "color": "#008ee4"
        },
        {
            "label": "Mar",
            "value": "720000",
            "color": "#008ee4"
        },
        {
            "label": "Apr",
            "value": "550000",
            "color": "#9b59b6"
        },
        {
            "label": "May",
            "value": "910000",
            "color": "#9b59b6"
        },
        {
            "label": "Jun",
            "value": "510000",
            "color": "#9b59b6"
        },
        {
            "label": "Jul",
            "value": "680000",
            "color": "#6baa01"
        },
        {
            "label": "Aug",
            "value": "620000",
            "color": "#6baa01"
        },
        {
            "label": "Sep",
            "value": "610000",
            "color": "#6baa01"
        },
        {
            "label": "Oct",
            "value": "490000",
            "color": "#e44a00"
        },
        {
            "label": "Nov",
            "value": "900000",
            "color": "#e44a00"
        },
        {
            "label": "Dec",
            "value": "730000",
            "color": "#e44a00"
        }
    ]
}
<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',
    width: '450',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Monthly Revenue",
            "subCaption": "Last year",
            "xAxisName": "Month",
            "yAxisName": "Amount (In USD)",
            "numberPrefix": "$",
            "theme": "fint"
        },
        "data": [{
            "label": "Jan",
            "value": "420000",
            //Using color attribute to specifically add color to each data plot
            "color": "#008ee4"
        }, {
            "label": "Feb",
            "value": "810000",
            "color": "#008ee4"
        }, {
            "label": "Mar",
            "value": "720000",
            "color": "#008ee4"
        }, {
            "label": "Apr",
            "value": "550000",
            "color": "#9b59b6"
        }, {
            "label": "May",
            "value": "910000",
            "color": "#9b59b6"
        }, {
            "label": "Jun",
            "value": "510000",
            "color": "#9b59b6"
        }, {
            "label": "Jul",
            "value": "680000",
            "color": "#6baa01"
        }, {
            "label": "Aug",
            "value": "620000",
            "color": "#6baa01"
        }, {
            "label": "Sep",
            "value": "610000",
            "color": "#6baa01"
        }, {
            "label": "Oct",
            "value": "490000",
            "color": "#e44a00"
        }, {
            "label": "Nov",
            "value": "900000",
            "color": "#e44a00"
        }, {
            "label": "Dec",
            "value": "730000",
            "color": "#e44a00"
        }]
    }
}
);
    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 define custom colors for individual data plots:

Attribute Name Description

color

Sets the data-plot color in hex code, eg. #00ffaa

paletteColors

Specifies custom list of hex colors for the data items. The list of colors have to be separated by comma e.g., "paletteColors" : "#eed17f, #97cbe7, #b0d67a".

Specifying a list of colors for different data series/data plots:

You can also specify a comma separated list of colors for use in different data series (or in case of single series charts, different data plots). The colors are selected from the list in a round-robin way for each data series.

A multi-series 2D chart configured with a comma separated list of colors looks as below:

Given below is the attribute used to specify a comma separated list of colors for coloring data series:

Attribute Name Description

paletteColors

Specifies custom list of hex colors for the data items. The list of colors have to be separated by comma e.g., "paletteColors" : "#eed17f, #97cbe7, #b0d67a".

Customizing gradient effects for data plots

Adding gradient effect to data plots

You can apply a global gradient color for an entire data plot as described in this sub-section.

A column 2D chart with global gradient color specified for individual data plots is shown below:

FusionCharts will load here..
{ "chart": { "caption": "Quarterly Revenue", "subCaption": "Last year", "xAxisName": "Quarter", "yAxisName": "Amount (In USD)", "theme": "fint", "numberPrefix": "$", "usePlotGradientColor": "1" }, "data": [ { "label": "Q1", "value": "1950000", "color": "#008ee4" }, { "label": "Q2", "value": "1450000", "color": "#9b59b6" }, { "label": "Q3", "value": "1730000", "color": "#6baa01" }, { "label": "Q4", "value": "2120000", "color": "#e44a00" } ] }
{
    "chart": {
        "caption": "Quarterly Revenue",
        "subCaption": "Last year",
        "xAxisName": "Quarter",
        "yAxisName": "Amount (In USD)",
        "theme": "fint",
        "numberPrefix": "$",
        "usePlotGradientColor": "1"
    },
    "data": [
        {
            "label": "Q1",
            "value": "1950000",
            "color": "#008ee4"
        },
        {
            "label": "Q2",
            "value": "1450000",
            "color": "#9b59b6"
        },
        {
            "label": "Q3",
            "value": "1730000",
            "color": "#6baa01"
        },
        {
            "label": "Q4",
            "value": "2120000",
            "color": "#e44a00"
        }
    ]
}
<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',
    width: '450',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Quarterly Revenue",
            "subCaption": "Last year",
            "xAxisName": "Quarter",
            "yAxisName": "Amount (In USD)",
            "theme": "fint",
            "numberPrefix": "$",
            //Removing default gradient fill from columns
            "usePlotGradientColor": "1"
        },
        "data": [{
            "label": "Q1",
            "value": "1950000",
            "color": "#008ee4"
        }, {
            "label": "Q2",
            "value": "1450000",
            "color": "#9b59b6"
        }, {
            "label": "Q3",
            "value": "1730000",
            "color": "#6baa01"
        }, {
            "label": "Q4",
            "value": "2120000",
            "color": "#e44a00"
        }]
    },
    "events": {
        beforeRender: function(e, a) {
            var appendBox = document.createElement("div"),
                revenueChart = e.sender;
            appendBox.innerHTML = '<input type="checkbox" id="dataplot-useGradient" checked="true">Use gradient fill for columns?</input>';
            a.container.appendChild(appendBox);

            var gradientCheckBox = document.getElementById('dataplot-useGradient');

            //Set event listener for radio button
            if (gradientCheckBox.addEventListener) {
                gradientCheckBox.addEventListener("click", changeGradient);
            }

            function changeGradient(evt, obj) {
                //Set gradient fill for chart using usePlotGradientColor attribute
                (gradientCheckBox.checked) ? revenueChart.setChartAttribute('usePlotGradientColor', 1) : revenueChart.setChartAttribute('usePlotGradientColor', 0);
            };
        }
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

The list of attributes used to configure gradient color for data plots is shown below:

Attribute Name Description

usePlotGradientColor

Set this to 1 to use gradient effect, or to 0 (default) to remove it.

plotGradientColor

You can globally add a gradient color to the entire plot of chart by specifying the second color as this attribute. For example, if you’ve specified individual colors for your columns and now you want a gradient that ends in white, you need to specify #ffffff (white) as the value of this attribute and the chart will now draw plots as gradient.

Customizing gradient properties

Apart from a basic gradient effect, you can also customize the gradient angle, and fill ratio for a data plot. A column 2D chart with customized gradient properties used for data plots looks as below:

FusionCharts will load here..
{ "chart": { "caption": "Quarterly Revenue", "subCaption": "Last year", "xAxisName": "Quarter", "yAxisName": "Amount (In USD)", "numberPrefix": "$", "theme": "fint", "showshadow": "1", "usePlotGradientColor": "1", "plotGradientColor": "#003366", "plotFillAngle": "0", "plotFillRatio": "0,100" }, "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": "$",
        "theme": "fint",
        "showshadow": "1",
        "usePlotGradientColor": "1",
        "plotGradientColor": "#003366",
        "plotFillAngle": "0",
        "plotFillRatio": "0,100"
    },
    "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',
    width: '450',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Quarterly Revenue",
            "subCaption": "Last year",
            "xAxisName": "Quarter",
            "yAxisName": "Amount (In USD)",
            "numberPrefix": "$",
            "theme": "fint",
            "showshadow": "1",
            //Using plot gradient color
            "usePlotGradientColor": "1",
            //Applying plot gradient color
            "plotGradientColor": "#003366",
            //Applying fill angle for plots
            "plotFillAngle": "0",
            //Applying fill ratio for plots
            "plotFillRatio": "0,100"
        },
        "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 configure gradient effects:

Attribute Name Description

plotFillAngle

Sets the fill angle for gradient (for column, area and pie charts). Values can range from 0 - 360.

plotFillRatio

Specifies the start and end of the gradient effect in a comma separated format. For example a setting of “20, 40” would cause the gradient effect to start at 20% of width and end at 40% of width. The colour before gradient start would be set to the data plot color and after gradient end would get set to the gradient fill color.

Customizing data plot transparency

You can set the transparency of a data plot fill colour. A column 2D chart with data plot transparency property applied looks as below:

FusionCharts will load here..
{ "chart": { "caption": "Comparison of Quarterly Revenue", "subCaption": "Harry's SuperMart", "xAxisname": "Quarter", "yAxisName": "Revenues (In USD)", "numberPrefix": "$", "plotFillAlpha": "90", "theme": "fint" }, "categories": [ { "category": [ { "label": "Q1" }, { "label": "Q2" }, { "label": "Q3" }, { "label": "Q4" } ] } ], "dataset": [ { "seriesname": "Previous Year", "alpha": "30", "data": [ { "value": "10000" }, { "value": "11500" }, { "value": "12500" }, { "value": "15000" } ] }, { "seriesname": "Current Year", "data": [ { "value": "25400" }, { "value": "29800" }, { "value": "21800" }, { "value": "26800" } ] } ] }
{
    "chart": {
        "caption": "Comparison of Quarterly Revenue",
        "subCaption": "Harry's SuperMart",
        "xAxisname": "Quarter",
        "yAxisName": "Revenues (In USD)",
        "numberPrefix": "$",
        "plotFillAlpha": "90",
        "theme": "fint"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Q1"
                },
                {
                    "label": "Q2"
                },
                {
                    "label": "Q3"
                },
                {
                    "label": "Q4"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesname": "Previous Year",
            "alpha": "30",
            "data": [
                {
                    "value": "10000"
                },
                {
                    "value": "11500"
                },
                {
                    "value": "12500"
                },
                {
                    "value": "15000"
                }
            ]
        },
        {
            "seriesname": "Current Year",
            "data": [
                {
                    "value": "25400"
                },
                {
                    "value": "29800"
                },
                {
                    "value": "21800"
                },
                {
                    "value": "26800"
                }
            ]
        }
    ]
}
<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: 'mscolumn2d',
    renderAt: 'chart-container',
    width: '450',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Comparison of Quarterly Revenue",
            "subCaption": "Harry's SuperMart",
            "xAxisname": "Quarter",
            "yAxisName": "Revenues (In USD)",
            "numberPrefix": "$",
            "plotFillAlpha": "90",
            "theme": "fint"
        },
        "categories": [{
            "category": [{
                "label": "Q1"
            }, {
                "label": "Q2"
            }, {
                "label": "Q3"
            }, {
                "label": "Q4"
            }]
        }],
        "dataset": [{
            "seriesname": "Previous Year",
            "alpha": "30",
            "data": [{
                "value": "10000"
            }, {
                "value": "11500"
            }, {
                "value": "12500"
            }, {
                "value": "15000"
            }]
        }, {
            "seriesname": "Current Year",
            "data": [{
                "value": "25400"
            }, {
                "value": "29800"
            }, {
                "value": "21800"
            }, {
                "value": "26800"
            }]
        }]
    }
}
);
    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 transparency of a data plot:

Attribute Name Description

plotFillAlpha

Used to set the transparency of all data plots in chart object. In case of gradients we can provide more than one alpha in a comma separated format. Values ranges from 0 (completely transparent) to 100 (opaque).

alpha

Sets the transparency for specific dataset / data plot using alpha attribute. This overrides the transparency setting at the chart object level. Values ranges from 0 (completely transparent) to 100 (opaque).

Customizing plot border

Showing or hiding plot border

Every data plot (column, area, or pie) has a border by default.You can choose to either retain the border or remove it. A chart with the ability to configure plot borders is shown below:

FusionCharts will load here..
{ "chart": { "caption": "Quarterly Revenue", "subCaption": "Last year", "xAxisName": "Quarter", "yAxisName": "Amount (In USD)", "numberPrefix": "$", "theme": "fint", "showPlotBorder": "1" }, "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": "$",
        "theme": "fint",
        "showPlotBorder": "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',
    width: '450',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Quarterly Revenue",
            "subCaption": "Last year",
            "xAxisName": "Quarter",
            "yAxisName": "Amount (In USD)",
            "numberPrefix": "$",
            "theme": "fint",
            //Hiding plot borders
            "showPlotBorder": "1"
        },
        "data": [{
            "label": "Q1",
            "value": "1950000"
        }, {
            "label": "Q2",
            "value": "1450000"
        }, {
            "label": "Q3",
            "value": "1730000"
        }, {
            "label": "Q4",
            "value": "2120000"
        }]
    },
    "events": {
        "beforeRender": function(e, a) {
            var appendBox = document.createElement("div"),
                revenueChart = e.sender;

            appendBox.innerHTML = '<input type="checkbox" id="dataplot-showBorder" checked="true">Show border for data plot (columns)?</input>';
            a.container.appendChild(appendBox);

            var showBorderCheckBox = document.getElementById('dataplot-showBorder');

            //Set event listener for radio button
            if (showBorderCheckBox.addEventListener) {
                showBorderCheckBox.addEventListener("click", changeBorder);
            }

            function changeBorder(evt, obj) {
                //Set gradient fill for chart using usePlotGradientColor attribute
                (showBorderCheckBox.checked) ? revenueChart.setChartAttribute('showPlotBorder', 1) : revenueChart.setChartAttribute('showPlotBorder', 0);
            };
        }
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below is the attribute used to hide the plot border:

Attribute Name Description

showPlotBorder

Set the value to 1 (default) to show borders or 0 to hide it.

Using a dashed data plot border

You can set a dashed border for the data plot and can also customize dash-length and the gap between dashes. A column 2D chart with a black dashed border around the data plots looks as below:

FusionCharts will load here..
{ "chart": { "caption": "Quarterly Revenue", "subCaption": "Last year", "xAxisName": "Quarter", "yAxisName": "Amount (In USD)", "numberPrefix": "$", "theme": "fint", "showPlotBorder": "1", "plotBorderDashed": "1", "plotBorderDashLen": "4", "plotBorderDashGap": "4", "plotBorderThickness": "1", "plotBorderColor": "#000000" }, "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": "$",
        "theme": "fint",
        "showPlotBorder": "1",
        "plotBorderDashed": "1",
        "plotBorderDashLen": "4",
        "plotBorderDashGap": "4",
        "plotBorderThickness": "1",
        "plotBorderColor": "#000000"
    },
    "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',
    width: '450',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Quarterly Revenue",
            "subCaption": "Last year",
            "xAxisName": "Quarter",
            "yAxisName": "Amount (In USD)",
            "numberPrefix": "$",
            "theme": "fint",
            //Plot border properties
            "showPlotBorder": "1",
            "plotBorderDashed": "1",
            "plotBorderDashLen": "4",
            "plotBorderDashGap": "4",
            "plotBorderThickness": "1",
            "plotBorderColor": "#000000"
        },
        "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 a brief description of the attributes used to change the data plot border:

Attribute Name Description

plotBorderDashed

Set this to 1 to make plot border dashed and 0 (default) to remove borders. This is applicable at a chart object level.

plotBorderDashLen

Sets the length of each dash in plot-border (in pixels). This is applicable at a chart object level.

plotBorderDashGap

Sets the gap between two consecutive dashes in plot border (in pixels). This is applicable at a chart object level.

dashed

Set this to 1 to make plot border dashed and 0 (default) to remove borders for an individual data plot or series. This overrides the setting at the chart object level.

dashlen

Sets the length of each dash in plot-border (in pixels). Affects an individual data-plot.

dashgap

Sets the gap between two consecutive dashes in plot border (in pixels). Affects an individual data-plot.

Using rounded edges

You can configure data plots with rounded edges in 2D Column or Bar charts. A chart with the data plots having round edges is shown below:

FusionCharts will load here..
{ "chart": { "caption": "Quarterly Revenue", "subCaption": "Last year", "xAxisName": "Quarter", "yAxisName": "Amount (In USD)", "numberPrefix": "$", "theme": "fint", "useRoundEdges": "1" }, "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": "$",
        "theme": "fint",
        "useRoundEdges": "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',
    width: '450',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Quarterly Revenue",
            "subCaption": "Last year",
            "xAxisName": "Quarter",
            "yAxisName": "Amount (In USD)",
            "numberPrefix": "$",
            "theme": "fint",
            //Applying round edges and glass fill effect for data plots
            "useRoundEdges": "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 a brief description of the attributes used to apply round edges for data plots:

Attribute Name Description

useRoundEdges

Set this attribute to 1 to display plot columns with rounded edges (with a glass effect gradient).

Configuring plot hover effects

You can display hover effects for data plots to add an interactive element to the charts. Shown below is a chart with hover effects enabled:

FusionCharts will load here..
{ "chart": { "caption": "Quarterly Revenue ", "subCaption": "Last year", "xAxisName": "Quarter", "yAxisName": "Amount (In USD)", "numberPrefix": "$", "theme": "fint", "plotHoverEffect": "1", "plotBorderHoverThickness": "1", "plotBorderHoverDashed": "1", "plotBorderHoverDashLen": "6", "plotBorderHoverDashGap": "2" }, "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": "$",
        "theme": "fint",
        "plotHoverEffect": "1",
        "plotBorderHoverThickness": "1",
        "plotBorderHoverDashed": "1",
        "plotBorderHoverDashLen": "6",
        "plotBorderHoverDashGap": "2"
    },
    "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": "$",
            "theme": "fint",
            //Additional plot hover cosmetics attributes
            "plotHoverEffect": "1",
            "plotBorderHoverThickness": "1",
            "plotBorderHoverDashed": "1",
            "plotBorderHoverDashLen": "6",
            "plotBorderHoverDashGap": "2"
        },

        "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 configure hover effects at a chart level. These settings are used in the chart object and will apply to all data plots in a chart.

Attribute Name Description

plotHoverEffect

Set this to 1 to enable hover effect for data plots (e.g., column, pie only) or 0 to disable it.

plotFillHoverColor

Sets the hover color for data plots. Value should be in hex code format, eg. #00ffaa

plotFillHoverAlpha

Sets the transparency for hover colour for data plots. Can take values from 0 (transparent) to 100 (opaque).

plotBorderHoverColor

Sets the hover border color. Value should be in hex code format, eg. #00ffaa

plotBorderHoverAlpha

Sets the transparency of hover borders. Can take values from 0 (transparent) to 100 (opaque).

plotBorderHoverThickness

Sets the hover border thickness (in pixels).

plotBorderHoverDashed

Set this to 1 to make data plot borders appear dashed on hover and 0 (default) to keep them normal.

plotBorderHoverDashLen

Sets the length of each dash for all data plots on hover(in pixels).

plotBorderHoverDashGap

Sets the gap between two consecutive dashes for all data plots on hover(in pixels).

Given below is the list of attributes used to configure hover effects for individual data plots.

Attribute Name Description

hoverColor

Sets the hover color for data plots. Value should be in hex code format, eg. #00ffaa

hoverAlpha

Sets the transparency for hover colour for data plots. Can take values from 0 (transparent) to 100 (opaque).

borderHoverColor

Sets the hover border color. Value should be in hex code format, eg. #00ffaa

borderHoverAlpha

Sets the transparency of hover borders. Can take values from 0 (transparent) to 100 (opaque).

borderHoverThickness

Sets the hover border thickness (in pixels).

borderHoverDashed

Set this to 1 to make data plot borders appear dashed on hover and 0 (default) to keep them normal.

borderHoverDashLen

Sets the length of each dash for all data plots on hover(in pixels).

borderHoverDashGap

Sets the gap between two consecutive dashes for all data plots on hover(in pixels).
Top