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

Grouping Cartesian Charts and Legend

First image did not get uploaded succcesfully it seems.


7 Replies

DA Daniel October 23, 2022 01:21 PM


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?


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

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.


Sriram Kiran

SK Sriram Kiran Senthilkumar Syncfusion Team October 26, 2022 09:18 AM

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.


Sriram Kiran

Attachment: f178395_5f38c291.zip

DA Daniel October 26, 2022 02:37 PM


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].