BarSeries Label Position

[Nikituki]

Hello,

how can I to change label position at  horizontal BarSeries? I'd like to located label at right of Y axis.

[Nikituki]

up!

[Giuseppe]

Hello there,

You can achieve the desired effect like this:

<telerik:RadCartesianChart x:Name="RadChart1" Palette="Metro">
    <telerik:BarSeries ShowLabels="True">
        <telerik:CategoricalDataPoint Category="C1" Value="20" />
        <telerik:CategoricalDataPoint Category="C2" Value="70" />
        <telerik:CategoricalDataPoint Category="C3" Value="90" />

        <telerik:BarSeries.LabelDefinitions>
            <telerik:ChartSeriesLabelDefinition HorizontalAlignment="Left"
                                     VerticalAlignment="Center"
                                     Margin="30,0,0,0" />
        </telerik:BarSeries.LabelDefinitions>
    </telerik:BarSeries>
    <telerik:RadCartesianChart.HorizontalAxis>
        <telerik:LinearAxis />
    </telerik:RadCartesianChart.HorizontalAxis>
    <telerik:RadCartesianChart.VerticalAxis>
        <telerik:CategoricalAxis />
    </telerik:RadCartesianChart.VerticalAxis>
</telerik:RadCartesianChart>

Regards,
Giuseppe
the Telerik team

[Nikituki]

Label does not fit when text width greater than 30

[Giuseppe]

Hello there,

You can either adjust the ChartSeriesLabelDefinition.Margin.Left value accordingly:

<telerik:RadCartesianChart x:Name="RadChart1" Palette="Metro">
    <telerik:BarSeries ShowLabels="True">
        <telerik:CategoricalDataPoint Category="C1" Value="20" Label="text text text text text text text text 1" />
        <telerik:CategoricalDataPoint Category="C2" Value="70" Label="text text text text text text text text 2" />
        <telerik:CategoricalDataPoint Category="C3" Value="90" Label="text text text text text text text text 3" />

        <telerik:BarSeries.LabelDefinitions>
            <telerik:ChartSeriesLabelDefinition HorizontalAlignment="Left"
                                                VerticalAlignment="Center"
                                                Margin="220,0,0,0" />
        </telerik:BarSeries.LabelDefinitions>
    </telerik:BarSeries>
    <telerik:RadCartesianChart.HorizontalAxis>
        <telerik:LinearAxis />
    </telerik:RadCartesianChart.HorizontalAxis>
    <telerik:RadCartesianChart.VerticalAxis>
        <telerik:CategoricalAxis />
    </telerik:RadCartesianChart.VerticalAxis>
</telerik:RadCartesianChart>

Or In case your data is not static (i.e. the label size can differ and you cannot hardcode the Margin value), you will need to implement custom ChartSeriesLabelStrategy and dynamically arrange the series item labels on your own like this:

XAML

<UserControl x:Class="SilverlightApplication5.MainPage"
    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:demo="clr-namespace:SilverlightApplication5"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid>

        <telerik:RadCartesianChart x:Name="RadChart1" Palette="Metro">
            <telerik:BarSeries ShowLabels="True">
                <telerik:CategoricalDataPoint Category="C1" Value="20" Label="Text text text text text text text text 1" />
                <telerik:CategoricalDataPoint Category="C2" Value="70" Label="Text text text text text text text text 2" />
                <telerik:CategoricalDataPoint Category="C3" Value="90" Label="Text text text text text text text text 3" />
                <telerik:CategoricalDataPoint Category="C4" Value="20" Label="Text" />
                <telerik:CategoricalDataPoint Category="C5" Value="70" Label="Text text" />
                <telerik:CategoricalDataPoint Category="C6" Value="90" Label="Text text text " />
                <telerik:CategoricalDataPoint Category="C7" Value="20" Label="T" />

                <telerik:BarSeries.LabelDefinitions>
                    <telerik:ChartSeriesLabelDefinition>
                        <telerik:ChartSeriesLabelDefinition.Strategy>
                            <demo:CustomLabelStrategy />
                        </telerik:ChartSeriesLabelDefinition.Strategy>
                    </telerik:ChartSeriesLabelDefinition>
                </telerik:BarSeries.LabelDefinitions>
            </telerik:BarSeries>
            <telerik:RadCartesianChart.HorizontalAxis>
                <telerik:LinearAxis />
            </telerik:RadCartesianChart.HorizontalAxis>
            <telerik:RadCartesianChart.VerticalAxis>
                <telerik:CategoricalAxis />
            </telerik:RadCartesianChart.VerticalAxis>
        </telerik:RadCartesianChart>

    </Grid>
</UserControl>

C#

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

    public override RadRect GetLabelLayoutSlot(DataPoint point, FrameworkElement visual, int labelIndex)
    {
        double x = 35;
        double y = point.LayoutSlot.Y + ((point.LayoutSlot.Height - visual.ActualHeight) / 2);

        return new RadRect(x, y, visual.ActualWidth, visual.ActualHeight);
    }
}

Hope this helps.


Regards,
Giuseppe
the Telerik team

[Nikituki]

thx

[kity]

This is the fix, to order labels at one line, at the begin. This mus be default behaiver or to have boolean property

public class CustomChartSeriesLabelStrategy : Telerik.Windows.Controls.ChartSeriesLabelStrategy
   {

       #region Overrides of ChartSeriesLabelStrategy

       public override LabelStrategyOptions Options
       {
           get
           {
               return LabelStrategyOptions.Arrange;
           }
       }

       public override RadRect GetLabelLayoutSlot(DataPoint point, FrameworkElement visual, int labelIndex)
       {
           double x = point.LayoutSlot.X; // 35;
           double y = point.LayoutSlot.Y + ((point.LayoutSlot.Height - visual.ActualHeight) / 2);
           return new RadRect(x, y, visual.ActualWidth, visual.ActualHeight);
       }

       #endregion
   }

 

xaml:

<telerik:BarSeries.LabelDefinitions>

                           <telerik:ChartSeriesLabelDefinition>
                                <telerik:ChartSeriesLabelDefinition.Strategy>
                                    <icbLib:CustomChartSeriesLabelStrategy />
                                </telerik:ChartSeriesLabelDefinition.Strategy>
                            </telerik:ChartSeriesLabelDefinition>

                            <!--<telerik:ChartSeriesLabelDefinition HorizontalAlignment="Right" VerticalAlignment="Center"  />-->

                        </telerik:BarSeries.LabelDefinitions>