Configuring Charts - Customizing Opacity (alpha) of data values

Created using FusionCharts Suite XT - www.fusioncharts.com

by Swarnam Ramnarayanan

HTML

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<!-- Customizing opacity (alpha) for data values in chart:
    # valueFontAlpha - Alpha of the font in data value
    # valueAlpha - Alpha of background

    Deviation from theme:
        # valueFontSize - set to 11
        # valueBgColor  - set to "#a7d3ff"
        # valueAlpha - set to 20
        # valueBorderColor - set to #4a739d
        # valueBorderPadding - set to 5
        # showPercentValues - set to 1
        # showPercentInToolTip - set to 0
        
-->
<div id="chart-container">FusionCharts will render here</div>

JavaScript

FusionCharts.ready(function() {
    var revenueChart = new FusionCharts({
        type: 'pie2d',
        renderAt: 'chart-container',
        id: 'myChart',
        width: '500',
        height: '350',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "theme": "fint",
                "caption": "Age group of website customers",
                "subCaption": "Last year",
                "numberPrefix": "$",
                "labelFontSize": "11",
                "labelBgColor": "#a7d3ff",
                //Changing alpha of value font
                "labelFontAlpha": "60",
                //Changing alpha of value background
                "valueAlpha": "10",
                "labelBorderColor": "#4a739d",
                "labelBorderPadding": "5",
                "showPercentValues": "1",
                "showPercentInToolTip": "0",
                "pieRadius": "100",
                "enableSmartLabels":"1",
			    "manageLabelOverflow": "1"
            },
            "data": [
                {
                    "label": "Teenage",
                    "value": "1250400"
                },
                {
                    "label": "Adult",
                    "value": "1463300"
                },
                {
                    "label": "Middle-age",
                    "value": "1050700"
                },
                {
                    "label": "Senior Citizen",
                    "value": "491000"
                }
            ]
        }
    }).render();

});