Bar chart label far away from axis

3 posts, 1 answers
  1. Mingxue
    Mingxue avatar
    25 posts
    Member since:
    Apr 2016

    Posted 18 Apr Link to this post

    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.

     

     

  2. Answer
    Dinko
    Admin
    Dinko avatar
    201 posts

    Posted 20 Apr Link to this post

    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 works for you.

    Regards,
    Dinko
    Telerik
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  3. UI for WPF is Visual Studio 2017 Ready
  4. Mingxue
    Mingxue avatar
    25 posts
    Member since:
    Apr 2016

    Posted 25 Apr in reply to Dinko Link to this post

    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.

Back to Top