This is a migrated thread and some comments may be shown as answers.

BarSeries Label Position

6 Answers 339 Views
ChartView
This is a migrated thread and some comments may be shown as answers.
Nikituki
Top achievements
Rank 1
Nikituki asked on 13 Feb 2012, 07:37 AM
Hello,

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

6 Answers, 1 is accepted

Sort by
0
Nikituki
Top achievements
Rank 1
answered on 15 Feb 2012, 11:26 AM
up!
0
Giuseppe
Telerik team
answered on 15 Feb 2012, 02:36 PM
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 >>
0
Nikituki
Top achievements
Rank 1
answered on 15 Feb 2012, 02:47 PM
Label does not fit when text width greater than 30
0
Accepted
Giuseppe
Telerik team
answered on 15 Feb 2012, 04:00 PM
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 >>
0
Nikituki
Top achievements
Rank 1
answered on 22 Feb 2012, 12:49 PM
thx
0
kity
Top achievements
Rank 2
answered on 21 Aug 2012, 08:56 AM

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>
Tags
ChartView
Asked by
Nikituki
Top achievements
Rank 1
Answers by
Nikituki
Top achievements
Rank 1
Giuseppe
Telerik team
kity
Top achievements
Rank 2
Share this question
or