BarSeries Label Position

7 posts, 1 answers
  1. Nikituki
    Nikituki avatar
    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.
  2. Nikituki
    Nikituki avatar
    34 posts
    Member since:
    Nov 2011

    Posted 15 Feb 2012 Link to this post

    up!
  3. DevCraft banner
  4. Giuseppe
    Admin
    Giuseppe avatar
    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 >>
  5. Nikituki
    Nikituki avatar
    34 posts
    Member since:
    Nov 2011

    Posted 15 Feb 2012 Link to this post

    Label does not fit when text width greater than 30
  6. Answer
    Giuseppe
    Admin
    Giuseppe avatar
    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: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 >>
  7. Nikituki
    Nikituki avatar
    34 posts
    Member since:
    Nov 2011

    Posted 22 Feb 2012 Link to this post

    thx
  8. kity
    kity avatar
    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:ChartSeriesLabelDefinition HorizontalAlignment="Right" VerticalAlignment="Center"  />-->
                                 
                            </telerik:BarSeries.LabelDefinitions>
Back to Top
DevCraft banner