Question

I need to customize a look and feel of standard Flex LineChart with LineSeries. I cannot figure out how to change default circles drawn when the mouse pointer is over a data point.

Answer 1

Solution

It is necessary to create a custom itemRenderer and draw whatever you want in the MOUSE_OVER event handler. Chart’s showDataTipTargets property has to be set to false

While looking for a solution, I forgot that itemRenderer is the Flex component and can handle mouse events. My colleagues pointed to it and helped resolve the issue.

Code

CustomDataTipTargetRenderer.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark" 
                creationComplete="init()"
                ...>
    <fx:Script>
        <![CDATA[
            private function init():void
            {
                addEventListener(MouseEvent.MOUSE_OVER, onMouseOver); 
                addEventListener(MouseEvent.MOUSE_OUT, onMouseOut);
            }

            private function onMouseOver(event:MouseEvent):void
            { 
                // Show custom data tip target point. 
            } 

            private function onMouseOut(event:MouseEvent):void
            { 
                // Hide custom data tip target point.
            }
        ]]>
    </fx:Script>
</s:ItemRenderer>

YourView.mxml

<mx:LineChart ...
              showDataTips="true"
              showDataTipTargets="false">
    ...
    <mx:series>
        <mx:LineSeries ... itemRenderer="yournamespace.CustomDataTipTargetRenderer">
            ...
        </mx:LineSeries>
    </mx:series>
</mx:LineChart>