Horizontal bars - value labels are clipped

[Mike Shilkov]

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!

[Rosko]

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

[Mike Shilkov]

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

[Rosko]

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

[Mike Shilkov]

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

[Rosko]

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

[sai]

HI,

 

Please check attached snapshot.

 

i am using cartesian chart.

label edges cutting in the chart.

 

please provide the solution for this.

[Martin Ivanov]

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

[sai]

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.

[Martin Ivanov]

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

[sai]

Thank you.

The solution is really helped me.