Tooltip background color and Legend text color

[Jon Kao]

Hello, first of all, thanks for the great work. I have two issues here.

First, I create a Cartesian chart with 4 series, how can I change Tooltip background color to be the same as the color of respective series? Because the background color is all black by default, in Xamarin Forms, it will change automatically.

Second, how can I change TextColor of Legend by using DynamicResource in previous case, in Xamarin Form, there is a ChartLegendLabelStyle in ChartLegend and very easy to set TexColor property.

Thank you for your answers.

[Dhanaraj Rajendran]

Hi Jon Kao,

To set the tooltip background color to match the respective series color, you can bind the series' fill property with the tooltip background property. Here is a code snippet to illustrate this:

<chart:SfCartesianChart>

 

    <chart:SfCartesianChart.Resources>

        <DataTemplate x:Key="tooltipTemplate1">

            <StackLayout Orientation="Horizontal">

                <Label Text="{Binding Item.YValue}"

               TextColor="White"

               FontSize="12"

               HorizontalOptions="Center"

               VerticalOptions="Center"/>

                </StackLayout>

            </DataTemplate>

        </chart:SfCartesianChart.Resources>

 

    <chart:SfCartesianChart.TooltipBehavior>

        <chart:ChartTooltipBehavior Background="{Binding Fill,Source={x:Reference mySeries}}"/>

    </chart:SfCartesianChart.TooltipBehavior>

 

    <chart:SplineSeries x:Name="mySeries" ItemsSource="{Binding Data}" Fill="red" XBindingPath="XValue" YBindingPath="YValue" TooltipTemplate="{StaticResource tooltipTemplate1}"/>

</chart:SfCartesianChart>

At present, there isn't a straightforward method to customize legend label styling, such as changing the color, without defining a ChartLegend ItemTemplate. We considered this as a feature request and added it to our feature request list. You can track the status of this feature in the below feedback portal link.

Feedback: Adding Label Style support to Chart Legends in .NET MAUI Charts

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.

In the meantime, you can change the legend label text color using theme support as a workaround. Here is a code snippet for your reference:

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

    <Application.Resources>

        <ResourceDictionary>

            <ResourceDictionary.MergedDictionaries>

                <syncTheme:SyncfusionThemeResourceDictionary VisualTheme="MaterialLight"/>

                <ResourceDictionary>

                    <Color x:Key="SfCartesianChartLegendTextColor">Blue</Color>

                </ResourceDictionary>

            </ResourceDictionary.MergedDictionaries>

        </ResourceDictionary>

    </Application.Resources>

</Application>

Output:

Thank you for your patience. If you have any further questions or need additional assistance, please feel free to reach out.

Regards,

Dhanaraj Rajendran.

Attachment: SF_F188794_6cb41e70.zip

[Jon Kao]

Hello, thanks for your time.

About Tooltip background color to match the respective series color, what if there are two series with different x:Name? What is the proper way to bind the source?    

<chart:SfCartesianChart>

    <chart:SfCartesianChart.Resources>

        <DataTemplate x:Key="tooltipTemplate1">

            <StackLayout Orientation="Horizontal">

                <Label Text="{Binding Item.YValue}"

               TextColor="White"

               FontSize="12"

               HorizontalOptions="Center"

               VerticalOptions="Center"/>

                </StackLayout>

            </DataTemplate>

        </chart:SfCartesianChart.Resources>

 

    <chart:SfCartesianChart.TooltipBehavior>

        <chart:ChartTooltipBehavior Background="{Binding Fill,Source={x:Reference ????}}"/>

    </chart:SfCartesianChart.TooltipBehavior>

 

    <chart:SplineSeries x:Name="mySeries1" ItemsSource="{Binding Data1}" Fill="Red" XBindingPath="XValue" YBindingPath="YValue" TooltipTemplate="{StaticResource tooltipTemplate1}"/>

<chart:SplineSeries x:Name="mySeries2" ItemsSource="{Binding Data2}" Fill="Blue" XBindingPath="XValue" YBindingPath="YValue" TooltipTemplate="{StaticResource tooltipTemplate1}"/>

</chart:SfCartesianChart>

[Dhanaraj Rajendran]

Hi Jon Kao,

We have validated your query regarding the tooltip background color matching the respective series color when there are multiple series.

Currently, we provide the chart user interface based on Material Design 3 support, which sets the default tooltip background color to black. This background color is not updated based on the series fill color.

We will consult with our development team to determine if this functionality can be added as a future feature request. We will provide further details on this matter by tomorrow (20/06/2024).

Thank you for your patience and understanding.

Regards,

Dhanaraj Rajendran.

[Dhanaraj Rajendran]

Hi Jon Kao,

We have considered your request to have the tooltip background color match the respective series color and have added it to our feature request list. You can track the status and progress of this feature request through the following feedback portal link.

Feedback Link: Tooltip Background Color to Match Chart Series Color in .NET MAUI SfCartesianChart

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,

Dhanaraj Rajendran.

[Dhanaraj Rajendran]

Hi Jon Kao,

In our previous response, we missed providing the workaround to match the tooltip background color with the chart series color. In .NET MAUI SfCartesianChart, we offer tooltip template support that allows you to bind the fill of the series to the template's background color and provide different templates for each series. Here is a code snippet for your reference:

<chart:SfCartesianChart>

 

    <chart:SfCartesianChart.Resources>

        <DataTemplate x:Key="tooltipTemplate1">

            <StackLayout Orientation="Horizontal" Background="{Binding Fill,Source={x:Reference mySeries1}}">

                <Label Text="{Binding Item.YValue}" TextColor="white"  FontAttributes="Bold"                                                 FontSize="12"  HorizontalOptions="Center"   VerticalOptions="Center"/>

            </StackLayout>

        </DataTemplate>

        <DataTemplate x:Key="tooltipTemplate2">

            <StackLayout Orientation="Horizontal" Background="{Binding Fill,Source={x:Reference mySeries2}}">

                <Label Text="{Binding Item.YValue}"  TextColor="white"  FontAttributes="Bold"

                                 FontSize="12"  HorizontalOptions="Center" VerticalOptions="Center"/>

            </StackLayout>

        </DataTemplate>

    </chart:SfCartesianChart.Resources>

 

. . .

    <chart:SplineSeries x:Name="mySeries1" TooltipTemplate="{StaticResource tooltipTemplate1}"/>

    <chart:SplineSeries x:Name="mySeries2" TooltipTemplate="{StaticResource tooltipTemplate2}"/>

. . .

</chart:SfCartesianChart>

Rest assured, this feature will be available in one of our upcoming releases based on demand.

Thank you for your patience and understanding.

Regards,

Dhanaraj Rajendran.

[Jon Kao]

Hi 

Thanks for your timely reply.

Looking forward to use the feature as soon as possible.

[Dhanaraj Rajendran]

Hi Jon Kao,

Thank you for your patience and understanding.

We're excited to hear that you're looking forward to using the new feature. Our team is working diligently to implement it as soon as possible.

If you have any further questions or need assistance in the meantime, please feel free to reach out.

Regards,

Dhanaraj Rajendran.

[Jon Kao]

Hi

I have another question, do .NET MAUI chart controls can listen to property change for series currently?

[Preethi Rajakandham]

Hi Jon Kao,

Regarding your new query, we have branched it into a new thread. Please follow the link below for further updates.

https://www.syncfusion.com/forums/188989/do-net-maui-chart-controls-can-listen-to-property-change-for-series-currently-from-f188794

Regards,

Preethi R