Creating Shape Annotations

Prerequisites

FusionCharts Suite XT lets you draw annotations in any of the following shapes:

Rectangle
Polygon
Line
Circle
Arc

Take a look at the column 2D chart shown below:

FusionCharts will load here..

The rectangle around the text is a shape annotation.

The JSON structure for creating image annotations is given below:

"chart": {
        ...
},
"annotations": {
    "groups": [{
        "items": [{
          //Shape 1
            "type": ""//appropriate value according to required shape type, discussed later in this article,
            ...
        }, {
            //Shape 2
            "type": ""//appropriate value according to required shape type, discussed later in this article,
            ...
        }, {
          //Shape *n*
            "type": ""//appropriate value according to required shape type, discussed later in this article,
            ...
        }]
    }]
}

FusionCharts Suite XT includes several attributes to create and customize shape annotations. While many of these attributes are common to all shapes, some attributes work for only specific shapes.

For ease of understanding, therefore, the attributes have been divided into two sections:

Common attributes
Adhoc attributes

The complete data structure that shows how you use these attributes is given at the end of this article.

Common Attributes

Attribute Name	Description
`id`	Specifies a unique identification for the annotation. This `id` is used to identify and change other properties of the annotation. This attribute is applicable to all annotation items.
`type`	Specifies the type of annotation to be drawn.
`color`	Specifies the hex color code for the annotation. For example, setting this attribute to `#6baa01` will draw an annotation in the green color. The default value is `#ff0000`.
`alpha`	Specifies the transparency of the annotation. This attribute takes values between 0 (transparent) and 100 (opaque, default).
`showBorder`	Specifies whether a border will be shown around the annotation. Setting this attribute to `1` shows the border, setting it to `0` (default) hides it.
`borderColor`	Specifies the hex color code for the annotation border. For example, setting this attribute to `#f8bd19` will show a yellow border around the annotation. This attribute is not applicable to the line annotation.
`borderAlpha`	Specifies the transparency of the annotation border. This attribute takes values between 0 (transparent) and 100 (opaque, default). This attribute is not applicable to the line annotation.
`borderThickness`	Specifies the thickness of the annotation border, in pixels. The default value is 2 pixels. This attribute is not applicable to the line annotation.
`dashed`	Specifies whether the annotation border will be drawn using dashed lines. Setting this attribute to `1` will render the border using dashed lines, setting it to `0` (default) will render it using whole lines. For the line annotation, it renders the annotation itself as a dashed line.
`dashLen`	Specifies the length of each dash, if a dashed border is drawn around the annotation.
`dashGap`	Specifies the gap between each dash, if a dashed border is drawn around the annotation.

Adhoc Attributes

Rectangle

A rectangle annotation will look as under:

image rectangle

The attributes used to configure a rectangle annotation are:

Attribute Name	Description
`type`	Set this attribute to `rectangle`.
`x`	Specifies the x coordinate of the starting position of the rectangle with respect to the leftmost position (taken as zero) of the chart.
`y`	Specifies the y coordinate of the starting position of the rectangle with respect to the topmost position (taken as zero) of the chart.
`toX`	Specifies the x coordinate of the ending position of the rectangle with respect to the leftmost position (taken as zero) of the chart.
`toY`	Specifies the y coordinate of the ending position of the rectangle with respect to the topmost position (taken as zero) of the chart.
`radius`	Specifies the radius of the edges of a rectangle, in pixels. This attribute is used when you want to render the annotation as a rounded rectangle.

Polygon

A polygon annotation will look as under:

image polygon

The attributes used to configure a line annotation are:

Attribute Name	Description
`type`	Set it to `polygon`.
`sides`	Specifies the number of sides for the polygon. Its value must be greater than 2.
`x`	Specifies the x coordinate of the center of the polygon with respect to the leftmost position (taken as zero) of the chart.
`y`	Specifies the y coordinate of the center of the polygon with respect to the topmost position (taken as zero) of the chart.
`radius`	Specifies the radius of the edges of a polygon, in pixels.

Line

A line annotation will look as under:

image alt text

The attributes used to configure a line annotation are:

Attribute Name	Description
`type`	Set this attribute to `line`.
`x`	Specifies the x coordinate of the starting position of the line with respect to the leftmost position (taken as zero) of the chart.
`y`	Specifies the y coordinate of the starting position of the line with respect to the topmost position (taken as zero) of the chart.
`toX`	Specifies the x coordinate of the ending position of the line with respect to the leftmost position (taken as zero) of the chart.
`toY`	Specifies the y coordinate of the ending position of the line with respect to the topmost position (taken as zero) of the chart.
`thickness`	Specifies the thickness of the line, in pixels.

Circle

A circle annotation will look as under:

image alt text

The attributes used to configure a circle annotation are:

Attribute Name	Description
`type`	Set this attribute to `circle`.
`x`	Specifies the x coordinate of the center of the circle with respect to the leftmost position (taken as zero) of the chart.
`y`	Specifies the y coordinate of the center of the circle with respect to the topmost position (taken as zero) of the chart.
`radius`	Specifies the radius of the circle, in pixels.
`yRadius`	Specifies the height, in pixels, if you want to draw an oval annotation.

Arc

An arc is suitable to draw doughnut like shapes or a slice of it. It can be used to highlight a slice of a pie chart, a doughnut chart, or an angular gauge.

An arc annotation will look as under:

image alt text

The attributes used to configure an arc annotation are:

Attribute Name	Description
`type`	Set this attribute to `arc`.
`x`	Specifies the x coordinate of the center of the arc with respect to the leftmost position (taken as zero) of the chart.
`y`	Specifies the y coordinate of the center of the arc with respect to the topmost position (taken as zero) of the chart.
`radius`	Specifies the outer radius of the arc, in pixels.
`innerRadius`	Specifies the inner radius of the arc, in pixels.
`startAngle`	Specifies the starting angle of the arc, in degrees. This attribute takes values between 0 (default) and 360.
`endAngle`	Specifies the ending angle of the arc, in degrees. This attribute takes values between 0 (default) and 360.

Complete Data Structure

The complete data structure for the column 2D chart with image annotations is given below:

JSON
XML

{ "chart": { "caption": "Sales figures for top 4 chocolate brands - FY2013-2014", "subCaption": "Harry's SuperMart", "xAxisName": "Brand", "yAxisName": "Amount (In USD)", "yAxisMaxValue": "120000", "numberPrefix": "$", "theme": "fint", "chartBottomMargin": "70", "PlotfillAlpha": "100", "placeValuesInside": "1", "rotateValues": "0", "valueFontColor": "#333333", "valuePadding": "-10" }, "annotations": { "width": "500", "height": "300", "autoScale": "1", "groups": [ { "id": "user-images", "items": [ { "id": "dyn-label-bg", "type": "rectangle", "showBorder": "1", "borderColor": "12345d", "fillcolor": "ffffff", "x": "$canvasEndY-245", "y": "$canvasEndY+45", "tox": "$canvasEndX+10", "toy": "$canvasEndY + 80" }, { "id": "dyn-label", "type": "text", "fillcolor": "#000000", "fontsize": "11", "text": "Promotional activities for Butterfinger made it surpass Snickers, the highest selling brand for 3 years", "bold": "1", "wrap": "1", "wrapWidth": "350", "x": "$canvasEndY-72", "y": "$canvasEndY + 60" } ] } ] }, "data": [ { "label": "Butterfinger", "value": "92000" }, { "label": "Snickers", "value": "87000" }, { "label": "Coffee Crisp", "value": "83000" }, { "label": "100 Grand", "value": "80000" } ] }

{
    "chart": {
        "caption": "Sales figures for top 4 chocolate brands - FY2013-2014",
        "subCaption": "Harry's SuperMart",
        "xAxisName": "Brand",
        "yAxisName": "Amount (In USD)",
        "yAxisMaxValue": "120000",
        "numberPrefix": "$",
        "theme": "fint",
        "chartBottomMargin": "70",
        "PlotfillAlpha": "100",
        "placeValuesInside": "1",
        "rotateValues": "0",
        "valueFontColor": "#333333",
        "valuePadding": "-10"
    },
    "annotations": {
        "width": "500",
        "height": "300",
        "autoScale": "1",
        "groups": [
            {
                "id": "user-images",
                "items": [
                    {
                        "id": "dyn-label-bg",
                        "type": "rectangle",
                        "showBorder": "1",
                        "borderColor": "12345d",
                        "fillcolor": "ffffff",
                        "x": "$canvasEndY-245",
                        "y": "$canvasEndY+45",
                        "tox": "$canvasEndX+10",
                        "toy": "$canvasEndY + 80"
                    },
                    {
                        "id": "dyn-label",
                        "type": "text",
                        "fillcolor": "#000000",
                        "fontsize": "11",
                        "text": "Promotional activities for Butterfinger made it surpass Snickers, the highest selling brand for 3 years",
                        "bold": "1",
                        "wrap": "1",
                        "wrapWidth": "350",
                        "x": "$canvasEndY-72",
                        "y": "$canvasEndY + 60"
                    }
                ]
            }
        ]
    },
    "data": [
        {
            "label": "Butterfinger",
            "value": "92000"
        },
        {
            "label": "Snickers",
            "value": "87000"
        },
        {
            "label": "Coffee Crisp",
            "value": "83000"
        },
        {
            "label": "100 Grand",
            "value": "80000"
        }
    ]
}