New to Telerik UI for .NET MAUI? Start a free 30-day trial

Change the Position of the Labels Inside the Bar Series and Customize the Vertical Axis


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


How to change the position of the labels inside the bar series and customize the vertical axis?


To customize the chart vertical axis and to change the position of the labels inside the bar series, use the native Chart for WinUI.

1. Define the Chart in XAML:

<Grid RowDefinitions="*">
    <telerik:RadCartesianChart x:Name="barChart" 
            <local:ViewModel />
            <telerik:CategoricalAxis LabelFitMode="MultiLine" 
                                        PlotMode="BetweenTicks" />
            <telerik:NumericalAxis LabelFitMode="MultiLine" 
                                    ShowLabels="False" />
            <telerik:BarSeries ValueBinding="Value"
            CategoryBinding="Category" ShowLabels="True" 
            ItemsSource="{Binding Data}" />
            <telerik:ChartTooltipBehavior TriggerMode="Tap" />

2. Add sample data and view model:

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;

3. Subscribe to chart HandlerChanged event to access the native control:

private void barChart_HandlerChanged(object sender, EventArgs e)
    var platformView = this.barChart.Handler.PlatformView;
    var platformChart = (Telerik.UI.Xaml.Controls.Chart.RadCartesianChart)platformView;
    var series = (Telerik.UI.Xaml.Controls.Chart.BarSeries)platformChart.Series[0];
    // Style the vertical axis. The resource is inside the Platforms/Windows/App.xaml file.
    platformChart.VerticalAxis.LineStyle = MauiWinUIApplication.Current.Resources["VerticalAxisStyle"] as Microsoft.UI.Xaml.Style;

    // Customize the labels for the bar series, for example change their position.
    var labelDefinition = series.LabelDefinitions.FirstOrDefault();
    if (labelDefinition != null)
        labelDefinition.HorizontalAlignment = Microsoft.UI.Xaml.HorizontalAlignment.Center;
        labelDefinition.VerticalAlignment = Microsoft.UI.Xaml.VerticalAlignment.Top;

4. The style resource is inside the Platforms/Windows/App.xaml file:

<Style TargetType="Line" x:Key="VerticalAxisStyle">
    <Setter Property="Stroke" Value="Red"/>
    <Setter Property="StrokeDashArray" Value="2 2"/>
In this article