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

Environment

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

Description

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

Solution

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" 
                                HandlerChanged="barChart_HandlerChanged">
        <telerik:RadCartesianChart.BindingContext>
            <local:ViewModel />
        </telerik:RadCartesianChart.BindingContext>
        <telerik:RadCartesianChart.HorizontalAxis>
            <telerik:CategoricalAxis LabelFitMode="MultiLine" 
                                        PlotMode="BetweenTicks" />
        </telerik:RadCartesianChart.HorizontalAxis>
        <telerik:RadCartesianChart.VerticalAxis>
            <telerik:NumericalAxis LabelFitMode="MultiLine" 
                                    MajorTickThickness="0"
                                    ShowLabels="False" />
        </telerik:RadCartesianChart.VerticalAxis>
        <telerik:RadCartesianChart.Series>
            <telerik:BarSeries ValueBinding="Value"
            CategoryBinding="Category" ShowLabels="True" 
            ItemsSource="{Binding Data}" />
        </telerik:RadCartesianChart.Series>
        <telerik:RadCartesianChart.ChartBehaviors>
            <telerik:ChartTooltipBehavior TriggerMode="Tap" />
        </telerik:RadCartesianChart.ChartBehaviors>
    </telerik:RadCartesianChart>
</Grid>

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;
#if WINDOWS
    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;
    }
#endif
}

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"/>
</Style>