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

Bar chart label far away from axis

2 Answers 211 Views
ChartView
This is a migrated thread and some comments may be shown as answers.
Mingxue
Top achievements
Rank 1
Mingxue asked on 18 Apr 2016, 11:01 PM

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 Answers, 1 is accepted

Sort by
0
Accepted
Dinko | Tech Support Engineer
Telerik team
answered on 20 Apr 2016, 08:39 AM
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
Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
0
Mingxue
Top achievements
Rank 1
answered on 25 Apr 2016, 06:09 PM

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.

Tags
ChartView
Asked by
Mingxue
Top achievements
Rank 1
Answers by
Dinko | Tech Support Engineer
Telerik team
Mingxue
Top achievements
Rank 1
Share this question
or