Show various shapes in Flex chart control

For BarChart:

Set itemRenderer property for barSeries

barSeries.setStyle(“itemRenderer”, new ClassFactory(ShapedChartItemRenderer));


    import flash.display.Graphics;
    import mx.charts.series.items.BarSeriesItem;
    import mx.core.IDataRenderer;
    import mx.skins.ProgrammaticSkin;
    import mx.utils.StringUtil;
    public class ShapedChartItemRenderer extends ProgrammaticSkin implements IDataRenderer
        private var chartItemShape:String = “”;
        private var chartItemColor:uint = 0x71c0ff;
        private var _chartItem:BarSeriesItem;
        private var shapeFillAlpha:Number = 0.4;
        private var shapeBorderThickness:Number = 2;
        public function ShapedChartItemRenderer() {
            // Empty constructor.
        public function get data():Object {
            return _chartItem;
        public function set data(value:Object):void {
            _chartItem = value as BarSeriesItem;
        override protected function updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void {
            super.updateDisplayList(unscaledWidth, unscaledHeight);
            var g:Graphics = graphics;
            //for drawing oval shape in chart

            //uncomment below function for drawing different shapes in chart based on some //condition
            //condition for various shapes and set chartItemShape
            /*chartItemShape = “OVAL”;
            chartItemColor = 0x71c0ff;
        private function drawConditionalShapes(g:Graphics,shape:String,color:uint,uwidth:Number,uheight:Number):void
                case ChartItemShapes.OVAL_SHAPE:
                case ChartItemShapes.HEXAGON_SHAPE:
                case ChartItemShapes.GROUPED_SHAPE:
                    g.drawRect(0, 0, uwidth, uheight);
                case ChartItemShapes.RECTANGLE_SHAPE:
                    g.drawRect(0, 0, 20, 20);
                    g.drawRect(0, 0, uwidth, uheight);
    } // Close class.
} // Close package.




  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: