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:
| Code Block | ||
|---|---|---|
| ||
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" } |
...
| Code Block |
|---|
To print image: |
...
{ |
...
"type": "image", |
...
"id": "img1", |
...
"hposition": "left", |
...
"vposition": "top", |
...
"url": "images/4.png", |
...
"width": "150", |
...
"height": "250" } |
...
| Code Block |
|---|
To print arc: |
...
{ |
...
"type": "arc", |
...
"textcolor": "#AED6F1", |
...
"startAngle": "0", |
...
"endAngle": "270", |
...
"radius": "30", |
...
"innerRadius": "25", |
...
"hposition": "right", |
...
"vposition": "middle", |
...
"fontsize": "20", |
...
"id": "tt1" } |
...
| Code Block |
|---|
To print circle: |
...
{ |
...
"type": "circle", |
...
"radius": "10", |
...
"textcolor": "#AED6F1", |
...
"textbgcolor": "#ffffff", |
...
"hposition": "right", |
...
"vposition": "top" } |
...
| Code Block |
|---|
To print rectangle/line: |
...
{ |
...
"type": "rectangle/line", |
...
"textcolor": "#AED6F1", |
...
"hposition": "left_corner", |
...
"vposition": "middle", |
...
"h1position": "middle", |
...
"v1position": "middle", |
...
"fontsize": "20", |
...
"id": "tt21" } |
...
| Code Block |
|---|
To Print Polygon: |
...
{ |
...
"type": "polygon", |
...
"radius": "20", |
...
"textcolor": "#AED6F1", |
...
"textbgcolor": "#ffffff", |
...
"hposition": "left", |
...
"vposition": "bottom", |
...
"sides": ">2" |
...
} |