Horizontal bars - value labels are clipped

11 posts, 1 answers
  1. Mike Shilkov
    Mike Shilkov avatar
    30 posts
    Member since:
    Apr 2010

    Posted 25 Jul 2012 Link to this post

    I have a simple horizontal bar ChartView:
    <chart:RadCartesianChart x:Name="Chart">
        <chartView:BarSeries ShowLabels="True" ValueBinding="Value" CategoryBinding="Title">
            <chartView:BarSeries.LabelDefinitions>
            </chartView:BarSeries.LabelDefinitions>
        </chartView:BarSeries>
        <chart:RadCartesianChart.HorizontalAxis>
            <chartView:LinearAxis />
        </chart:RadCartesianChart.HorizontalAxis>
        <chart:RadCartesianChart.VerticalAxis>
            <chartView:CategoricalAxis x:Name="YAxis" />
        </chart:RadCartesianChart.VerticalAxis>
        <chart:RadCartesianChart.Grid>
            <chartView:CartesianChartGrid />
        </chart:RadCartesianChart.Grid>
    </chart:RadCartesianChart>

    The result looks like this:
    (bar.png)

    Two questions:
    1. Why are value labels clipped?
    2. How do I limit the width of Y axis labels, so that they wrap on second line if needed?

    Thanks!
  2. Rosko
    Admin
    Rosko avatar
    137 posts

    Posted 30 Jul 2012 Link to this post

    Hi Mike,

    Straight to you questions.

    1. The label is clipped because there is not enough space. I can propose two options to avoid this. The first one is to increase the maximum of your horizontal axis, there is more space.
    <telerik:RadCartesianChart.HorizontalAxis>
        <telerik:LinearAxis Maximum="100"/>
    </telerik:RadCartesianChart.HorizontalAxis>
    Or, you can format the location of the label by leaving less space between the label and the bar, the following way:
    <telerik:BarSeries.LabelDefinitions>
       <telerik:ChartSeriesLabelDefinition Margin="10,0,0,0"
                                VerticalAlignment="Center"
                                HorizontalAlignment="Right"/>
    </telerik:BarSeries.LabelDefinitions>

    2. You can limit the width of the labels by styling them.
    <telerik:RadCartesianChart.VerticalAxis>
       <telerik:CategoricalAxis x:Name="YAxis">
          <telerik:CategoricalAxis.LabelStyle>
             <Style TargetType="TextBlock">
                <Setter Property="TextWrapping" Value="Wrap"/>
                <Setter Property="Width" Value="50"/>
             </Style>
          </telerik:CategoricalAxis.LabelStyle>
       </telerik:CategoricalAxis>
    </telerik:RadCartesianChart.VerticalAxis>


    I hope this will help you to achieve the desired effect.

    Kind regards,
    Rosko
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. DevCraft banner
  4. Mike Shilkov
    Mike Shilkov avatar
    30 posts
    Member since:
    Apr 2010

    Posted 30 Jul 2012 Link to this post

    Hi Rosko, thanks for your reply.

    I'm OK with 1 but still not satisfied with 2 for the following reasons:
    1. Somehow, the width of textblock is not applied if I add 
    <Setter Property="HorizontalAlignment" Value="Right" />
    If I don't, the labels are left-aligned in IE.
    2. I would like to set MaxWidth, not Width (as labels might be short), but
    <Setter Property="MaxWidth" Value="70"/>
    doesn't work.

    and additional 
    3. How do I remove the gap between the end of bar labels and right chart border (see the screenshot)?

    Thanks!
    ---
    Mike
  5. Answer
    Rosko
    Admin
    Rosko avatar
    137 posts

    Posted 02 Aug 2012 Link to this post

    Hello Mike,

    There is one more possible solution to all three current issues. Please, excuse us for not providing it earliear. There two properties which disable/enable the clipping: ClipToBounds and ClipToPlotArea. If you set them both to false, all the labels will be extending over all the margins, including the one you pointed in issue 3. The only limit will be the border of browser window itself, to avoid this you can set some margins for the whole RadCartesianChart so you have some white space for the labels.
    <telerik:RadCartesianChart x:Name="Chart" ClipToBounds="False">
       <telerik:BarSeries ShowLabels="True" ClipToPlotArea="False" ValueBinding="Value" CategoryBinding="Title">

    I hope this will meet all your needs.

    Kind regards,
    Rosko
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  6. Mike Shilkov
    Mike Shilkov avatar
    30 posts
    Member since:
    Apr 2010

    Posted 02 Aug 2012 Link to this post

    Thanks, this solves the clipping issue.
    Do you have any advice on items 1,2 of my previous post? (Width, MaxWidth and alignment)
  7. Rosko
    Admin
    Rosko avatar
    137 posts

    Posted 06 Aug 2012 Link to this post

    Hello Mike,

    This is a rather complex issue. After all the calculations related to the length of all strings, the labels end up with the same ActualWidth. I realize that you can have strings of variable length. My advice is to use Wrapping and to set the the Width to a value of you choice, for instance, 50. Then when you have a string of several words of a total length 80, it will fit the first couple of words which fit into 50 and rest will be on the next line.

    All the best,
    Rosko
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  8. sai
    sai avatar
    43 posts
    Member since:
    Feb 2015

    Posted 14 May 2015 in reply to Rosko Link to this post

    HI,

     

    Please check attached snapshot.

     

    i am using cartesian chart.

    label edges cutting in the chart.

     

    please provide the solution for this.

  9. Martin
    Admin
    Martin avatar
    1099 posts

    Posted 15 May 2015 Link to this post

    Hello Mike,

    If you are using the RadCartesianChart control which is part of the new RadChartView suite you can set the bar series' ClipToPlotArea property to False. This way the labels won't get clipped. 
    <telerik:BarSeries ClipToPlotArea="False">
    If you are using the old RadChart I recommend you to give a try to RadChartView which resolves many of the known issues and limitation of the old charting controls. Also the new charts suite has  better implementation improved performance. You can read about the differences between the controls in the RadChart vs. RadChartView help article.

    Regards,
    Martin
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  10. sai
    sai avatar
    43 posts
    Member since:
    Feb 2015

    Posted 21 May 2015 in reply to Martin Link to this post

    Hi,

     

    As per the prsesent decisions.managment not planing to upgrade to latest version of telrik until we release the first version.

     

    curently we are using CartesianChartGrid
     and categoricalseries

    and i already set ClipToPlotArea="True" to avoid the graph overlap in y-axis.

     

    so please let me know any other soluiton to fix this.

  11. Martin
    Admin
    Martin avatar
    1099 posts

    Posted 25 May 2015 Link to this post

    Hi Sai,

    In this case you can consider using Smart Labels feature of the chart which will position the labels so that they do not overlap one another and they stay in the plot area.

    Another thing you can try is to subscribe for the Loaded event of the series and find the Canvas element that renders its labels. Then set the Canvas' Clip property to null. This will force the labels not to clip in the plot area.

    Regards,
    Martin
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  12. sai
    sai avatar
    43 posts
    Member since:
    Feb 2015

    Posted 04 Jun 2015 in reply to Martin Link to this post

    Thank you.

    The solution is really helped me.

Back to Top
DevCraft banner