Adding Annotation to Chart

[Manu]

Hello,

I want to draw a dotted line in the chart, I'm trying out annotation for this purpose.

I'm not sure annotation is the right way to draw line in a chart (Please suggest a better approach if there are any)

I've attached the code that I'm trying, can you please check

The line should start at pt x = '0' y=50 and should extend till the end.

https://plnkr.co/edit/fODz8TtOnAdQBUNSY78a?p=preview

 

               

 

[Baby Palanidurai]

Hi Manu, 

Thanks for using syncfusion products. 

We have analyzed your query and we like to inform you that, coordinateUnits has 2 values. 

1. Pixel
2. Point

Pixel: x and y values consider as pixel based on `region` property whether it depends on `Chart`(placed the annotation element with respect to container) or `Series` (Placed the annotation element with respect to chart area). 

Point: x is represented as series points(x and y). 

In your scenario, you have used coordinateUnits as Pixel that’s why the annotation has been rendered on that position. We have suggest to use coordinate unit as `Point` instead of `Pixel` and set the point value to x and y. 

Please find the below code snippet to achieve your exact requirement, 

Code Snippet: 

<e-annotation visible = true 

                    content='<div id = "test" style="border-top:3px dashed grey;border-top-width: 2px; width: 10000px"></div>'  

                    x = 2014 y = 50  

                    coordinateUnits='Point'> 

                </e-annotation> 

 

Screenshot: 

 

We have modified your sample based on this. Please find the sample from below link, 

https://plnkr.co/edit/woKUesFjH9SABs2Om5wt?p=preview 

Kindly revert us, if you have any concerns. 

Thanks, 

Baby. 

[Manu]

Hello, 

For annotations, if I set the visible property to false, its not hidding the annotation.

whats the right way to adjust the visibility of the annotation

<e-annotation visible = false

                    content='<div id = "test" style="border-top:3px dashed grey;border-top-width: 2px; width: 10000px"></div>'  

                    x = 2014 y = 50

                    coordinateUnits='Point'> 

                </e-annotation> 

[Baby Palanidurai]

Hi Manu, 

     We have analyzed your query. As of now, we are not providing visible option for annotation. The annotation for chart will get visible/hide based on the content. So, If you want to hide the annotation, you can set null value for content property as below. 

<e-annotations> 

                <e-annotation 

                    content=null  

                    x = 2014 y = 50  

                    coordinateUnits='Point'> 

                </e-annotation> 

Screenshot: 

 

Sample for your reference can be find from below link, 

https://plnkr.co/edit/DbG5oN0Hy83c2GvLyZuJ?p=preview 

kindly revert us, if you have any concerns. 

Thanks 

Baby