Legend text color

Hello, I want to ask, if there is a possibility to change the legend text color on .NET MAUI SfCartesianChart?

I was searching through the web and found nothing. 

Thank you for your answers.


16 Replies 1 reply marked as answer

YP Yuvaraj Palanisamy Syncfusion Team May 9, 2022 03:53 PM UTC

Hi Jan,


We have analysed your query and do not have direct support to customize the legend text color in MAUI SfCartesianChart. We have forwarded this to our development team, and we will update you with complete details on May 10th, 2022.


Regards,

Yuvaraj.


Marked as answer

JA Jan replied to Yuvaraj Palanisamy May 9, 2022 05:09 PM UTC

Thank you very much.



YP Yuvaraj Palanisamy Syncfusion Team May 10, 2022 12:13 PM UTC

Hi Jan,


We are still working on.Net MAUI chart features to deliver a better experience compared to Xamarin.


And the required legend items customization support will be available in our upcoming release. We will update you once it rolls out, and we appreciate your patience until then.


Regards,

Yuvaraj.



RR Raja Ramalingam Syncfusion Team December 22, 2022 12:06 PM UTC

Hi Jan,

We are glad to announce that our Essential Studio 2022 Volume 4 release v20.4.0.38 has been rolled out with the Legend Item Template support for .NET MAUI Chart, is available for download under the following link.

https://www.syncfusion.com/forums/179561/essential-studio-2022-volume-4-main-release-v20-4-0-38-is-available-for-download


Note: You can add a label to the item template and change its text color to the required color.


In this API documentation, you can find code snippet that demonstrates how to implement the Item template in chart.

https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartLegend.html#Syncfusion_Maui_Charts_ChartLegend_ItemTemplate


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,

Raja.



CH Christopher Hofmeister replied to Raja Ramalingam January 2, 2024 10:46 PM UTC

Hi, I am having a hard time making this work. I copied the code from the example mentioned above to make an item template, but the label text binding does not appear to be working.

In the attached picture note that the "ChartSeriesName" property is properly bound and displays in the view outside the chart.

However when used in the DataTemplate it does not display.

Is there a more complete example to look at so I can see what I am doing wrong?

SF_Pic1.png



NM Nanthini Mahalingam Syncfusion Team January 4, 2024 10:17 AM UTC

We would like to let you know that the chart legend item's binding context is LegendItem class. LegendItem class have the Source, Item, Text properties. In your case, you have used the SfCartesianChart, you can utilize the Source property to the item template label text by binding the Label property of respective series. You can display the legend item value in the legend based on your requirement, as shown in the following code snippet.


<chart:SfCartesianChart.Legend>

     <chart:ChartLegend>

         <chart:ChartLegend.ItemTemplate>

             <DataTemplate >

                 <Grid ColumnDefinitions="Auto,Auto"  ColumnSpacing="5">

                     <HorizontalStackLayout Grid.Column="0" WidthRequest="35" HeightRequest="35">

                         <Rectangle WidthRequest="13" HeightRequest="13"  HorizontalOptions="Start"

                                    VerticalOptions="Center"  Fill="Green"/>

                     </HorizontalStackLayout>

                     <Label Grid.Column="1"

                            FontSize="13"

                            VerticalTextAlignment="Center"

                            Text="{Binding Source.Label}"

                            TextColor="Black"

                            HorizontalOptions="Center"

                            HorizontalTextAlignment="Start"

                            />

                 </Grid>

             </DataTemplate>

         </chart:ChartLegend.ItemTemplate>

     </chart:ChartLegend>

 </chart:SfCartesianChart.Legend>

 

 

    <chart:ColumnSeries

            EnableTooltip="True" Label="{Binding ChartSeriesName}"

            ItemsSource="{Binding Data}"

            XBindingPath="Name"

            YBindingPath="Height">

</chart:ColumnSeries>


https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.LegendItem.html#Syncfusion_Maui_Core_LegendItem_Item


We hope it will meet your desired requirement.



CH Christopher Hofmeister replied to Nanthini Mahalingam January 4, 2024 05:48 PM UTC

Hello, that worked! Thank you for the help.

I am now having another issue, and I'm not sure if this is related, or belongs under a new topic. There seems to be an issue binding the "IsVisibleOnLegend" property of the series.

In the image below not that I am printing out the value of the "LineSeriesChartVisible" and "ColumnSeriesVisible" bound variables. The legend for the column series is NOT displaying.

SF2a.png

If I hardcode the property in xaml to "true" the legend does display as shown below.

SF2b.png

According to the documentation, it appears this should be a bindable property: https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html?tabs=tabid-9%2Ctabid-11%2Ctabid-5%2Ctabid-7%2Ctabid-18%2Ctabid-1%2Ctabid-16%2Ctabid-20%2Ctabid-14%2Ctabid-13%2Ctabid-3




NM Nanthini Mahalingam Syncfusion Team January 5, 2024 12:38 PM UTC

We have validated the reported issue and would like to inform you that we can update the legend visibility using 'IsVisibleOnLegend' both on load time and dynamically. We have attached a sample based on your requirements.

    <chart:ColumnSeries

            EnableTooltip="True"

            IsVisible="{Binding ColumnSeriesVisible}"

        IsVisibleOnLegend="{Binding ColumnSeriesVisible}"   

        ShowDataLabels="True" Label="Column"

            ItemsSource="{Binding Data}"

            XBindingPath="Name"

            YBindingPath="Height">

    </chart:ColumnSeries>

 

    <chart:LineSeries

        IsVisible="{Binding LineSeriesVisible}"

        IsVisibleOnLegend="{Binding LineSeriesVisible}"

EnableTooltip="True" ShowDataLabels="True"

        Label="Line"

        ItemsSource="{Binding Data}"

        XBindingPath="Name"

YBindingPath="Height">

    </chart:LineSeries>



If you encounter any issues with it, please let us know, and provide details for further assistance.


Attachment: SF_174888_354e0ed3.zip


CH Christopher Hofmeister January 8, 2024 07:25 PM UTC

I tried to get your example to run for hours, but Visual Studio 2022 kept hanging on the build. I tried all the usual tricks, but couldn't get it to run and started bringing the example code into a new project. I was able to replicate the behavior I was seeing by making some modifications to it. I could share this new project, but it has my license information associated with it. I will try and paste the relevant code below instead.

I declared the two properties:

 [ObservableProperty] bool lineSeriesVisible;
[ObservableProperty] bool columnSeriesVisible;

I simulated an async load of data with a timer in the constructor:

public HomeViewModel()
{
PageTitle = "Home View";
_loadTimer = new System.Timers.Timer();

_loadTimer.Interval = 1000;
_loadTimer.Elapsed += _loadTimer_Elapsed;
_loadTimer.AutoReset = false;
_loadTimer.Start();
}

private async void _loadTimer_Elapsed(object? sender, System.Timers.ElapsedEventArgs e)
{
ChartSeriesName = "Column Series";
await GetChartData();
}

Then in GetChartData() I set the visibility of the Column:

public async Task GetChartData()
{
LineSeriesVisible = false;
ColumnSeriesVisible = true;
Data = new ObservableCollection()
{
new Person { Name = "David", Height = 0.170 },
new Person { Name = "Michael", Height = 0.06 },
new Person { Name = "Steve", Height = 1.65 },
new Person { Name = "Joel", Height = 2.182 },
new Person { Name = "Bob", Height = 0.134 }
};
await Task.CompletedTask;
}

In this case, the chart legend does not show:

Image_4085_1704727340675


Attachment: HomeViewModel_e7de7a2f.zip



NM Nanthini Mahalingam Syncfusion Team January 9, 2024 01:27 PM UTC

Hi Christopher ,


Thank you for the code snippet. Our development team is validating the details and will provide an update on January 11, 2024.


Regards,

Nanthini M.




NM Nanthini Mahalingam Syncfusion Team January 11, 2024 12:41 PM UTC

Hi Christopher,


With the provided code snippet, we were able to reproduce the issue of the legend disappearing randomly on load time in Windows. However, we have not been able to find the exact root cause of this issue and need some more time.


Additionally, have you noticed any other scenarios where the issue can be reproduced? That would assist us in resolving the issue sooner.


We will update you on the status within two business days (16/01/2024).


Regards,

Nanthini M.



CH Christopher Hofmeister January 11, 2024 05:23 PM UTC

I am having the issue on Android 12 on a Samsung S10+ device. I have not tried it on iOS.  And it is not random, it happens every time.



NM Nanthini Mahalingam Syncfusion Team January 12, 2024 02:09 PM UTC

Hi Christopher,


Thank you for your update. Currently, our development team is validating the issue of the disappeared legend on the mentioned device with our end, and we will update the status within two business days (16/01/2024).


Regards,

Nanthini M



NM Nanthini Mahalingam Syncfusion Team January 16, 2024 01:42 PM UTC

Hi Christopher,


We reproduced the reported issue at our end at the mentioned device and considered legend disappeared issue at load time as a bug and created the bug feedback in the following link.

https://www.syncfusion.com/feedback/50000/legend-disappears-when-observable-property-binding-of-isvisibleonlegend-in

We will fix the reported issue in the upcoming weekly NuGet, which is expected to roll out on or before January 31st, 2024.


Regards,

Nanthini M.



NM Nanthini Mahalingam Syncfusion Team January 31, 2024 02:42 PM UTC

Hi Christopher,


Currently, we have fixed the reported issue where the legend disappeared at load time when binding the observable property IsVisibleOnLegend in SfCartesianChart.


Due to the 2023 Vol 4 Service Pack release, we do not have a weekly NuGet release this week. Therefore, the fix will be included in the upcoming weekly NuGet release, scheduled on or before February 7th, 2024.


We appreciate your patience.


Regards,

Nanthini



NM Nanthini Mahalingam Syncfusion Team February 6, 2024 01:38 PM UTC

Hi Christopher,


We are glad to announce that the fix for the reported issue where the legend disappeared at load time when binding the observable property IsVisibleOnLegend in SfCartesianChart has been included in our latest weekly NuGet release, version 24.2.4 which is available for download (https://www.nuget.org).


NuGet Version: 24.2.4


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



Regards,

Nanthini M.


Loader.
Up arrow icon