Skip to content

Latest commit

 

History

History
147 lines (122 loc) · 4.7 KB

chart-pieseries-customization.md

File metadata and controls

147 lines (122 loc) · 4.7 KB
title description type page_title slug position tags ticketid res_type
Customize PieChart Series Text, Color and FontSize
This article described how to customize the text, color, font size of the chart PieSeries. Learn more!
how-to
Label Customization for Chart Pie Series
chart-pieseries-customization
chart, pie series, label customization, textcolor, fornsize
1618857
kb

Environment

Version Product Author
6.6.0 Telerik UI for .NET MAUI Chart Dobrinka Yordanova

Description

This article described how to customize the text, color, font size of the chart PieSeries.

Solution

For this purpose you have to use the native chart.

1. Chart definition in XAML

<telerik:RadPieChart x:Name="chart" HandlerChanged="chart_HandlerChanged">
    <telerik:RadPieChart.BindingContext>
        <local:ViewModel />
    </telerik:RadPieChart.BindingContext>
    <telerik:RadPieChart.Series>
        <telerik:PieSeries ShowLabels="True"
                    RadiusFactor="0.8"
                    ValueBinding="Value"
                    ItemsSource="{Binding Data}" />
    </telerik:RadPieChart.Series>
</telerik:RadPieChart>

2. The namespace

xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"

3. DataModel and ViewModel

public class CategoricalData
{
    public object Category { get; set; }
    public double Value { get; set; }
}

public class ViewModel
{
    public ObservableCollection<CategoricalData> Data { get; set; }

    public ViewModel()
    {
        this.Data = GetCategoricalData();
    }

    private static ObservableCollection<CategoricalData> GetCategoricalData()
    {
        var data = new ObservableCollection<CategoricalData>
    {
        new CategoricalData { Category = "Greenings", Value = 52 },
        new CategoricalData { Category = "Perfecto", Value = 19 },
        new CategoricalData { Category = "NearBy", Value = 82 },
        new CategoricalData { Category = "Family", Value = 23 },
        new CategoricalData { Category = "Fresh", Value = 56 },
    };
        return data;
    }
}

4. Subscribe to the Chart.HandlerChanged event to access the native chart and implement the customizations per platform:

private void chart_HandlerChanged(object sender, EventArgs e)
{
    this.UpdateChart();
}

private void UpdateChart()
{
    var platformView = this.chart.Handler.PlatformView;

    // Implementation on Android
#if ANDROID
    var platformChart = (Com.Telerik.Widget.Chart.Visualization.PieChart.RadPieChartView)platformView;
    var platformSeries = (Com.Telerik.Widget.Chart.Visualization.PieChart.PieSeries)platformChart.Series.Get(0);

    platformSeries.LabelFillColor = Android.Graphics.Color.Red;
    platformSeries.LabelTextColor = Android.Graphics.Color.Blue;

// Implementation on MacCatalyst and iOS
#elif IOS || MACCATALYST
    var platformChart = (Telerik.Maui.Controls.Compatibility.ChartRenderer.iOS.TKExtendedChart)platformView;
    var platformSeries = (TelerikUI.TKChartPieSeries)platformChart.Series[0];
    platformSeries.Style.PointLabelStyle.TextColor = UIKit.UIColor.Green;
    platformSeries.Style.PointLabelStyle.TextHidden = false;
    platformSeries.Style.PointLabelStyle.StringFormat = "$ %.0f";

    // Implementation on WInUI
#elif WINDOWS
    var platformChart = (Telerik.UI.Xaml.Controls.Chart.RadPieChart)platformView;
    var platformSeries = (Telerik.UI.Xaml.Controls.Chart.PieSeries)platformChart.Series[0];
    platformSeries.LabelDefinitions.Clear();
    platformSeries.LabelDefinitions.Add(new Telerik.UI.Xaml.Controls.Chart.ChartSeriesLabelDefinition 
    { 
            
        LabelTemplate = MauiWinUIApplication.Current.Resources["PieLabelTemplate"] as Microsoft.UI.Xaml.DataTemplate
});
#endif
}

5. Define the PieLabelTemplate inside the Platforms/Windows/App.xaml file:

<maui:MauiWinUIApplication
    x:Class="ShellApp.WinUI.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:maui="using:Microsoft.Maui"
    xmlns:local="using:ShellApp.WinUI">
    <maui:MauiWinUIApplication.Resources>
        <ResourceDictionary>
            <DataTemplate x:Key="PieLabelTemplate">
                <Grid Background="Red">
                    <TextBlock Text="{Binding DataItem.Value}"
                               Foreground="White"
                               FontWeight="Bold"
                               FontSize="10"
                               Margin="5" />
                </Grid>
            </DataTemplate>
        </ResourceDictionary>
    </maui:MauiWinUIApplication.Resources>
</maui:MauiWinUIApplication>