Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

Prerequisites

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

Take a look at the spline chart shown below:

FusionCharts will 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:

{ "chart": { "caption": "Total footfall in Bakersfield Central", "subCaption": "Last week", "xAxisName": "Day", "yAxisName": "No. of Footfalls", "paletteColors": "#008ee4", "bgAlpha": "0", "borderAlpha": "20", "canvasBorderAlpha": "0", "usePlotGradientColor": "0", "plotBorderAlpha": "10", "showValues": "0", "valueFontColor": "#ffffff", "showXAxisLine": "1", "LabelPadding": "50", "axisLineAlpha": "25", "divLineAlpha": "10", "showAlternateHGridColor": "0" }, "annotations": { "origw": "400", "origh": "300", "autoscale": "1", "groups": [ { "showBelow": "0", "items": [ { "id": "label", "type": "text", "text": "Lowest footfall 9.11K", "fillcolor": "#6baa01", "rotate": "90", "x": "$canvasEndX - 135", "y": "$dataset.0.set.3.y + 15" }, { "id": "Line path1", "type": "path", "path": "M -10, -10, L -10, 10, L 10, 10, L 10, -10, L -10, -10", "x": "$dataset.0.set.3.x", "y": "$dataset.0.set.3.y" } ] } ] }, "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": {
        "caption": "Total footfall in Bakersfield Central",
        "subCaption": "Last week",
        "xAxisName": "Day",
        "yAxisName": "No. of Footfalls",
        "paletteColors": "#008ee4",
        "bgAlpha": "0",
        "borderAlpha": "20",
        "canvasBorderAlpha": "0",
        "usePlotGradientColor": "0",
        "plotBorderAlpha": "10",
        "showValues": "0",
        "valueFontColor": "#ffffff",
        "showXAxisLine": "1",
        "LabelPadding": "50",
        "axisLineAlpha": "25",
        "divLineAlpha": "10",
        "showAlternateHGridColor": "0"
    },
    "annotations": {
        "origw": "400",
        "origh": "300",
        "autoscale": "1",
        "groups": [
            {
                "showBelow": "0",
                "items": [
                    {
                        "id": "label",
                        "type": "text",
                        "text": "Lowest footfall 9.11K",
                        "fillcolor": "#6baa01",
                        "rotate": "90",
                        "x": "$canvasEndX - 135",
                        "y": "$dataset.0.set.3.y + 15"
                    },
                    {
                        "id": "Line path1",
                        "type": "path",
                        "path": "M -10, -10, L -10, 10, L 10, 10, L 10, -10, L -10, -10",
                        "x": "$dataset.0.set.3.x",
                        "y": "$dataset.0.set.3.y"
                    }
                ]
            }
        ]
    },
    "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