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

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

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:

1.png2.png

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:

3.png4.png


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

Thanks!


4 Replies

SK Sriram Kiran Senthilkumar Syncfusion Team October 24, 2022 01:17 PM

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



SK Sriram Kiran Senthilkumar Syncfusion Team October 26, 2022 10:47 AM

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.

Chart, line chart

Description automatically generated


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


Regards,

Sriram Kiran


Attachment: f178394_d68dc85f.zip


VM Víctor Marino October 26, 2022 11:33 AM

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:

01.png

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.



SK Sriram Kiran Senthilkumar Syncfusion Team October 27, 2022 06:43 AM

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

Loader.
Live Chat Icon For mobile
Up arrow icon