views:

22

answers:

0

I'm trying to add a label at the bottom, or just below, a (horizontal) Flex 3 BarChart, as follows:

a |====  :
b |=     :
c |==    :
       label

(The equals are the bars of the bar chart; the colons represent a target line for which I want to add a label.)

There seems to be no straight-forward way to position this label at the bottom of the target line (which covers the full height of the chart). The problem is that the overlaid CartesianDataCanvas only understands positioning in terms of its chart's data, which is non-numeric categories for the vertical axis.

Here's what I currently have:

<mx:BarChart id="chart" width="100%" height="100%">
    ...
    <mx:backgroundElements>
        <mx:CartesianDataCanvas id="bgCanvas" includeInRanges="true" height="100%" width="100%"/>
    </mx:backgroundElements>
</mx:BarChart>

The target line is added to the above canvas as a UIComponent and then filled in with bitmap graphics (I'm simplifying here... it's not actually a solid line):

private function drawTargetLine():void {
    var targetLine:UIComponent = new UIComponent();
    targetLine.width = 20;
    targetLine.height = bgCanvas.height * 2;

    var left:Number = targetNumber; // eg 1000
    var bottom:Number = bgCanvas.localToData(new Point(0, bgCanvas.height))[1];
    bgCanvas.addDataChild(targetLine, left, null, null, new CartesianCanvasValue(bottom, bgCanvas.height));

    ...

    var g:Graphics = targetLine.graphics;
    g.beginBitmapFill(bitmapData); // omitting some detail here
    g.drawRect(0, 0, targetLine.width, targetLine.height);
    g.endFill();
}

Some things I've tried:

  1. adding a Label directly to the bgCanvas
    • problem is y coordinates are always off... I need to position label directly below targetLine
  2. adding an below the actual chart and setting its x position to match the targetLine
    • can't seem to get accurate x position... tried contentToGlobal and dataToLocal

Is this possible in Flex? Perhaps there's an easier way to accomplish what I need to?