Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

Prerequisites

You can use text annotations to add notes, labels, or any other contextual text information that you may want to make available to your users.

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

FusionCharts will load here..

The text Promotional activities for Butterfinger made it surpass Snickers, the highest selling brand for 3 years is a text annotation. Adding this text to the chart makes it self-descriptive and easy for a user to understand the chart. You can add multiple text annotations on a chart that can be notes, labels, or any text that adds more context to the chart.

The JSON structure for creating text annotations is given below:

"chart": {
    ...
},
"annotations": {
    "groups": [{
        "items": [{
            //Text annotation 1
            "type": text,
            //Define the attributes needed to create a text annotation
            ...
        },
        ...
        {
            //Text annotation *n*
            "type": text,
            //Define the attributes needed to create a text annotation
            ...
        }]
    }]
}

The attributes used to create text annotations are:

Attribute Name Description

id

Specifies a unique identification for the annotation. This id is used to identify and change other properties of the annotation.

type

Specifies the type of annotation to be rendered. Set this attribute to text.

text

Specifies the text that is to be rendered as the annotation.

x

Specifies the x coordinate of the position of the text annotation with respect to the leftmost position (taken as zero) of the chart.

y

Specifies the y coordinate of the position of the text annotation with respect to the topmost position (taken as zero) of the chart.

font

Specifies the font family for the text annotation.

fontSize

Specifies the font size for the text annotation.

align

Specifies the horizontal alignment of the text annotation. This attribute takes left, center (default), and right as values.

vAlign

Specifies the vertical alignment of the text annotation. This attribute takes top, middle (default), and bottom as values.

bold

Specifies whether the text will be in bold. Setting this attribute to 1 renders the text in bold, setting it to 0 (default) removes the bold formatting.

italic

Specifies whether the text will be in italic. Setting this attribute to 1 renders the text in italic, setting it to 0 (default) removes the italic formatting.

color

Specifies the hex color code for the text annotation. For example, setting this attribute to #6baa01 will render the text in the annotation in green.
The default value is #ff0000.

alpha

Specifies the transparency of the annotation. This attribute takes values between 0 (transparent) and 100 (opaque, default).

bgColor

Specifies the hex color code for the text annotation’s background. For example, a value of #fcfc00 colors the background yellow.

leftMargin

Sets a fixed margin, in pixels, to the left of the text.

rotateText

Specifies whether the text annotation(s) will be rotated. This attribute takes 0 (default), 1, left, and right as values.

wrap

Specifies whether text wrapping will be enabled. Setting this attribute to 1 will enable text wrapping, setting it to 0 (default) will disable it.

wrapWidth

Specifies the width wrapping dimension for the text. When this width is reached, it will cause the text to break into a new line.
The toX and toY attributes can also be set on text if text wrapping dimensions are provided in absolute pixels from annotation group’s origin coordinates.

wrapHeight

Like the wrapWidth attribute, this attribute applies to the height occupied by the text. Ellipses are appended to the end of text when text overflows beyond allocated vertical space of wrapHeight or toY attributes.

The complete data structure for the column 2D chart with the text annotation 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