Bar chart label far away from axis

[Mingxue]

Hi, I am using telerik:RadCartesianChart in my UI. But I can't control the alignment of the vertical labels.

My code looks like this:

================================================================================================

            <Style x:Key="BarLabelTextStyle" TargetType="TextBlock">
                <Setter Property="FontFamily" Value="Segoe UI" />
                <Setter Property="HorizontalAlignment" Value="Center"></Setter>
                <Setter Property="Width" Value="40"></Setter>
            </Style>

<telerik:RadCartesianChart x:Name="BarChart" Grid.Row="1"
                                       VerticalAlignment="Stretch"
                                       HorizontalAlignment="Stretch">
                <telerik:RadCartesianChart.HorizontalAxis>
                    <telerik:CategoricalAxis GapLength="0.4"
                                             LabelFitMode="Rotate"
                                             ShowLabels="True"
                                             SmartLabelsMode="SmartStep"
                                             LabelStyle="{StaticResource BarLabelTextStyle}"
                                             PlotMode="OnTicksPadded" />
                </telerik:RadCartesianChart.HorizontalAxis>
                <telerik:RadCartesianChart.VerticalAxis>
                    <telerik:LinearAxis Maximum="{Binding MaxCount}"
                                        Minimum="{Binding MinCount}"
                                        ShowLabels="True"
                                        LabelStyle="{StaticResource BarLabelTextStyle}" />
                </telerik:RadCartesianChart.VerticalAxis>
                <telerik:RadCartesianChart.Grid>
                    <telerik:CartesianChartGrid MajorLinesVisibility="Y" />
                </telerik:RadCartesianChart.Grid>
                <telerik:BarSeries CategoryBinding="Name"
                                   ValueBinding="Proportion"
                                   ItemsSource="{Binding CheckedListItems}"
                                   ShowLabels="{Binding LabelEnabled}"
                                   CombineMode="Cluster"
                                   IsHitTestVisible="True">
                    <telerik:BarSeries.PointTemplate>
                        <DataTemplate>
                            <Border
                                Background="{Binding DataItem, Converter={StaticResource SliceToBarBrushConverter}}"
                                MouseEnter="BarElement_MouseEnter"
                                MouseLeave="BarElement_MouseLeave" />
                        </DataTemplate>
                    </telerik:BarSeries.PointTemplate>
                </telerik:BarSeries>
                <telerik:RadCartesianChart.Behaviors>
                    <telerik:ChartTrackBallBehavior />
                    <telerik:ChartPanAndZoomBehavior x:Name="ZoomPanBehavior" ZoomMode="None" PanMode="None"
                                                     DragMode="Pan" />
                    <telerik:ChartSelectionBehavior DataPointSelectionMode="Multiple" HitTestMargin="2"
                                                    SelectionChanged="BarChartSelectionBehavior_SelectionChanged" />
                </telerik:RadCartesianChart.Behaviors>
            </telerik:RadCartesianChart>

================================================================================================

Changing the BarLabelTextStyle HorizontalAlignment is not affecting anything for bar labels.

The result looks like from attachment. You can see that the first bar chart's vertical labels are too far away from axis. And the second bar chart's labels are too close to the first bar chart, comparing to it's own axis.

Is there something I can do here?

Thanks.

 

 

[Dinko | Tech Support Engineer]

Hi Mingxue,

Thank you for the provided information.

Looking at the code snippet in your post we can see that you have set the Width property of the TextBlock. In this case, you can change the position of the labels by setting the TextAlignment property of the TextBlock control.

<Style x:Key="BarLabelTextStyle" TargetType="TextBlock">
    <Setter Property="FontFamily" Value="Segoe UI" />
    <Setter Property="Width" Value="40"></Setter>
    <Setter Property="TextAlignment" Value="Center"/>
</Style>

Another approach that you can try is to remove the Width of the TextBlock and set only a Margin on the right of the labels.

<Style x:Key="BarLabelTextStyle" TargetType="TextBlock">
    <Setter Property="FontFamily" Value="Segoe UI" />
    <Setter Property="Margin" Value="0,0,10,0"></Setter>
</Style>

Give these approaches a try and let us know if they for you.

Regards,
Dinko
Telerik

[Mingxue]

Thanks Dinko.

What I ended up is to remove the Width=50 from style definition. This way, label's Width by default is Auto, and will always shows up in bar chart. And it aligns with the axis well.

I guess TextAlignment is what I really need, but to set Width with a fixed value, would sometime cut out texts. So I will go with Auto for the moment.

Really appreciate your help and quick responses. I also learned from it.