How to change bar opacity upon click of FusionCharts 2D Column Chart? - bar-chart

Question

I am attempting to toggle the opacity of a bar when it is clicked on utilizing the "dataPlotClick" event. I am able to change the opacity, but as soon as I move my mouse off of the bar the opacity changes back to the default.
NOTE: A similar question has been asked before on SO, but doesn't seem to have a valid answer.
How do I utilize the below dataPlotClick event to achieve this?
events: {
"dataPlotClick": function (evtObj, argObj) {
var i, plotItems;
plotItems = evtObj.sender.jsVars.hcObj.elements.plots[0].items;
plotItems[argObj.dataIndex].graphic.attr("fill-opacity", .2);
}
}
Fusion Chart:
FusionCharts.ready(function () {
var revenueChart = new FusionCharts({
type: 'column2d',
renderAt: 'chart-container',
width: '500',
height: '350',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Monthly revenue for last year",
"subCaption": "Harry's SuperMart",
"xAxisName": "Month",
"yAxisName": "Revenue (In USD)",
"numberPrefix": "$",
"paletteColors": "#0075c2",
"bgColor": "#ffffff",
"borderAlpha": "20",
"canvasBorderAlpha": "0",
"usePlotGradientColor": "0",
"plotBorderAlpha": "10",
"placevaluesInside": "1",
"rotatevalues": "1",
"valueFontColor": "#ffffff",
"showXAxisLine": "1",
"xAxisLineColor": "#999999",
"divlineColor": "#999999",
"divLineIsDashed": "1",
"showAlternateHGridColor": "0",
"subcaptionFontBold": "0",
"subcaptionFontSize": "14"
},
"data": [
{
"label": "Jan",
"value": "420000"
}, {
"label": "Feb",
"value": "810000"
}, {
"label": "Mar",
"value": "720000"
}, {
"label": "Apr",
"value": "550000"
}, {
"label": "May",
"value": "910000"
}, {
"label": "Jun",
"value": "510000"
}, {
"label": "Jul",
"value": "680000"
}, {
"label": "Aug",
"value": "620000"
}, {
"label": "Sep",
"value": "610000"
}, {
"label": "Oct",
"value": "490000"
}, {
"label": "Nov",
"value": "900000"
}, {
"label": "Dec",
"value": "730000"
}]
},
events: {
"dataPlotClick": function (evtObj, argObj) {
var i, plotItems, plotLength;
plotItems = evtObj.sender.jsVars.hcObj.elements.plots[0].items;
plotItems[argObj.dataIndex].graphic.attr("fill-opacity", .2);
}
}
}
}).render();
});

Answer 1

The alpha attribute need to set within the dataPlotClick FusionCharts API event for the particular data plot which has been clicked.
The particular data plot index could be found with the help of dataObj parameters dataIndex attribute within dataPlotClick FusionCharts API event.
Finally set the modified JSON structure with the help of FusionCharts setJSONData API method.
Please implement the below given code.
FusionCharts.ready(function () {
var topStores = new FusionCharts({
type: 'column2d',
renderAt: 'chart-container',
width: '400',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Monthly revenue for last year",
"subCaption": "Harry's SuperMart",
"xAxisName": "Month",
"yAxisName": "Revenue (In USD)",
"numberPrefix": "$",
"paletteColors": "#0075c2",
"bgColor": "#ffffff",
"borderAlpha": "20",
"canvasBorderAlpha": "0",
"usePlotGradientColor": "0",
"plotBorderAlpha": "10",
"placevaluesInside": "1",
"rotatevalues": "1",
"valueFontColor": "#ffffff",
"showXAxisLine": "1",
"xAxisLineColor": "#999999",
"divlineColor": "#999999",
"divLineIsDashed": "1",
"showAlternateHGridColor": "0",
"subcaptionFontBold": "0",
"subcaptionFontSize": "14"
},
"data": [{
"label": "Jan",
"value": "420000"
}, {
"label": "Feb",
"value": "810000"
}, {
"label": "Mar",
"value": "720000"
}, {
"label": "Apr",
"value": "550000"
}, {
"label": "May",
"value": "910000"
}, {
"label": "Jun",
"value": "510000"
}, {
"label": "Jul",
"value": "680000"
}, {
"label": "Aug",
"value": "620000"
}, {
"label": "Sep",
"value": "610000"
}, {
"label": "Oct",
"value": "490000"
}, {
"label": "Nov",
"value": "900000"
}, {
"label": "Dec",
"value": "730000"
}]
},
events: {
"dataPlotClick": function(evtObj, argObj) {
var plotNum= argObj.dataIndex;
var data =evtObj.sender.args.dataSource.data;
data[plotNum].alpha="10";
evtObj.sender.setJSONData(evtObj.sender.args.dataSource);
}
}
})
.render();
});