Align label definitions left for bar series

[Giuliano]

Hello,

 

I'm trying to see if there is a way to align a chart label so that it shows up inside the bar but left aligned. Here is what I have right now:

I'd like for the numbers to be left aligned but still in the bar:

 

Here is the xaml I have:

<Window x:Class="TestRadCartesianChart.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        xmlns:local="clr-namespace:TestRadCartesianChart"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>

        <telerik:RadCartesianChart>

            <telerik:RadCartesianChart.Series>
                <telerik:BarSeries ShowLabels="True"
                                   CategoryBinding="Category"
                                   ValueBinding="Value">

                    <telerik:BarSeries.LabelDefinitions>

                        <telerik:ChartSeriesLabelDefinition HorizontalAlignment="Center" VerticalAlignment="Center">
                            <telerik:ChartSeriesLabelDefinition.Template>
                                <DataTemplate>
                                    <TextBlock Text="{Binding Value}"/>
                                </DataTemplate>
                            </telerik:ChartSeriesLabelDefinition.Template>
                        </telerik:ChartSeriesLabelDefinition>

                    </telerik:BarSeries.LabelDefinitions>

                    <telerik:BarSeries.DataPoints>
                        <telerik:CategoricalDataPoint Category="Apples" Value="20"/>
                        <telerik:CategoricalDataPoint Category="Bananas" Value="28"/>
                        <telerik:CategoricalDataPoint Category="Oranges" Value="17"/>
                        <telerik:CategoricalDataPoint Category="Strawberries" Value="30"/>
                    </telerik:BarSeries.DataPoints>
                </telerik:BarSeries>
            </telerik:RadCartesianChart.Series>

            <telerik:RadCartesianChart.HorizontalAxis>
                <telerik:LinearAxis x:Name="horizontalAxis1"/>
            </telerik:RadCartesianChart.HorizontalAxis>
            
            <telerik:RadCartesianChart.VerticalAxis>
                <telerik:CategoricalAxis/>
            </telerik:RadCartesianChart.VerticalAxis>


        </telerik:RadCartesianChart>

    </Grid>
</Window>

Any help is appreciated.

 

Thank You,

Giuliano Millan

[Stenly]

Hello Giuliano,

To achieve this requirement, a custom ChartSeriesLabelStrategy will have to be implemented, in order to position the labels.

The following code snippets show this suggestion's implementation:

public class LabelStrategy : ChartSeriesLabelStrategy
{
    public override LabelStrategyOptions Options
    {
        get
        {
            return LabelStrategyOptions.Arrange;
        }
    }

    public override RadRect GetLabelLayoutSlot(DataPoint point, FrameworkElement visual, int labelIndex)
    {
        var heightOffset = point.LayoutSlot.Y + (point.LayoutSlot.Height / (double)2) - visual.DesiredSize.Height / (double)2;
        var rect = new RadRect(new RadPoint(point.LayoutSlot.X, heightOffset), new RadSize(visual.DesiredSize.Width, visual.DesiredSize.Height));

        return rect;
    }
}

Then, define the custom ChartSeriesLabelStrategy, for example, as a resource, and set it to the Strategy property of a new ChartSeriesLabelDefinition instance for the LabelDefinitions collection of the BarSeries instance:

<Grid>
    <Grid.Resources>
        <local:LabelStrategy x:Key="LabelStrategy"/>
    </Grid.Resources>
    <telerik:RadCartesianChart>
        <telerik:RadCartesianChart.VerticalAxis>
            <telerik:CategoricalAxis />
        </telerik:RadCartesianChart.VerticalAxis>
        <telerik:RadCartesianChart.HorizontalAxis>
            <telerik:LinearAxis/>
        </telerik:RadCartesianChart.HorizontalAxis>
        <telerik:RadCartesianChart.Series>
            <telerik:BarSeries ShowLabels="True"  
                   CategoryBinding="Category"  
                   ValueBinding="Value"  
                   ItemsSource="{Binding}">
                <telerik:BarSeries.LabelDefinitions>
                    <telerik:ChartSeriesLabelDefinition Strategy="{StaticResource LabelStrategy}">
                        <telerik:ChartSeriesLabelDefinition.DefaultVisualStyle>
                            <Style TargetType="TextBlock">
                                <Setter Property="Foreground" Value="White"/>
                            </Style>
                        </telerik:ChartSeriesLabelDefinition.DefaultVisualStyle>
                    </telerik:ChartSeriesLabelDefinition>
                </telerik:BarSeries.LabelDefinitions>
            </telerik:BarSeries>
        </telerik:RadCartesianChart.Series>
    </telerik:RadCartesianChart>
</Grid>

The produced result is as follows:

With this being said, I have attached a test application, which contains the above implemetnation.

Regards,
Stenly
Progress Telerik

[Giuliano]

Thank You!