Problem: you click on a chartItem; how do you give it a persistent visual mark to show that it's the currently selected item?
This issue has vexed me for weeks, and while there are a several different solutions with powerful benefits (manually create a ToolTip with ToolTipManager; use Ely's dataDrawingCanvas; use a conditional itemRenderer, etc), here's one easy, simple solution: 1] Specify an inline itemRenderer for the Series, initializing the alpha to less than 1 (I like 0.8) 2] Declare a global ChartItem variable named prevSelectedItem 3] In your event handler for clicking on a chartItem, reset the alpha of the previously selected chartItem (if any) to the "unhighlighted" value (in this case 0.8); and then set the currently selected item to the "highlighted" value (in this case 1) That's it; example code is below. Now you could certainly define your own custom itemRenderer, and expose more than just the alpha property in order to alter the visual appearance; and I very well may be missing additional visual properties of the chartItem that you can manipulate here out of the box (suggestions, anyone?); but for sheer simplicity, this approach is real easy to work with. Regards, -Peter Demling Lexington, MA <?xml version="1.0"?> <!-- charts/DataTipsMultiple.mxml --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";> <mx:Script><![CDATA[ import mx.collections.ArrayCollection; import mx.charts.events.ChartItemEvent; import mx.charts.ChartItem; [Bindable] public var expenses:ArrayCollection = new ArrayCollection([ {Month:"Jan", Profit:2000, Expenses:1500}, {Month:"Feb", Profit:1000, Expenses:200}, {Month:"Mar", Profit:1500, Expenses:500}, {Month:"Apr", Profit:2500, Expenses:1700}, {Month:"May", Profit:2000, Expenses:800} ]); private var prevSelectedColumn:ChartItem; private function itemClicked(e:ChartItemEvent):void{ if (prevSelectedColumn) prevSelectedColumn.itemRenderer.alpha = 0.8; prevSelectedColumn = e.hitData.chartItem; e.hitData.chartItem.itemRenderer.alpha = 1; } ]]></mx:Script> <mx:Panel title="Column Chart"> <mx:ColumnChart id="myChart" dataProvider="{expenses}" showDataTips="true" itemClick="itemClicked(event)"> <mx:horizontalAxis> <mx:CategoryAxis dataProvider="{expenses}" categoryField="Month"/> </mx:horizontalAxis> <mx:series> <mx:ColumnSeries yField="Profit"> <mx:itemRenderer> <mx:Component> <mx:BoxItemRenderer alpha="0.8" /> </mx:Component> </mx:itemRenderer> </mx:ColumnSeries> </mx:series> </mx:ColumnChart> </mx:Panel> </mx:Application>
