How to customize CircleItemRenderer in Flex chart?

Question

<mx:LineSeries form="curve" displayName="BG" yField="Value" xField="DateTime">
    <mx:itemRenderer>
        <fx:Component>
            <mx:CircleItemRenderer height="10" width="20"/>
        </fx:Component>
    </mx:itemRenderer>
</mx:LineSeries>

I want to just make the circles on a flex chart bigger.. I thought setting the height and width might change things.. is there a way to set the size of the circleItemRenderer? or do I have to create an entire custom class?

I hope I can do it with some kind of number because I will want to be making a chart where the size of the circle is dependent on a different value. Thoughts?

Answer 1

LineSeries, and other series, has styles 'radius'

Specifies the radius, in pixels, of the chart element at each data point. By default, the PlotChart control draws a circle at each data point. You can set this property in MXML or using styles. The default value is 5 pixels.

and 'adjustedRadius':

Specifies the number of pixels by which radius of the chart item is to be increased when highlighted or selected. The default value is 2.

The radius determines the base width and height of each item renderer while the adjustedRadius modifies it based on user interaction. The code for this is visible in the item renderers. Here is an bit from the CircleItemRenderer skin:.

switch (state)
        {
            case ChartItem.FOCUSED:
            case ChartItem.ROLLOVER:
                if (styleManager.isValidStyleValue(getStyle('itemRollOverColor')))
                    color = getStyle('itemRollOverColor');
                else
                    color = ColorUtil.adjustBrightness2(GraphicsUtilities.colorFromFill(fill),-20);
                fill = new SolidColor(color);
                adjustedRadius = getStyle('adjustedRadius');
                if (!adjustedRadius)
                    adjustedRadius = 0;
                break;
            case ChartItem.DISABLED:
                if (styleManager.isValidStyleValue(getStyle('itemDisabledColor')))
                    color = getStyle('itemDisabledColor');
                else
                    color = ColorUtil.adjustBrightness2(GraphicsUtilities.colorFromFill(fill),20);
                fill = new SolidColor(GraphicsUtilities.colorFromFill(color));
                break;
            case ChartItem.FOCUSEDSELECTED:
            case ChartItem.SELECTED:
                if (styleManager.isValidStyleValue(getStyle('itemSelectionColor')))
                    color = getStyle('itemSelectionColor');
                else
                    color = ColorUtil.adjustBrightness2(GraphicsUtilities.colorFromFill(fill),-30);
                fill = new SolidColor(color);
                adjustedRadius = getStyle('adjustedRadius');
                if (!adjustedRadius)
                    adjustedRadius = 0;
                break;
        }

        var stroke:IStroke = getStyle("stroke");

        var w:Number = stroke ? stroke.weight / 2 : 0;

        rcFill.right = unscaledWidth;
        rcFill.bottom = unscaledHeight;

        var g:Graphics = graphics;
        g.clear();      
        if (stroke)
            stroke.apply(g,null,null);
        if (fill)
            fill.begin(g, rcFill, null);
        g.drawEllipse(w - adjustedRadius,w - adjustedRadius,unscaledWidth - 2 * w + adjustedRadius * 2, unscaledHeight - 2 * w + adjustedRadius * 2);

        if (fill)
            fill.end(g);

The CircleItemRenderer skin is only 200 lines and most of the code is in the updateDisplayList method. You could easy create a new skin, or simply override the updateDisplayList method in order to set the radius based on the data that the renderer represents (using something like 'newRadius = data.someValue' in the updateDisplayList method).