Text label alignment on annotations

[James_UK]

The text align and vAlign parameters seem to work wrong on annotations.

Example: given the fiddle http://jsfiddle.net/fusioncharts/bLxr4/  

1) to make it easier to see the effect, shorten the CalloutLabel text slightly to just 

"text": "Biggest Quarter"

2) add   "align":"left",   to CalloutLabel

When you run this, the text is seemingly aligned to the right.

Similarly align;right actually appears as left- alignment.

I'm not sure if this is an actual bug or some artifact resulting from placing the x co-ordinate at the column itself rather than using a pixel offset, i,e,

"x": "$dataset.0.set.1.x",

 

Thanks

James

{FC XT 3.12}

 

[Akash Biswas]

Hi James,

 

FusionCharts Text annotation item-level attribute "align" defines the horizontal alignment of the text to left, center (default), or right. This alignment is with respect to the position where it is placed.

 

In the provided fiddle, the Text annotation is placed on above another Rectangle(Shape) annotation. The text is positioned to the center of the column plot using the macro "$dataset.0.set.1.x". So, "align": "left" will align the text's leftmost character with respect to the position set using macros. and not with respect to the rectangle annotation. Similarly, the text's rightmost character is aligned with respect to the position, when using "align": "right".

 

Please refer to the modified fiddle(only having Text annotation aligned) : http://jsfiddle.net/Akash008/mvufjvy2/

Hope this helps. Feel free to ask if you still have any query regarding annotation alignment.

 

Thanks,

Akash.

[James_UK]

Hi Akash,

Yes I see. I thought it was something to do with positioning around a coordinate point (i.e.the origin - "x" and "y" - being a single point in space), which you have confirmed.

I was having difficulty understanding how to left-align the text over a dynamic (variably-sized) "calloutbase" rectangle, but now I can see how I need to do this. My confusion arose when specifying a toX and toY (wrapWidth & wrapHeight) which I mentally pictured as making a 'box' within which I thought the text would be aligned. I see now the alignment only relates to X,Y and ignores toX,toY.

Thanks for taking the time to explain this to me.

James