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
close icon

Grouping Cartesian Charts and Legend

First image did not get uploaded succcesfully it seems.




Cheers


7 Replies

DA Daniel October 23, 2022 06:21 PM UTC

Hello,

I am trying to get a StackedAreaSeries as shown below.

For the last quarter, I need to reduce the opacity to show that is it forecasted rather than real data.



I couldn't figure out how to do this without having to create two series. One series has normal opacity and the other series has 50% opacity. The second series is only for the last quarter + previous quarter to be able to align the series together. It has a color with half the opacity. It works fine until you try to toggle the legend like this:


The problem is when I toggle the legend, only the first series gets toggled. I want to be able to link or group the two legends/series together so that when I toggle the main legend, the other series updates accordingly.

I have tried onLegendTapped where a list of booleans is updated based on the toggled index. This did not work.

onLegendTapped: (legendTapArgs) {
final toggledIdx = legendTapArgs.seriesIndex;
if (toggledIdx == null) return;
setState(() {
isVisibleMask[toggledIdx] = !isVisibleMask[toggledIdx];
final realSeries = _getSeries(widget.deliveries);
final forecastedSeries =
_getForecastedSeries(isVisibleMask, widget.deliveries);
series = [...realSeries, ...forecastedSeries];
});
},


I tried the onPointTap to perform set state but that didn't work.

Any ideas?

Ideally I would just have 1 series and the ability to change the opacity of the StackedAreaSeries based on a toggle like pointColorMapper but I have found pointColorMapper does nothing for StackedAreaSeries charts.

If not possible, any ideas how to group two series together by a legend toggle?

Thanks






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

Hi Daniel,


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 02:18 PM UTC

Hi Daniel,


Greetings from Syncfusion. We have validated your query at our end and have created a simple sample in which we have achieved your requirement regarding grouping two series together for a single main legend using a workaround with the help of the isVisible property of the series, onLegendTapped and addPostFrameCallback of SchedulerBinding class mixin. We have attached the sample below for reference. Please check and get back to us if you require further assistance.


If you still face issues, kindly try to reproduce the issue in the below-attached sample and revert us with it so that it will help in further analysis to assist you in a better way.


Note: If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.


Regards,

Sriram Kiran


Attachment: f178395_5f38c291.zip


DA Daniel October 26, 2022 07:37 PM UTC

Hello,


If you use a StackedAreaSeries chart instead. You get a CustomPainter exception.

It also did not work for me. The second chart would still be visible. I am using a List<bool> to control the visibility[idx].


Any ideas?


No way to have one series with opacity changing at a certain X value?

I tried a gradient but that moves with panning.


Thanks



SK Sriram Kiran Senthilkumar Syncfusion Team October 27, 2022 01:35 PM UTC

Hi Daneil,


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


Regards,

Sriram Kiran



SK Sriram Kiran Senthilkumar Syncfusion Team October 28, 2022 11:55 AM UTC

Hi Daniel,


We have checked your query and we are able to replicate the reported issue regarding exception throwing in stack area series painter when calling setState in onLegendTapped callback. We have considered this as a bug and have created a bug report related to onLegendTapped callback already in our feedback portal. We will include the reported issue too in our fix plan and include the fix in our Volume 3 SP release which is scheduled for 7th November 2022. We will update you once the release is rolled out and we appreciate your patience until then. You can also track the status of the bug using the feedback below.

https://www.syncfusion.com/feedback/37724


Regarding this query “No way to have one series with opacity changing at a certain X value”, we would like to let you know currently, there is not any direct way to achieve your requirement using single series and we achieved it using a workaround.


Regards,

Sriram Kiran



NR Natrayan Ramalingam Syncfusion Team November 9, 2022 01:29 PM UTC

Hi Daniel,


We are glad to announce that our Essential Studio 2022 Volume 3 SP release v20.3.0.56 is rolled out and is available for download under the following link.


Essential Studio 2022 Volume 3 Service Pack Release v20.3.0.56 is available for download | Announcements Forums | Syncfusion


The reported issue regarding the “Exception throwing in stack area series painter when rebuilding the widget in onLegendTapped callback” is now fixed and rolled out in this release. So, kindly please upgrade the chart widget package version to the latest version below to overcome the issue.


https://pub.dev/packages/syncfusion_flutter_charts/versions/20.3.56


We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.


Regards,

Natrayan


Loader.
Live Chat Icon For mobile
Up arrow icon