Loading

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:

{ "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"
        }
    ]
}
Top