LineSeries shows circles in all datapoints when using a semi-transparent color, even though marker is set to not visible.

[Víctor Marino]

Hello.

I'm trying to create a cartesian chart that displays both an AreaSeries and a LineSeries. I have explicitly set the marker visibility to false just in case, even though this is the default setting.

If I give the LineSeries an opaque color, like this:

LineSeries<AmountsDataPoint, DateTime>(

name: 'amounts_chart.invested'.tr(),

color: Colors.black,

markerSettings: MarkerSettings(

isVisible: false,

),

dataSource: amountsSeries,

xValueMapper: (AmountsDataPoint amounts, _) => amounts.date,

yValueMapper: (AmountsDataPoint amounts, _) => amounts.netAmount,

width: 10,

),

It is rendered as expected, both zoomed in and zoomed out:

However, if I give the LineSeries a semi-transparent color (20% opacity), like this:

LineSeries<AmountsDataPoint, DateTime>(

name: 'amounts_chart.invested'.tr(),

color: Colors.black.withOpacity(0.2),

markerSettings: MarkerSettings(

isVisible: false,

),

dataSource: amountsSeries,

xValueMapper: (AmountsDataPoint amounts, _) => amounts.date,

yValueMapper: (AmountsDataPoint amounts, _) => amounts.netAmount,

width: 10,

),

I get some kind of visible "circle" for every single datapoint, which completely changes the effective color of the line when zoomed out:

Can you please look into this? Not sure if it's a bug or I'm missing something.

Thanks!

[Sriram Kiran Senthilkumar]

Hi Víctor,

We are validating your query at our end and we will update further status in one business day (26 Oct 2022). We appreciate your patience until then.

Regards,

Sriram Kiran

[Sriram Kiran Senthilkumar]

Hi Víctor,

Greetings from Syncfusion. We have validated your query at our end, and we would like to let you know that the rendering behaviour of line series is that two consecutive points as considered as a segment and drawn as individual paths one by one to render as the line series and so due to this, the segment points connection are getting overlapped and shows as a circle when the opacity is provided for the series. This is the default rendering behaviour of line series.

However, we can achieve your requirement with the help of fast line series which renders the whole series as a single path when the dash array is set for the series. So, in your case, you can set the dash array values to a minimum value (say 0.01) to avoid gaps in-between. We have also created a simple sample in which we have achieved the same and attached it below for reference.

Please check with the sample and revert us if you have further concerns.

Regards,

Sriram Kiran

Attachment: f178394_d68dc85f.zip

[Víctor Marino]

Hi and thanks for your support!

I wasn't aware about the FastLineSeries, I just tried your suggestion. Unfortunately it has a few issues.

First of all, using a dash array means the legend incorrectly displays a dashed pattern as well, which doesn't match what's visible on the actual chart:

This would probably force me to create a custom legend, which isn't ideal.

Second, if I set the dash array to [0.01, 0.01] as suggested, the iOS simulator is crashing altogether when I choose the "1m" zoom level in my chart (1 month worth of data, which means 30 datapoints). Not sure if there's some sort of memory leak or similar, but it seems I can avoid it by choosing more conservative values, such as [1, 1].

However, there's a bigger issue that's always present with the FastLienSeries (whether I use a dash array or not):

I have the "trackballBehavior" set up this way:

trackballBehavior: TrackballBehavior(

enable: true,

activationMode: ActivationMode.singleTap,

tooltipDisplayMode: TrackballDisplayMode.groupAllPoints,

tooltipAlignment: ChartAlignment.near,

tooltipSettings: InteractiveTooltip(

enable: true,

decimalPlaces: 2,

color: Theme.of(context).colorScheme.surfaceVariant,

borderColor: Theme.of(context).colorScheme.outline,

borderWidth: 1,

textStyle: TextStyle(

color: Theme.of(context).colorScheme.onSurface

),

),

),

With the regular LineSeries, it works as expected. I can drag my finger across the chart and the tooltip will follow me showing the relevant data for each point.

However, after switching to the FastLineSeries, this feature seems to be broken. Now, when tapping and dragging my finger through the chart, it will work for some points but will eventually throw this exception when I reach certain parts of the chart:

══╡ EXCEPTION CAUGHT BY GESTURE LIBRARY ╞═══════════════════════════════════════════════════════════

The following RangeError was thrown while dispatching a pointer event:

RangeError (index): Invalid value: Not in inclusive range 0..229: 730

When the exception was thrown, this was the stack:

#0 List.[] (dart:core-patch/growable_array.dart:264:36)

#1 TrackballRenderingDetails._getLeastX (package:syncfusion_flutter_charts/src/chart/user_interaction/trackball.dart:1332:23)

#2 TrackballRenderingDetails._validateNearestXValue (package:syncfusion_flutter_charts/src/chart/user_interaction/trackball.dart:1278:20)

#3 TrackballRenderingDetails.generateAllPoints (package:syncfusion_flutter_charts/src/chart/user_interaction/trackball.dart:1098:7)

#4 TrackballBehavior.show (package:syncfusion_flutter_charts/src/chart/user_interaction/trackball.dart:462:37)

#5 TrackballBehaviorRenderer.onTouchDown (package:syncfusion_flutter_charts/src/chart/user_interaction/trackball.dart:591:52)

#6 ContainerArea._performPointerDown (package:syncfusion_flutter_charts/src/chart/base/chart_base.dart:3189:14)

#7 ContainerArea.build.<anonymous closure>.<anonymous closure> (package:syncfusion_flutter_charts/src/chart/base/chart_base.dart:2376:23)

#8 RenderPointerListener.handleEvent (package:flutter/src/rendering/proxy_box.dart:2912:29)

#9 GestureBinding.dispatchEvent (package:flutter/src/gestures/binding.dart:425:22)

#10 RendererBinding.dispatchEvent (package:flutter/src/rendering/binding.dart:329:11)

#11 GestureBinding._handlePointerEventImmediately (package:flutter/src/gestures/binding.dart:380:7)

#12 GestureBinding.handlePointerEvent (package:flutter/src/gestures/binding.dart:344:5)

#13 GestureBinding._flushPointerEventQueue (package:flutter/src/gestures/binding.dart:302:7)

#14 GestureBinding._handlePointerDataPacket (package:flutter/src/gestures/binding.dart:285:7)

#18 _invoke1 (dart:ui/hooks.dart:170:10)

#19 PlatformDispatcher._dispatchPointerDataPacket (dart:ui/platform_dispatcher.dart:331:7)

#20 _dispatchPointerDataPacket (dart:ui/hooks.dart:94:31)

(elided 3 frames from dart:async)

Event:

PointerDownEvent#f8811(position: Offset(299.7, 386.7))

Target:

RenderPointerListener#dcb6a relayoutBoundary=up9

════════════════════════════════════════════════════════════════════════════════════════════════════

It will then continue throwing exceptions for as long as I keep dragging my finger:

Another exception was thrown: RangeError (index): Invalid value: Not in inclusive range 0..229: 640

Another exception was thrown: RangeError (index): Invalid value: Not in inclusive range 0..229: 635

Another exception was thrown: RangeError (index): Invalid value: Not in inclusive range 0..229: 625

Another exception was thrown: RangeError (index): Invalid value: Not in inclusive range 0..229: 608

Another exception was thrown: RangeError (index): Invalid value: Not in inclusive range 0..229: 582

Another exception was thrown: RangeError (index): Invalid value: Not in inclusive range 0..229: 560

Another exception was thrown: RangeError (index): Invalid value: Not in inclusive range 0..229: 552

Another exception was thrown: RangeError (index): Invalid value: Not in inclusive range 0..229: 533

Another exception was thrown: RangeError (index): Invalid value: Not in inclusive range 0..229: 511

Another exception was thrown: RangeError (index): Invalid value: Not in inclusive range 0..229: 474

Another exception was thrown: RangeError (index): Invalid value: Not in inclusive range 0..229: 450

Another exception was thrown: RangeError (index): Invalid value: Not in inclusive range 0..229: 445

Another exception was thrown: RangeError (index): Invalid value: Not in inclusive range 0..229: 241

Another exception was thrown: RangeError (index): Invalid value: Not in inclusive range 0..229: 244

Another exception was thrown: RangeError (index): Invalid value: Not in inclusive range 0..229: 279

Another exception was thrown: RangeError (index): Invalid value: Not in inclusive range 0..229: 311

etc. etc.

Any idea of why this may be happening?

It doesn't seem like I can use the FastLineSeries as is.

[Sriram Kiran Senthilkumar]

Hi Víctor,

We have checked your query and we tried to replicate the reported issue regarding exception throwing when dragging along the fast line series by creating a simple sample similar to the provided screenshot. Unfortunately, the reported exception didn’t reproduce at our end. As we are not exactly sure on what scenario the issue is replicating, we kindly request you to try to replicate the reported issue in the below-attached test sample with your chart data source and revert us with it so that it will be helpful in further analysis to assist you in a better way.

Regards,

Sriram Kiran

Attachment: f178394_1_ee6b965e.zip