Is it possible to change the fill color of 1 column when the mouse is over it?
I can't seem to figure it out I have something along these lines:
<mx:SolidColor id="barColor" color="0x00FF00"/>
<mx:SolidColor id="hoverBarColor" color="0xFF0000"/>
<mx:ColumnChart id="chart" type="overlaid"
itemRollOver="updateHoverColor(event)" itemRollOut="updateColor(event)">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="range"/>
</mx:horizontalAxis>
<mx:series>
<mx:ColumnSeries id="series" xField="range" yField="value"
fill="{barColor}"/>
</mx:series>
</mx:ColumnChart>
And my hover function looks like:
private function updateHoverColor(event:ChartItemEvent):void {
var col:ColumnSeriesItem = ColumnSeriesItem(event.hitData.chartItem);
col.fill = hoverBarColor;
}
Unfortunately, nothing happens. No errors are thrown, but the color of the
column which is being hovered over is not changed.
I also tried adding the mouseOver/rollOver callbacks to the ColumnSeries, and
used a function as such:
private function updateHoverColor(event:ChartItemEvent):void {
event.target.setStyle("fill", hoverBarColor);
}
but that resulted in the color of all of the columns to change.
Anyone have any ideas?
Thanks!