Creating Text Annotations
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:
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 |
|---|---|
|
Specifies a unique identification for the annotation. This |
|
Specifies the type of annotation to be rendered. Set this attribute to |
|
Specifies the text that is to be rendered as the annotation. |
|
Specifies the x coordinate of the position of the text annotation with respect to the leftmost position (taken as zero) of the chart. |
|
Specifies the y coordinate of the position of the text annotation with respect to the topmost position (taken as zero) of the chart. |
|
Specifies the font family for the text annotation. |
|
Specifies the font size for the text annotation. |
|
Specifies the horizontal alignment of the text annotation. This attribute takes |
|
Specifies the vertical alignment of the text annotation. This attribute takes |
|
Specifies whether the text will be in bold. Setting this attribute to |
|
Specifies whether the text will be in italic. Setting this attribute to |
|
Specifies the hex color code for the text annotation. For example, setting this attribute to |
|
Specifies the transparency of the annotation. This attribute takes values between 0 (transparent) and 100 (opaque, default). |
|
Specifies the hex color code for the text annotation’s background. For example, a value of |
|
Sets a fixed margin, in pixels, to the left of the text. |
|
Specifies whether the text annotation(s) will be rotated. This attribute takes |
|
Specifies whether text wrapping will be enabled. Setting this attribute to |
|
Specifies the width wrapping dimension for the text. When this width is reached, it will cause the text to break into a new line. |
|
Like the |
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"
}
]
}