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 |
Version | Product | Author |
---|---|---|
6.6.0 | Telerik UI for .NET MAUI Chart | Dobrinka Yordanova |
This article described how to customize the text, color, font size of the chart PieSeries.
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>