[question] Donut chart inside another donut chart

[Lorenzobettega]

I'm trying to do something like this using syncfusion_flutter_charts: 21.2.5:

Is there any way to achieve the above result with the package?

If not, can the team help with an option?

Just to clarify, both charts are related

[PreethikaSelvam]

Hi Lorenzobettega,

We have achieved this requirement by using two doughnut series and customising their radius using the radius, inner radius, and explodeAll properties, which are available in DoughnutSeries. And you can enable the data label using the DataLabelSettings property in DoughnutSeries. We have prepared a sample based on your requirements and attached it below for your reference.

Screenshot:

For more details, pleas refer the below user guide: https://help.syncfusion.com/flutter/circular-charts/chart-types/doughnut-chart https://help.syncfusion.com/flutter/circular-charts/datalabel

Sample: https://support.syncfusion.com/attachment/download/465652

Regards, Preethika.

[Lorenzobettega]

im having this error when looking for the sample:

[PreethikaSelvam]

Hi Lorenzobettega,

I apologies for the above mentioned issue on the attached sample, kindly refer this updated sample attached below for your reference.

Sample: github_1245.zip

Regards, Preethika.

[Lorenzobettega]

I'm really grateful for your help!

Is it possible to have the legend of the inner chart also on the sample, controlling both charts

something visually like this:

Its the one part still missing today:

[LokeshPalani]

Hi,

You can achieve your requirement by using the offset property in the Legend. This will allow you to place the legend inside the chart. We have provided a code snippet, output, and sample for your reference. Please let us know if you require any further assistance.

Code snippet:

SfCircularChart(
                legend: Legend(
                  isVisible: true,
                  offset: Offset(-450, -200),
                         ),
                    )

SB,

https://flutter.syncfusion.com/#/circular-charts/legend/legend-with-various-options

Screenshot:

Regards, Lokesh.

chart_472088.zip

[Lorenzobettega]

Thanks for all, nice support :)

[Lorenzobettega]

Hi, in this sample that you invite me you solve the question about legend position, but I still missing a controller for both grapichs, for example:

When I tap this option, will hidden all the circle part, both at the first and the second graph:

it's possible to do that ?

[LokeshPalani]

We have analyzed your query and would like to inform you that there is currently no option to hide the two-chart series when tapping on the legend while using the Stack widget. The user interactions will only work on the top of the SfCircularChart, as this is the behavior of the SfCircularChart. Please let us know if you require any further assistance.

[Lorenzobettega]

I cannot render the outside grapich every time I tap the inside grapich legend?

[LokeshPalani]

You can achieve your requirement by using the onLegendTapped property and UniqueKey in the SfCircularChart. In the onLegendTapped property, we take the pointIndex and check if the tapped index is zero by setting a boolean property. If the tapped index is zero, we change the dataSource in the first chart with the help of UniqueKey in the SfCircularChart. We have shared a code snippet and sample for your reference. Please check and let us know if you need any further assistance.

code snippet:

SfCircularChart(
                onLegendTapped: (legendTapArgs) {
                  setState(() {
                   uniqueKey = UniqueKey();
                    isLegendTapped = legendTapArgs.pointIndex == 0
                        ? !isLegendTapped
                        : isLegendTapped;
                  });
                },
SfCircularChart(
                key: uniqueKey,
                series: <CircularSeries>[
                  DoughnutSeries<ChartData, String>(
                    dataSource: isLegendTapped ? chartData3 : chartData2,
              )
          ]
        )

cicularchart_472088.zip

[Lorenzobettega]

Thanks for all, It works.