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.
Hi Alistair,
Greetings from Syncfusion.
We have achieved your requirement ‘drawing a line between the
open price and close price’ with the help of the onCreateRenderer
callback in the chart to create a customizable
series. This allows you to create a custom rendering in series.
We have prepared a sample based on your requirement and attached a sample below
for your reference.
Screenshot:
For more details, please refer this ug:
https://help.syncfusion.com/flutter/cartesian-charts/callbacks#oncreaterenderer
Note: We have rendered the black line to connect the open and close value. Please change the sample based on your requirement.
Regards,
Lavanya A.
Hi Lavanya,
Thanks for getting back to me. I think you may have mis-understood the requirement though - I would like to draw a line from the open and close of a trade, not the open and close of a candle. I need to just plot the 2 points on the same chart as the candle series and join them with a line. Ideally I would be able to pop up a tooltip at the start point and end point to show the trade details.
I have updated your demo screenshot to illustrate.
I think the onCreateRenderer looks like it will support this - maybe it is should be LineSeries on top of the CandleSeries? Is that possible?
Many Thanks
Alistair
Hi Arconomy,
We have achieved your requirement with the help of a custom painter widget. We have placed the chart widget inside a Stack, and used the SchedulerBinding to generate a list of CustomPaint widgets. Each CustomPaint object has a LinePainter object as its painter. We have stored the line trade points in the tradePoints property, and the LinePainter takes start and end offsets as inputs, which are calculated by converting the trade point data into pixel values using the pointToPixel method in the ChartSeriesController, accessed from the onRendererCreated callback. We have shared a sample below for your reference.
Screenshot:
Note:
We have used simple data points for rendering the line above the candle. Please change the tradePoints values based on your requirement.
Regards,
Yuvaraj.
Hi Yuvaraj,
I have integrated your solution into my chart and made some updates to suport redrawing the trade lines when the chart pans and zooms. I still have a few issues that I am struggling with though;
1) Preventing the CustomPaint widgets being repainted and added to the Stack if they are outside the visible chart area (see screenshots). Is there a way of getting the minimum and maximum visble points on the X axis and Y axis?
2) Do you know whether I could apply the TooltipBehavior to the CustomPaint Widget to show the trade details (e.g. Datetime, entry and close prices)?
Many Thanks
Alistair
Hi Arconomy,
1) Preventing the CustomPaint widgets being repainted and added to the Stack if they are outside the visible chart area (see screenshots). Is there a way of getting the minimum and maximum visble points on the X axis and Y axis?
We suggest using the technical indicator feature instead of CustomPainter to avoid rendering a line outside the chart area. We have generated a list of technical indicators based on the trade points and assigned it to the indicators property in the chart. We have created a sample for this and shared it below for your reference. You can modify it as per your requirement.
UG, https://help.syncfusion.com/flutter/cartesian-charts/technical-indicators
2) Do you know whether I could apply the TooltipBehavior to the CustomPaint Widget to show the trade details (e.g. Datetime, entry and close prices)?
Now, we are using the technical indicator instead of CustomPainter, so by default, the technical indicator has trackball support. You can customize the trackball tooltip using the builder property and show the trackball only at the start and end value of the trade line. We have shared a sample below for your reference.
Screenshot:
If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.
Regards,
Yuvaraj.
Hi Yuvaraj,
I integrated your solution today - although I could not get the TrackBall to work together with the tooltipbehaviour - the ToolTipbehaviour seems to override and the default indicator tooltip shown instead of the using the trackballbehaviour builder.
I would be ok with just using the ToolTipBehaviour if there were a way to;
1) update the tooltip for the indicator to use custom widgets
2) update the indicator points to show a small circle (or square or triangle) at the entry point and close point.
Is this possible?
Many Thanks
Alistair
Hi Arconomy,
Query #1: update the tooltip for the indicator to use custom widgets.
You can achieve your requirement to show the custom widget as a tooltip with the help of the builder property in the TooltipBehavior, here you can return the custom widget and it will be rendered instead of the tooltip. Please refer to the following UG documentation.
https://help.syncfusion.com/flutter/cartesian-charts/tooltip#tooltip-template
Query #2: update the indicator points to show a small circle (or square or triangle) at the entry point and close point.
Yes, you can render a circle shape at the entry and close point of the indicator with the help of ScatterSeries. Here we have generated the scatter series for the trade points value and added this scatter series to the existing series list. You can also change the shape of the scatter series with the help of the shape property in the markerSettings. We have shared the sample below for your requirement.
Screenshot:
Regards,
Yuvaraj.
