Loading

Annotations are user-defined objects or shapes drawn on a chart. Annotations are often required to make interpretation of the chart easy for the end user. This section will teach you how to create different shapes, images, and text annotations for use with your chart.

Annotations as part of FusionCharts Suite XT are defined inside the annotations object. This object has an array of groups, with each group element having a unique id. The groups object contains an array of items, each item contains information on one specific annotation in the chart. Having annotations organised in groups is useful when manipulating multiple annotations at once through API calls.

Shown below is a code snippet showing a the structure of a simple annotations object.

<html>
<body></body>
</html>
"annotations": {

               "groups": [

                   {

                       "id": "custom-group-1",

                       "items": [

                           {

                            // Item definition goes here

                           },

                           {

                            // Item definition goes here

                           },

                           ]

                   },

                   {

                       "id": "custom-group-2",

                       "items": [

                           {

                            // Item definition goes here

                           },

                           {

                            // Item definition goes here

                           },

                           ]

                   },

                   ]

}

Using shapes in an annotation

Line Annotation

The simplest type of annotation is a line shaped annotation. The chart shown below has a simple dashed line and a label that highlights the point with the highest value over the week

FusionCharts will load here..

The attributes used to customize the annotation are:

Name Description

type

If set to line, it renders a rectangle annotation.

x

It specifies the starting x-coordinate for the annotation. This x co-ordinate is relative to the x co-ordinate of the annotation group in which the annotation is placed.

y

It specifies the starting y-coordinate for the annotation. This y co-ordinate is relative to the y co-ordinate of the annotation group in which the annotation is placed.

toX

It specifies the ending x-coordinate for the annotation. This x co-ordinate is relative to the x co-ordinate of the annotation group in which the annotation is placed.

toY

It specifies the ending y-coordinate for the annotation. This y co-ordinate is relative to the y co-ordinate of the annotation group in which the annotation is placed.

thickness

It specifies the thickness of the line annotation.

color

It specifies the hex code for the color that will be used to render the line annotation.

dashed

It specifies if the line must be dashed or not.

alpha

It specifies the transparency for the annotation.

The data structure of this annotation is shown here

{ "chart": { "theme": "fint", "caption": "Bakersfield Central - Total footfalls", "subCaption": "Last week", "xAxisName": "Day", "yAxisName": "No. of Visitors", "showValues": "0" }, "annotations": { "groups": [ { "id": "infobar", "items": [ { "id": "high-line", "type": "line", "x": "$canvasStartX", "y": "$dataset.0.set.2.y", "tox": "$canvasEndX", "toy": "$dataset.0.set.2.y", "color": "#6baa01", "dashed": "1", "thickness": "1" }, { "id": "label", "type": "text", "text": "Highest footfall 25.5K", "fillcolor": "#6baa01", "rotate": "90", "x": "$canvasEndX - 60", "y": "$dataset.0.set.2.y - 10" } ] } ] }, "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" } ] }
{
    "chart": {
        "theme": "fint",
        "caption": "Bakersfield Central - Total footfalls",
        "subCaption": "Last week",
        "xAxisName": "Day",
        "yAxisName": "No. of Visitors",
        "showValues": "0"
    },
    "annotations": {
        "groups": [
            {
                "id": "infobar",
                "items": [
                    {
                        "id": "high-line",
                        "type": "line",
                        "x": "$canvasStartX",
                        "y": "$dataset.0.set.2.y",
                        "tox": "$canvasEndX",
                        "toy": "$dataset.0.set.2.y",
                        "color": "#6baa01",
                        "dashed": "1",
                        "thickness": "1"
                    },
                    {
                        "id": "label",
                        "type": "text",
                        "text": "Highest footfall 25.5K",
                        "fillcolor": "#6baa01",
                        "rotate": "90",
                        "x": "$canvasEndX - 60",
                        "y": "$dataset.0.set.2.y - 10"
                    }
                ]
            }
        ]
    },
    "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"
        }
    ]
}

Circle Annotation

The same annotation as shown above can be drawn using a circle that shows the highest value for the week. The chart looks like this

FusionCharts will load here..

Given below is the list of attributes used to draw and configure a circle annotation:

Attribute Description

type

If set to circle, it renders a circle annotation.

x

It specifies the center x-coordinate for the annotation. This x co-ordinate is relative to the x co-ordinate of the annotation group in which the annotation is placed.

y

It specifies the center y-coordinate for the annotation. This y co-ordinate is relative to the y co-ordinate of the annotation group in which the annotation is placed.

radius

It specifies the radius of the circle.

yRadius

if specifies the y-radius of the circle that allows you to stretch or compress the annotation vertically.

color

It specifies the hex code for the color that will be used to render the circle annotation.

alpha

It specifies the transparency for the annotation.

startAngle

It specifies the starting angle for the circle annotation.

endAngle

It specifies the ending angle for the circle annotation.

The data structure of this annotation is shown here

{ "chart": { "theme": "fint", "caption": "Bakersfield Central - Total footfalls", "subCaption": "Last week", "xAxisName": "Day", "yAxisName": "No. of Visitors (In 1000s)", "showValues": "0" }, "annotations": { "groups": [ { "id": "anchor-highlight", "items": [ { "id": "high-star", "type": "circle", "x": "$dataset.0.set.2.x", "y": "$dataset.0.set.2.y", "radius": "12", "color": "#6baa01", "border": "2", "borderColor": "#f8bd19" }, { "id": "label", "type": "text", "text": "Highest footfall 25.5K", "fillcolor": "#6baa01", "rotate": "90", "x": "$dataset.0.set.2.x+75", "y": "$dataset.0.set.2.y-2" } ] } ] }, "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" } ] }
{
    "chart": {
        "theme": "fint",
        "caption": "Bakersfield Central - Total footfalls",
        "subCaption": "Last week",
        "xAxisName": "Day",
        "yAxisName": "No. of Visitors (In 1000s)",
        "showValues": "0"
    },
    "annotations": {
        "groups": [
            {
                "id": "anchor-highlight",
                "items": [
                    {
                        "id": "high-star",
                        "type": "circle",
                        "x": "$dataset.0.set.2.x",
                        "y": "$dataset.0.set.2.y",
                        "radius": "12",
                        "color": "#6baa01",
                        "border": "2",
                        "borderColor": "#f8bd19"
                    },
                    {
                        "id": "label",
                        "type": "text",
                        "text": "Highest footfall 25.5K",
                        "fillcolor": "#6baa01",
                        "rotate": "90",
                        "x": "$dataset.0.set.2.x+75",
                        "y": "$dataset.0.set.2.y-2"
                    }
                ]
            }
        ]
    },
    "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"
        }
    ]
}

Using images in an annotation

You can specify the url to an image instead of a shape. Shown below is an example where images are used for the annotations

FusionCharts will load here..

Given below is the list of attributes used to configure an image annotation:

Attribute Description

type

If set to image, it renders an image annotation.

x

It specifies the center x-coordinate for the annotation. This x coordinate is relative to the x coordinate of the annotation group in which the annotation is placed.

y

It specifies the center y-coordinate for the annotation. This y coordinate is relative to the y coordinate of the annotation group in which the annotation is placed.

url

It specifies the relative path of the image to be used as annotation.

The data structure of this annotation is shown here

{ "chart": { "caption": "Revenue by store managers", "subCaption": "Last quarter", "xAxisName": "Managers", "yAxisName": "Revenue (In USD)", "numberPrefix": "$", "theme": "fint", "LabelPadding": "50" }, "annotations": { "groups": [ { "id": "user-images", "items": [ { "id": "jennifer-user-icon", "type": "image", "url": "http://static.fusioncharts.com/sampledata/images/round-1.png", "x": "$xaxis.label.0.x - 24", "y": "$xaxis.label.0.y - 48" }, { "id": "tom-user-icon", "type": "image", "url": "http://static.fusioncharts.com/sampledata/images/round-3.png", "x": "$xaxis.label.1.x - 24", "y": "$xaxis.label.1.y - 48" }, { "id": "Milton-user-icon", "type": "image", "url": "http://static.fusioncharts.com/sampledata/images/round-4.png", "x": "$xaxis.label.2.x - 24", "y": "$xaxis.label.2.y - 48" }, { "id": "Brian-user-icon", "type": "image", "url": "http://static.fusioncharts.com/sampledata/images/round-5.png", "x": "$xaxis.label.3.x - 24", "y": "$xaxis.label.3.y - 48" }, { "id": "Lynda-user-icon", "type": "image", "url": "http://static.fusioncharts.com/sampledata/images/round-2.png", "x": "$xaxis.label.4.x - 24", "y": "$xaxis.label.4.y - 48" } ] } ] }, "data": [ { "label": "Jennifer", "value": "92000" }, { "label": "Tom", "value": "87000" }, { "label": "Milton", "value": "83000" }, { "label": "Brian", "value": "66000" }, { "label": "Lynda", "value": "58000" } ] }
{
    "chart": {
        "caption": "Revenue by store managers",
        "subCaption": "Last quarter",
        "xAxisName": "Managers",
        "yAxisName": "Revenue (In USD)",
        "numberPrefix": "$",
        "theme": "fint",
        "LabelPadding": "50"
    },
    "annotations": {
        "groups": [
            {
                "id": "user-images",
                "items": [
                    {
                        "id": "jennifer-user-icon",
                        "type": "image",
                        "url": "http://static.fusioncharts.com/sampledata/images/round-1.png",
                        "x": "$xaxis.label.0.x - 24",
                        "y": "$xaxis.label.0.y - 48"
                    },
                    {
                        "id": "tom-user-icon",
                        "type": "image",
                        "url": "http://static.fusioncharts.com/sampledata/images/round-3.png",
                        "x": "$xaxis.label.1.x - 24",
                        "y": "$xaxis.label.1.y - 48"
                    },
                    {
                        "id": "Milton-user-icon",
                        "type": "image",
                        "url": "http://static.fusioncharts.com/sampledata/images/round-4.png",
                        "x": "$xaxis.label.2.x - 24",
                        "y": "$xaxis.label.2.y - 48"
                    },
                    {
                        "id": "Brian-user-icon",
                        "type": "image",
                        "url": "http://static.fusioncharts.com/sampledata/images/round-5.png",
                        "x": "$xaxis.label.3.x - 24",
                        "y": "$xaxis.label.3.y - 48"
                    },
                    {
                        "id": "Lynda-user-icon",
                        "type": "image",
                        "url": "http://static.fusioncharts.com/sampledata/images/round-2.png",
                        "x": "$xaxis.label.4.x - 24",
                        "y": "$xaxis.label.4.y - 48"
                    }
                ]
            }
        ]
    },
    "data": [
        {
            "label": "Jennifer",
            "value": "92000"
        },
        {
            "label": "Tom",
            "value": "87000"
        },
        {
            "label": "Milton",
            "value": "83000"
        },
        {
            "label": "Brian",
            "value": "66000"
        },
        {
            "label": "Lynda",
            "value": "58000"
        }
    ]
}

Image scaling

It may be required at times to scale images based on chart specific requirements, in some cases you may want to keep one image to scale while scaling up or down other images based on the data being shown.

Shown here is an example where the images are scaled

FusionCharts will load here..

Given below is a brief description of the attributes used to scaling in an image annotation

Attribute Description

xScale

It specifies the percentage according to which the width of the image is scaled.

yScale

It specifies the percentage according to which the height of the image is scaled.

The data structure used in the chart above to configure scaling of annotations is as follows:

{ "chart": { "caption": "Top 4 Chocolate Brands Sold", "subCaption": "Last Year", "xAxisName": "Brand", "yAxisName": "Amount (In USD)", "yAxisMaxValue": "120000", "numberPrefix": "$", "theme": "fint", "PlotfillAlpha": "0", "placeValuesInside": "0", "rotateValues": "0", "valueFontColor": "#333333" }, "annotations": { "width": "500", "height": "300", "autoScale": "1", "groups": [ { "id": "user-images", "xScale_": "20", "yScale_": "20", "items": [ { "id": "butterFinger-icon", "type": "image", "url": "http://static.fusioncharts.com/sampledata/images/butterFinger.png", "x": "$xaxis.label.0.x - 30", "y": "$canvasEndY - 150", "xScale": "50", "yScale": "40" }, { "id": "tom-user-icon", "type": "image", "url": "http://static.fusioncharts.com/sampledata/images/snickrs.png", "x": "$xaxis.label.1.x - 26", "y": "$canvasEndY - 141", "xScale": "48", "yScale": "38" }, { "id": "Milton-user-icon", "type": "image", "url": "http://static.fusioncharts.com/sampledata/images/coffee_crisp.png", "x": "$xaxis.label.2.x - 22", "y": "$canvasEndY - 134", "xScale": "43", "yScale": "36" }, { "id": "Brian-user-icon", "type": "image", "url": "http://static.fusioncharts.com/sampledata/images/100grand.png", "x": "$xaxis.label.3.x - 22", "y": "$canvasEndY - 131", "xScale": "43", "yScale": "35" } ] } ] }, "data": [ { "label": "Butterfinger", "value": "92000" }, { "label": "Snickers", "value": "87000" }, { "label": "Coffee Crisp", "value": "83000" }, { "label": "100 Grand", "value": "80000" } ] }
{
    "chart": {
        "caption": "Top 4 Chocolate Brands Sold",
        "subCaption": "Last Year",
        "xAxisName": "Brand",
        "yAxisName": "Amount (In USD)",
        "yAxisMaxValue": "120000",
        "numberPrefix": "$",
        "theme": "fint",
        "PlotfillAlpha": "0",
        "placeValuesInside": "0",
        "rotateValues": "0",
        "valueFontColor": "#333333"
    },
    "annotations": {
        "width": "500",
        "height": "300",
        "autoScale": "1",
        "groups": [
            {
                "id": "user-images",
                "xScale_": "20",
                "yScale_": "20",
                "items": [
                    {
                        "id": "butterFinger-icon",
                        "type": "image",
                        "url": "http://static.fusioncharts.com/sampledata/images/butterFinger.png",
                        "x": "$xaxis.label.0.x - 30",
                        "y": "$canvasEndY - 150",
                        "xScale": "50",
                        "yScale": "40"
                    },
                    {
                        "id": "tom-user-icon",
                        "type": "image",
                        "url": "http://static.fusioncharts.com/sampledata/images/snickrs.png",
                        "x": "$xaxis.label.1.x - 26",
                        "y": "$canvasEndY - 141",
                        "xScale": "48",
                        "yScale": "38"
                    },
                    {
                        "id": "Milton-user-icon",
                        "type": "image",
                        "url": "http://static.fusioncharts.com/sampledata/images/coffee_crisp.png",
                        "x": "$xaxis.label.2.x - 22",
                        "y": "$canvasEndY - 134",
                        "xScale": "43",
                        "yScale": "36"
                    },
                    {
                        "id": "Brian-user-icon",
                        "type": "image",
                        "url": "http://static.fusioncharts.com/sampledata/images/100grand.png",
                        "x": "$xaxis.label.3.x - 22",
                        "y": "$canvasEndY - 131",
                        "xScale": "43",
                        "yScale": "35"
                    }
                ]
            }
        ]
    },
    "data": [
        {
            "label": "Butterfinger",
            "value": "92000"
        },
        {
            "label": "Snickers",
            "value": "87000"
        },
        {
            "label": "Coffee Crisp",
            "value": "83000"
        },
        {
            "label": "100 Grand",
            "value": "80000"
        }
    ]
}

Using text in an annotation

Shown here is a simple annotation with some text in a spline chart

FusionCharts will load here..

These are the attributes that help customize annotation text:

Attribute Description

type

If set to text, it renders a text annotation.

x

It specifies the center x-coordinate for the annotation. This x coordinate is relative to the x coordinate of the annotation group in which the annotation is placed.

y

It specifies the center y-coordinate for the annotation. This y coordinate is relative to the y coordinate of the annotation group in which the annotation is placed.

label

It specifies the text to render as the annotation.

color

It specifies the hex code of the color that will be used to render the text annotation.

{ "chart": { "theme": "fint", "caption": "Bakersfield Central - Total footfalls", "subCaption": "Last week", "xAxisName": "Day", "yAxisName": "No. of Visitors", "showValues": "0" }, "annotations": { "groups": [ { "id": "infobar", "items": [ { "id": "high-line", "type": "line", "x": "$canvasStartX", "y": "$dataset.0.set.2.y", "tox": "$canvasEndX", "toy": "$dataset.0.set.2.y", "color": "#6baa01", "dashed": "1", "thickness": "1" }, { "id": "label", "type": "text", "text": "Highest footfall 25.5K", "fillcolor": "#6baa01", "rotate": "90", "x": "$canvasEndX - 60", "y": "$dataset.0.set.2.y - 10" } ] } ] }, "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" } ] }
{
    "chart": {
        "theme": "fint",
        "caption": "Bakersfield Central - Total footfalls",
        "subCaption": "Last week",
        "xAxisName": "Day",
        "yAxisName": "No. of Visitors",
        "showValues": "0"
    },
    "annotations": {
        "groups": [
            {
                "id": "infobar",
                "items": [
                    {
                        "id": "high-line",
                        "type": "line",
                        "x": "$canvasStartX",
                        "y": "$dataset.0.set.2.y",
                        "tox": "$canvasEndX",
                        "toy": "$dataset.0.set.2.y",
                        "color": "#6baa01",
                        "dashed": "1",
                        "thickness": "1"
                    },
                    {
                        "id": "label",
                        "type": "text",
                        "text": "Highest footfall 25.5K",
                        "fillcolor": "#6baa01",
                        "rotate": "90",
                        "x": "$canvasEndX - 60",
                        "y": "$dataset.0.set.2.y - 10"
                    }
                ]
            }
        ]
    },
    "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"
        }
    ]
}
Top