Setting static resource for piechart

Hello,

I'm wondering if there is a way to set a static resource for the Syncfusion pie charts. 

Here is an example of the XAML code I'm using now:

     

       <chart:SfCircularChart HorizontalOptions="Start" MaximumWidthRequest="250" Style ="{StaticResource ChartTesting}">

                    <chart:SfCircularChart.BindingContext>

                        <model:ChartViewModel/>

                    </chart:SfCircularChart.BindingContext>

                    <chart:PieSeries chart:ShowDataLabels="True" ItemsSource="{Binding Data}"

                    XBindingPath="Product"

                    YBindingPath="SalesRate"/>

                    <chart:SfCircularChart.Title>

                        <Label Text="PRODUCT SALES" HorizontalOptions="Center"/>

                    </chart:SfCircularChart.Title>

                    <chart:SfCircularChart.Legend>

                        <chart:ChartLegend/>

                    </chart:SfCircularChart.Legend>

                </chart:SfCircularChart>



                <chart:SfCircularChart HorizontalOptions="Start" MaximumWidthRequest="250">

                    <chart:SfCircularChart.BindingContext>

                        <model:ChartViewModel/>

                    </chart:SfCircularChart.BindingContext>

                    <chart:PieSeries chart:ShowDataLabels="True" ItemsSource="{Binding DataTwo}"

                    XBindingPath="Product"

                    YBindingPath="SalesRate"/>

                    <chart:SfCircularChart.Title>

                        <Label Text="PRODUCT SALES TWO" HorizontalOptions="Center"/>

                    </chart:SfCircularChart.Title>

                    <chart:SfCircularChart.Legend>

                        <chart:ChartLegend Placement="Bottom"/>

                    </chart:SfCircularChart.Legend>

                </chart:SfCircularChart>



                <chart:SfCircularChart HorizontalOptions="Start" MaximumWidthRequest="250">

                    <chart:SfCircularChart.BindingContext>

                        <model:ChartViewModel/>

                    </chart:SfCircularChart.BindingContext>

                    <chart:PieSeries chart:ShowDataLabels="True" ItemsSource="{Binding DataThree}"

                    XBindingPath="Product"

                    YBindingPath="SalesRate"/>

                    <chart:SfCircularChart.Title>

                        <Label Text="PRODUCT SALES THREE" HorizontalOptions="Center"/>

                    </chart:SfCircularChart.Title>

                    <chart:SfCircularChart.Legend>

                        <chart:ChartLegend/>

                    </chart:SfCircularChart.Legend>

                </chart:SfCircularChart>


In this code, I have three charts. The style of the first chart I was able to set using a static resource (called ChartTesting in my code), like this:

    <ContentPage.Resources>

        <Style

            x:Key="ButtonTesting"

            TargetType="Button">

            <Setter Property="HorizontalOptions" Value="Center" />

            <Setter Property="VerticalOptions" Value="Center" />

            <Setter Property="FontSize" Value="18" />

            <Setter Property="TextColor" Value="Red" />

        </Style>


        <Style

            x:Key="ChartTesting"

            TargetType="chart:SfCircularChart">

            <Setter Property="BackgroundColor" Value="AliceBlue"/>

        </Style>

    </ContentPage.Resources>


However, I've been unable to figure out how to set a static resource for  chart:PieSeries element. Such as setting  chart:ShowDataLabels="True"  within the ContentPage.Resources portion of the XAML code, then referencing it for each of my PieSeries.


Does anyone know how to do this?


Thanks,


DB



4 Replies

MA Malik August 31, 2022 12:45 PM UTC

Pie charts make sense to show a parts-to-whole relationship for categorical or nominal data. The slices in the pie typically represent percentages of the total. With categorical data, the sample is often divided into groups and the responses have a defined order.

Regard: beyblades



DD Devakumar Dhanapoosanam Syncfusion Team September 1, 2022 01:44 PM UTC

Hi Dustin,


We can use the content page resource by adding a boolean and set using the StaticResource for all series as per in the below code example.


<ContentPage.Resources>

    <ResourceDictionary>

        <x:Boolean x:Key="EnableDataLabels">True</x:Boolean>

    </ResourceDictionary>

</ContentPage.Resources>

<chart:PieSeries chart:ShowDataLabels="{StaticResource EnableDataLabels}" ItemsSource="{Binding Data1}"

    XBindingPath="XValue"

    YBindingPath="YValue"/>

<
chart:PieSeries chart:ShowDataLabels="{StaticResource EnableDataLabels}" ItemsSource="{Binding Data2}"

    XBindingPath="XValue"

    YBindingPath="YValue"/>


Please find the example sample in the attachment below and let us know if you need any further assistance.


Regards,

Devakumar D


Attachment: SF_177184_8d682736.zip


DU Dustin replied to Devakumar Dhanapoosanam September 2, 2022 12:25 AM UTC

Hi Devakumar,


Thanks for your reply. How can I access the label and legend font size/color etc.? In Xamain.Forms I could find these, but in the .net MAUI version I can't seem to access them. 


T



DD Devakumar Dhanapoosanam Syncfusion Team September 2, 2022 10:13 AM UTC

Hi Dustin,


Currently, MAUI chart Legend does not have customization support. 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.


https://help.syncfusion.com/maui/cartesian-charts/migration#legend

https://help.syncfusion.com/maui/cartesian-charts/migration#upcoming-features-in-net-maui


Regards,

Devakumar D


Loader.
Up arrow icon