Chart legend and data label

Hello, thanks for the great work. I have two issues when using chart controls.


  1. When ToogleSeriesVisibility enabled, legend with ItemTemplate cannot change to gray color after tapping to disable, or is there a simpler way to set font size of legend ?
  2. There is no data label connector line after setting LabelPlacement to Outer when using gradient palette brushes in Pie, Doughnut, Pyramid chart.


Thanks for your answer.



Attachment: LegendTest_181e5485.zip

4 Replies 1 reply marked as answer

NT Nitheeshkumar Thangaraj Syncfusion Team August 5, 2024 02:31 PM UTC

Hi Jon,


We would like to let you know that you can achieve the legend font size using Syncfusion themes in App.xaml file, as direct support is not available currently. Here we provide the procedure for adding theme support in the code snippet below.


<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             xmlns:local="clr-namespace:LegendTest"

             xmlns:sys="clr-namespace:System;assembly=mscorlib"

             xmlns:syncTheme="clr-namespace:Syncfusion.Maui.Themes;assembly=Syncfusion.Maui.Core"

             x:Class="LegendTest.App">

    <Application.Resources>

        <ResourceDictionary>

            <ResourceDictionary.MergedDictionaries>

                <ResourceDictionary Source="Resources/Styles/Colors.xaml" />

                <ResourceDictionary Source="Resources/Styles/Styles.xaml" />

 

                <syncTheme:SyncfusionThemeResourceDictionary VisualTheme="MaterialLight"/>

                <ResourceDictionary>

                    <sys:Double x:Key="SfCartesianChartLegendFontSize">20</sys:Double>

                    <sys:Double x:Key="SfPolarChartLegendFontSize">12</sys:Double>

                    <sys:Double x:Key="SfFunnelChartLegendFontSize">12</sys:Double>

                </ResourceDictionary>

 

            </ResourceDictionary.MergedDictionaries>

        </ResourceDictionary>

    </Application.Resources>

</Application>



Additionally, we have already logged a feature request for legend label styling. You can track the status and progress in the following feedback portal link.


Feedback Link - Adding Label Style Support to Chart Legends in .NET MAUI Charts in .NET MAUI


Regarding the connector line not being applied to the chart, we have created feedback and will consider including gradient color support in this feature. You can track the status and progress in the following feedback portal link.


Feedback Link - Data label connector line customization support for net maui charts


Regarding ToogleSeriesVisibility enabled, legend with ItemTemplate cannot change to gray color after tapping to disable, we will update the details by tomorrow, August 6, 2024.


We will prioritize the features in every release based on the demands, and we do not have an immediate plan to implement this since we committed to already planned work. So, this feature will be available for any of our upcoming releases.


Please cast your vote to make it count, and if you have any more specifications or suggestions for the feature request, you can add them as a comment in the feedback portal.


Regards,

Nitheeshkumar.




NT Nitheeshkumar Thangaraj Syncfusion Team August 6, 2024 12:34 PM UTC

Hi Jon,


We would like to inform you that when using a custom item template for the legend, you can adjust the toggled icon color by utilizing a multi-value converter with the IsToggled property of the LegendItem, which is the binding context of the chart legend. In the converter, you can pass the IsToggled property to check whether the legend item is enabled or disabled and return the appropriate color accordingly.

Below is the example code snippet for your reference:


<Rectangle.Fill>

     <MultiBinding Converter="{StaticResource colorConverter}">

         <Binding Path="IsToggled"/>

         <Binding Path="."/>

     </MultiBinding>

 </Rectangle.Fill>


public class Converter : IMultiValueConverter

 {

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

     {

         var isToggled = values[0];

         if (values[1] is LegendItem item)

         {

             if((bool)isToggled)

             {

                 return new SolidColorBrush(Colors.Gray);

             }

             else

             {

                 return item.IconBrush;

             }

         }

         return Colors.Gray;

     }

 

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

     {

         return null;

     }

 }



We hope this helps. If you need further assistance, please let us know.


Regards.

Nitheeshkumar.


Marked as answer

JK Jon Kao August 7, 2024 03:28 AM UTC

Hi,


Thank you so much for your prompt reply and sample code, now it works as expected.



PR Preethi Rajakandham Syncfusion Team August 7, 2024 04:29 AM UTC

Hi Jon Kao,

You're welcome. 

We are glad that the provided response meets your requirement. Please let us know if you need further assistance. As always, we are happy to help you out. 

Regards,

Preethi R


Loader.
Up arrow icon