[SfCircularChart] Legend's ToggleSeriesVisibility and Data Label's LabelContext

[Jon Kao]

Hello,

Thank you for the excellent work! I have two questions regarding the use of chart controls:

1. I set the Legend’s ToggleSeriesVisibility property to true and the Data Label’s LabelContext property to Percentage. How can I recalculate the percentage when one of the legends is disabled?

2. Is there a way to hide the decimal point and round percentages to the nearest whole number when using LabelContext = Percentage?

Thanks for your answer.

Attachment: PieTest_df0856f5.zip

[Arul Jenith Berkmans]

Hi Jon Kao,

We have validated your query and would like to inform you, when toggling the legend, the series points remain in the view but are not visible. Ignoring these points for percentage calculation is not recommended.

If you need to recalculate percentages without the toggled data points, you can use a workaround by calculating the percentages manually in the ViewModel.

Here is a simple code example.

Convertor code snippet:

 public class LegendConvertor : IMultiValueConverter

  {

 

      public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)

      {

          // Handle null checks and types of values

          if (values == null || values.Length < 2)

              return string.Empty;

 

          // Assuming the first value is IsToggled and the second is LoadTime

          if (values[1] is LegendItem item)

          {

              if (item.Item is SalesModel model)

              {

                  model.IsToggled = item.IsToggled;

                 

                  if (parameter is SalesViewModel viewModel)

                  {

                      viewModel.CalculatePercentages();

                  }

              }

 

              return item.Text;

          }

 

          return string.Empty;

      }

 

      public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)

      {

          return null!;

      }

  }

 

ViewModel code snippet:

 

public class SalesViewModel

 {

     public List<SalesModel> Data { get; set; }

 

     public SalesViewModel()

     {

         CalculatePercentages();

     }

 

     public void CalculatePercentages()

     {

         var items = Data.Where(item => !item.IsToggled).ToList();

 

         var totalSales = items.Sum(item => item.SalesRate);

 

         foreach (var item in items)

         {

             item.Percentage = totalSales > 0

                 ? (int)((item.SalesRate / totalSales) * 100)

                 : 0;

         }

     }

 }

We have attached the sample for your reference, you can review it for more details.

Query 2: Is there a way to hide the decimal point and round percentages to the nearest whole number when using LabelContext = Percentage?

To display percentages without decimal points, you can use the LabelFormat property in CircularDataLabelSettings.

Here is a simple code example:

<chart:PieSeries.DataLabelSettings>

    <chart:CircularDataLabelSettings>

        <chart:CircularDataLabelSettings.LabelStyle>

            <chart:ChartDataLabelStyle LabelFormat="0'%"/>

        </chart:CircularDataLabelSettings.LabelStyle>

    </chart:CircularDataLabelSettings>

</chart:PieSeries.DataLabelSettings>

If you have additional queries or need further assistance, please feel free to reach out.

Thank you for your understanding and patience.

Regards,

Arul Jenith B.

Attachment: CircularChartLabelContext_567306ab.zip

[Jon Kao]

Hi

Thanks for your timely reply.

Got it! And how to do if I use the default Legend without using ChartLegend.ItemTemplate? 

Which property should I MultiBinding to?

 

[Arul Jenith Berkmans]

Hi Jon Kao,

 

We have reviewed your query and would like to inform you that the default legend is designed to display the legend structure only, and it does not support for this case with using multi-binding or converter changes.

If possible, could you please provide the reason for why you need default legend instead of legend template? If the default legend is not a strict requirement, we recommend using a legend template, which provides better flexibility for customization.

 

For more details, you can refer to the documentation here: Legend in .NET MAUI Chart control | Syncfusion

 

Thank you for your understanding.

 

Best regards,

Arul Jenith B.

[Jon Kao]

Hi

Thanks for your time. 

Legend of Circular Chart with MultiBinding in ChartLegend.ItemTemplate seems not showing properly when using SQLite Database. To provide more detail, I have attached a sample project for you.

Thank you again for your support and assistance.

Update: Pyramid Chart seems to be the same as Pie Chart.

Attachment: PieLegend_2e0061ad.zip

[Arul Jenith Berkmans]

Hi Jon Kao,

Thank you for sharing the sample. We have reviewed it and would like to inform you that after modifications, the data label percentage value recalculation works as expected with SQL data as well.

In the provided sample, the ViewModel's percentage recalculation method is needed to invoke through the converter to display the percentage values in data labels exclude the toggled data points.

Simple code snippet for the percentage recalculation method:

 public void CalculatePercentages()

 {

     var items = Data.Where(item => !item.IsToggled).ToList();

 

     var totalSales = items.Sum(item => item.Value);

 

     foreach (var item in items)

     {

         item.Percentage = totalSales > 0

             ? (int)((item.Value / totalSales) * 100)

             : 0;

     }

 }

XAML :

<Ellipse

    HeightRequest="12"

    WidthRequest="12">

    <Ellipse.Fill>

        <MultiBinding Converter="{StaticResource legendMultiConverter}" ConverterParameter="{x:Reference viewModel}">

            <Binding Path="IsToggled"/>

            <Binding Path="."/>

        </MultiBinding>

    </Ellipse.Fill>

</Ellipse>

We have attached the updated sample for your reference. Please review it and let us know if you need any further assistance.

Thank you for your understanding and patience.

Regards,

Arul Jenith B.

Attachment: PieLegend_2edf89ce.zip