Best way to add lines (e.g. horizontal, rays, etc.)

[anfen]

I need to add lines e.g. for support and resistance etc., but feel that this may be better achieved using a transparent overlay over the chart widget. This would prevent the original chart widget becoming bloated with optional features. However, it may cause gestures to be harder to communicate down to the chart widget for panning and zooming.

How would you recommend this be achieve?

[h65wang]

Are you guys talking about something other than "multiple trend lines", which was added in a previous version?

[anfen]

Are you guys talking about something other than "multiple trend lines", which was added in a previous version?

Yes we are. Trend lines are lines with data points for each candle i.e. x=time, y=price. However, horizontal lines and rays don't know about candle data, they just have a start x/y point and an end x/y point.

These lines are used to represent "support & resistance", which is the most basic form of technical analysis that a candle chart would be used for.

A ray is a line that can be placed at an angle, which has the same 2 points I described above, but the end of the line actually continues off screen into infinity, hence the name ray.

[anfen]

Yes, it's something different and requires user interactivity. I have been able to paint a line on the chart, but the problem is that when trying to move the line by scrolling with finger, the app's native listView won't stop scrolling the entire screen outside the chart.

Here's an example of this functionality on TradingView, see the blue line being moved up and down by user --

Hi @calculabs, would you mind sharing the code that got you that far please? It looks excellent!

[calculabs]

@anfen - This is not my app, this is just a TradingView example to show the functionality, to give the author an idea of what we're trying to accomplish.

I believe that the naming convention "Trend Lines" in this package actually refers to what are usually considered to be "Formulas", ie MACD, MA, BOLLINGER, etc.

[ivofernandes]

You can draw a line with a simple code:

List<double?> horizontalLine = _data.map((e) => 100.0).toList();

The problem will be to catch events, I also didn't find a way of customize the color of the trends line

[ivofernandes]

Actually checked now and it's possible to customize the style, check here: https://pub.dev/packages/interactive_chart/example

The moving of the resistance line could be more difficult, there is a event onTap, but it only identifies the candle clicked, the moving of the line could be tricky

[anfen]

@h65wang is this something you're looking into or do you have any suggestions maybe? Thanks

[djpnewton]

@anfen see https://github.com/fluttercandies/flutter-interactive-chart/pull/20 for a start