Positioning Annotations Using Absolute Values
Prerequisites
The FusionCharts XT annotation API lets you configure positions of annotations either during their creation or after rendering them on a chart/gauge. You can position annotation items by setting the positioning attributes (x, y, toX, toY, radius, and so on) to the required coordinates.
Annotations can be positioned using:
-
absolute values
-
macros - that take dynamic values relative to chart elements
This article describes how you can position annotations using static values.
A spline chart with a rectangle annotation and a text annotation positioned at the top-right corner of the canvas is shown below:
The code snippet to position the rectangle annotation is given below:
...
"annotations": {
...
"groups": [{
"items": [{
"id": "dyn-labelBG",
"type": "rectangle",
"radius": "3",
"x": "290",
"y": "60",
"tox": "390",
"toy": "90",
"color": "#0075c2",
"alpha": "70",
"origW": “400”,
"origH": “300”
},
...
]
}
]
}
...The attributes used for positioning annotations are:
| Attribute Name | Description |
|---|---|
|
Specifies the unique identification string for the group. |
|
Specifies the starting x coordinate position of the annotation with respect to the leftmost position (taken as 0) of the chart. |
|
Specifies the the starting y coordinate position of the annotation with respect to the topmost position (taken as 0) of the chart. |
|
Specifies the x coordinate of the ending position of the annotation with respect to the leftmost position (taken as zero) of the chart. This attribute is applicable only to the rectangle and line annotations. |
|
Specifies the y coordinate of the ending position of the annotation with respect to the topmost position (taken as zero) of the chart. This attribute is applicable only to the rectangle and line annotations. |
|
Specifies the original width of the chart, in which the annotation renders as intended. It is used as the reference width while automatically scaling annotations, it the event that a chart is resized. |
|
Specifies the original height of chart, in which the annotation renders as intended. It is used as the reference height while automatically scaling annotations, it the event that a chart is resized. |
|
The value of this attribute is added to the x coordinate position value of the final annotation items. When applying scaling, the value of this attribute is included within the scale factor. |
|
Like the |
The complete data structure needed to render the above chart is given below:
{
"chart": {
"caption": "Bakersfield Central - Total footfalls",
"subCaption": "Last week",
"xAxisName": "Day",
"yAxisName": "No. of Visitors",
"showValues": "1",
"showBorder": "1",
"showTooltip": "0",
"formatNumberScale": "1",
"theme": "fint"
},
"annotations": {
"groups": [
{
"items": [
{
"id": "dyn-labelBG",
"type": "rectangle",
"radius": "3",
"x": "290",
"y": "60",
"tox": "390",
"toy": "90",
"color": "#0075c2",
"alpha": "70",
"origW": "400",
"origH": "300"
},
{
"id": "dyn-label",
"type": "text",
"fillcolor": "#ffffff",
"fontsize": "10",
"x": "340",
"y": "75",
"text": "Total: 119, 507",
"origW": "400",
"origH": "300"
}
]
}
]
},
"data": [
{
"label": "Mon",
"value": "15123"
},
{
"label": "Tue",
"value": "14233"
},
{
"label": "Wed",
"value": "25507"
},
{
"label": "Thu",
"value": "9110"
},
{
"label": "Fri",
"value": "15529"
},
{
"label": "Sat",
"value": "20803"
},
{
"label": "Sun",
"value": "19202"
}
]
}