Creating Path Annotations

Prerequisites

The path annotation lets you draw free-form graphic elements on your charts.

Take a look at the spline chart shown below:

FusionCharts should load here..

The rectangle drawn to highlight the lowest footfall is created using the path annotation.

The JSON structure for creating path annotations is given below:

{
    "chart": {
        …
    },
    "annotations": {
        "groups": [{
            "items": [{
                "type": “path”,
                //Define the attributes needed to create the path annotation
                …
            }]
        }]
    }
    …
}

The attributes used to create path annotations are:

Attribute Description
id Specifies a unique identification string for the path annotation.
type Specifies the type of annotation to be drawn. To draw a path, set this attribute to path.
path Specifies the path command and accepts standard SVG path format. For example, the path command "M 10, 10, L 100, 100" signifies that we start drawing from the coordinate at (10,10) pixel using M ( Move to) command and draw a line up to the coordinate (100,100) pixel as specified by the L (Line to) command.
x Specifies the x coordinate of the starting position of the path with respect to the leftmost position (taken as 0) of the chart.
y Specifies the y coordinate of the starting position of the path with respect to the topmost position (taken as 0) of the chart.
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).

The complete data structure for the chart with path annotations is given below:

...

Creating Shape Annotations