Telerik Forums / UI for Silverlight Forum / ChartView /

BarSeries Label Position

Telerik UI for Silverlight
Resources Buy Try

7 posts, 1 answers

Nikituki

34 posts

Member since:
Nov 2011

Posted 13 Feb 2012 Link to this post

Hello,

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

34 posts

Member since:
Nov 2011

Posted 15 Feb 2012 Link to this post

up!
Giuseppe
Admin

2363 posts

Posted 15 Feb 2012 Link to this post

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

Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
Nikituki

34 posts

Member since:
Nov 2011

Posted 15 Feb 2012 Link to this post

Label does not fit when text width greater than 30
Answer
Giuseppe
Admin

2363 posts

Posted 15 Feb 2012 Link to this post

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

Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
Nikituki

34 posts

Member since:
Nov 2011

Posted 22 Feb 2012 Link to this post

thx
kity

71 posts

Member since:
Mar 2012
Posted 21 Aug 2012 Link to this post

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:BarSeries.LabelDefinitions>

ttt-fix.PNG

tttttt.PNG

BarSeries Label Position

Nikituki

Nikituki

Giuseppe

Nikituki

Giuseppe

Nikituki

kity