How to make bars rounded without the glass effect on Fusion Chart? - fusioncharts

Question

The purpose is to apply border-radius effect to the chart bars.
What I have found is only this round edges example.
https://www.fusioncharts.com/dev/chart-guide/chart-configurations/data-plot#round-edges-7
However, it comes with a glass-effect when applied.
How to have it with the glass-effect and keep the rounded effect only?

Answer 1

FusionCharts does not support rounded edge on column charts, however, you can use arc annotations shape and create the edge rounded, but please note annotations are static in nature, here is sample chart given below :
FusionCharts.ready(function() {
var salesChart = new FusionCharts({
type: 'MSColumn2D',
renderAt: 'chart-container',
width: '600',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Sales report of Apple products",
"subcaption": "In Billion $",
"yaxismaxvalue": "250",
"decimals": "0",
"numberprefix": "$",
"numbersuffix": "B",
"placevaluesinside": "1",
"paletteColors": "#FF0000,#00FF00,#FFFF00",
"divlinealpha": "56",
"plotfillalpha": "100",
"plotSpacePercent": "47",
"crossLineColor": "#cc3300",
"crossLineAlpha": "100",
"theme": "zune"
},
"annotations": {
"showbelow": "1",
"groups": [{
"id": "transarc",
"items": [{
"type": "arc",
"radius": "16",
"borderColor": "#FFFFFF",
"innerRadius": "0",
"color": "#FF0000",
"alpha": "100",
"x": "$dataset.0.set.0.x",
"y": "$dataset.0.set.0.STARTY+2",
"startangle": "0",
"endangle": "180"
}, {
"type": "arc",
"radius": "16",
"borderColor": "#FFFFFF",
"innerRadius": "0",
"color": "#FF0000",
"alpha": "100",
"x": "$dataset.0.set.1.x",
"y": "$dataset.0.set.1.STARTY+2",
"startangle": "0",
"endangle": "180"
}, {
"type": "arc",
"radius": "16",
"borderColor": "#FFFFFF",
"innerRadius": "0",
"color": "#FF0000",
"alpha": "100",
"x": "$dataset.0.set.2.x",
"y": "$dataset.0.set.2.STARTY+2",
"startangle": "0",
"endangle": "180"
},
{
"type": "arc",
"radius": "16",
"borderColor": "#FFFFFF",
"innerRadius": "0",
"color": "#00FF00",
"alpha": "100",
"x": "$dataset.1.set.0.x",
"y": "$dataset.1.set.0.STARTY+2",
"startangle": "0",
"endangle": "180"
}, {
"type": "arc",
"radius": "16",
"borderColor": "#FFFFFF",
"innerRadius": "0",
"color": "#00FF00",
"alpha": "100",
"x": "$dataset.1.set.1.x",
"y": "$dataset.1.set.1.STARTY+2",
"startangle": "0",
"endangle": "180"
}, {
"type": "arc",
"radius": "16",
"borderColor": "#FFFFFF",
"innerRadius": "0",
"color": "#00FF00",
"alpha": "100",
"x": "$dataset.1.set.2.x",
"y": "$dataset.1.set.2.STARTY+2",
"startangle": "0",
"endangle": "180"
},
{
"type": "arc",
"radius": "16",
"borderColor": "#FFFFFF",
"innerRadius": "0",
"color": "#FFFF00",
"alpha": "100",
"x": "$dataset.2.set.0.x",
"y": "$dataset.2.set.0.STARTY+2",
"startangle": "0",
"endangle": "180"
}, {
"type": "arc",
"radius": "16",
"borderColor": "#FFFFFF",
"innerRadius": "0",
"color": "#FFFF00",
"alpha": "100",
"x": "$dataset.2.set.1.x",
"y": "$dataset.2.set.1.STARTY+2",
"startangle": "0",
"endangle": "180"
}, {
"type": "arc",
"radius": "16",
"borderColor": "#FFFFFF",
"innerRadius": "0",
"color": "#FFFF00",
"alpha": "100",
"x": "$dataset.2.set.2.x",
"y": "$dataset.2.set.2.STARTY+2",
"startangle": "0",
"endangle": "180"
}
]
}]
},
"categories": [{
"category": [{
"label": "2012"
},
{
"label": "2013"
},
{
"label": "2014"
}
]
}],
"dataset": [{
"seriesname": "iPod",
"data": [{
"value": "42.63"
},
{
"value": "35.16"
},
{
"value": "26.38"
}
]
},
{
"seriesname": "iPhone",
"data": [{
"value": "125.04"
},
{
"value": "150.26"
},
{
"value": "169.22"
}
]
},
{
"seriesname": "iPad",
"data": [{
"value": "58.31"
},
{
"value": "71.04"
},
{
"value": "67.99"
}
]
}
]
}
})
.render();
});