Annotations are user-defined objects or shapes drawn on a chart. Annotations are often required to make interpretation of the chart easy for the end user. Canvas allows the user to include annotations on the charts.
User need to provide the details of the annotation in Chart Annotation section on View Definition page. The details of the annotation should be in JSON format. The JSON should start and end with an array [] and it should contain object in between {}.
Annotations can be represented as Text or Images in combination with shapes such as arc, circle, rectangle, and line. A sample JSON to display a text with a circle is as follows:
Sample JSONs:
To print text:
{
"type": "text",
"textcolor": "#AED6F1",
"textbgcolor": "#A9E96C",
"text": "pre-profit",
"labelAlign": "top",
"value": "80,000",
"hposition": "right",
"vposition": "bottom",
"fontsize": "20",
"wrapText": true,
"id": "tt2"
}
To print image:
{
"type": "image",
"id": "img1",
"hposition": "left",
"vposition": "top",
"url": "images/4.png",
"width": "150",
"height": "250"
}
To print arc:
{
"type": "arc",
"textcolor": "#AED6F1",
"startAngle": "0",
"endAngle": "270",
"radius": "30",
"innerRadius": "25",
"hposition": "right",
"vposition": "middle",
"fontsize": "20",
"id": "tt1"
}
To print circle:
{
"type": "circle",
"radius": "10",
"textcolor": "#AED6F1",
"textbgcolor": "#ffffff",
"hposition": "right",
"vposition": "top"
}
To print rectangle/line:
{
"type": "rectangle/line",
"textcolor": "#AED6F1",
"hposition": "left_corner",
"vposition": "middle",
"h1position": "middle",
"v1position": "middle",
"fontsize": "20",
"id": "tt21"
}
To Print Polygon:
{
"type": "polygon",
"radius": "20",
"textcolor": "#AED6F1",
"textbgcolor": "#ffffff",
"hposition": "left",
"vposition": "bottom",
"sides": ">2"
}