Creating Image Annotations - FusionCharts XT Suite Documentation

Prerequisites

A column 2D chart rendered using image annotations is shown below:

FusionCharts should load here..

In this chart, images of brands are shown instead of the conventional 2D column data plots. Using these annotations makes the chart more intuitive while also increasing its visual appeal. Imagine how easy it becomes for your audience to read data in a chart like this, especially if the data is for a large number of brands.

The JSON structure for creating image annotations is given below:

"chart": {
    ...
},
"annotations": {
    "groups": [{
        "items": [{
            //Image 1
            "type": “image”,
            //Define the attributes needed to create the image annotation
            ...
        }, {
            //Image 2
            "type": “image”,
            //Define the attributes needed to create the image annotation
            ...
        },
        ...
        {
            //Image *n*
            "type": “image”,
            //Define the attributes needed to create the image annotation
            ...
        }]
    }]
}

The attributes used to create image annotations are:

Attribute	Description
`id`	Specifies a unique identification string for each annotation item.
`type`	Specifies the type of annotation. Set this attribute to `image`.
`url`	Specifies the location of the image file (JPEG, PNG, or GIF) that should be rendered on the chart. Chart rendering does not pause for the images to load and, therefore, asynchronously draws them as and when they are loaded. In case you need to load them instantaneously, you may considering preloading the images.
`x`	Specifies the x coordinate of the starting position of the image annotation with respect to the leftmost position (taken as 0) of the chart.
`y`	Specifies the y coordinate of the starting position of the image annotation with respect to the topmost position (taken as 0) of the chart.
`xScale`	Specifies the resize value for the image width.
`yScale`	Specifies the resize value for the image height.
`alpha`	Specifies the transparency of the annotation. This attribute takes values between 0 (transparent) and 100 (opaque, default).

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

JSON
XML

...