Configuring Charts - Customizing border properties for data values

Created using FusionCharts Suite XT - www.fusioncharts.com

by Ashok Kumaresan

HTML

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<!-- Customizing border properties for data values using these attributes:
    # valueBorderColor
    # valueBorderAlpha
    # valueBorderPadding
    # valueBorderRadius
    # valueBorderThickness
    # valueBorderIsDashed
    # valueBorderDashLen
    # valueBorderDashGap

    Deviation from theme:
    # valueFontSize - set to 11

-->
<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: '300',
        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",
                "enableSmartLabels":"1",
                "manageLabelOverflow":"1",
                "useEllipsesWhenOverflow":"1",
                "valueFontSize": "11"

            },
            "data": [
                {
                    "label": "Teenageeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee",
                    "value": "1250400"
                },
                {
                    "label": "Adultttttttttttttttttttttttttt",
                    "value": "1463300"
                },
                {
                    "label": "Middle-ageeeeeeeeeeeeeeeeeeeeeeee",
                    "value": "1050700"
                },
                {
                    "label": "Senior Citizennnnnnnnnnnnnnnnnnnnnn",
                    "value": "491000"
                }
            ]
        }
   ...