We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to add annotations on the chart?

Hi,

If you look at the chart below (created off of TradeView chart), wherein we are able to add annotation points that can be added for various purposes such as the current price, the price(s) at which we have Open orders, etc.



Wondering as to how we can bring such annotations on top of Syncfusion Cartesian chart (Candle chart) . Thanks for your help, in advance.

Thanks,

Thar




3 Replies

YG Yuvaraj Gajaraj Syncfusion Team May 2, 2023 12:43 PM UTC

Hi Viswanathan,


You can achieve your requirement with the help of the annotations property in the SfCartesianChart, but if you want to update the annotation position you need to call setState and there is no direct support to update the annotation position without setState. However, we have achieved your requirement with the help of CrosshairBehavior for horizontal line and CustomerPainter for annotation. Here we have shown the crosshair line for the last point open value and rendered an annotation such as a customer painter and render a custom widget on that position. We have prepared the sample and shared it below for your reference, you can modify the sample as per your requirement.


Screenshot:



Regards,

Yuvaraj.


Attachment: f182090_2c8255a8.zip


SA sakthivel May 8, 2023 08:03 AM UTC

Hi,

Can you give me an example with annotations property in the SfCartesianChart,?

I wants 



LP Lokesh Palani Syncfusion Team May 9, 2023 09:29 AM UTC

Hi Sakthivel,


In the SfCartesianChart, the annotations property is used to mark a specific area on the chart. Within the annotations property, you can add custom widgets to the chart area. We have provided an SB sample and User Guide documentation below for your reference. Please inform us if you require any further assistance.


SB link,

https://flutter.syncfusion.com/#/cartesian-charts/series-features/annotation/chart-with-annotation


UG link,

https://help.syncfusion.com/flutter/cartesian-charts/annotations


Regards,

Lokesh.


Loader.
Up arrow icon