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!


Reply via email to