Overlapping Axis Labels in RadCartesian Linear Axis.

4 posts, 0 answers
  1. Shilpa
    Shilpa avatar
    43 posts
    Member since:
    Dec 2015

    Posted 06 Jan Link to this post

    Hi,

    I have a RadCartesian Chart which has X& Y Axis as Linear axes. Chart Series is dynamically loaded. At one point my Axis labels overlap. I saw this link 

    http://docs.telerik.com/devtools/wpf/controls/radchartview/axes/axis-smart-labels but I am not able find the property SmartLabelsMode in the xaml. 

    Please help me solve the overlapping issue.

    Here is my Xaml

      <Grid>
     
            <telerik:RadCartesianChart x:Name="CartesianChart" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"
                                       Style="{StaticResource RadCartesianChartStyle1}">
                <telerik:RadCartesianChart.Grid>
                    <telerik:CartesianChartGrid MajorLinesVisibility="XY" MajorXLineStyle="{StaticResource GridLineStyle}"
                                                MajorYLineStyle="{StaticResource GridLineStyle}" />
                </telerik:RadCartesianChart.Grid>
                <telerik:RadCartesianChart.HorizontalAxis>
                    <telerik:LinearAxis Title="{Binding HorizontalAxisTitle}" Minimum="{Binding Xmin}"  LineThickness="2" LineStroke="Transparent" Foreground="{DynamicResource BRUSH_TEXT}"
                                        Style="{StaticResource LinearAxisStyle}" />
                     
                </telerik:RadCartesianChart.HorizontalAxis>
                <telerik:RadCartesianChart.VerticalAxis>
                    <telerik:LinearAxis Title="{Binding VerticalAxisTitle}" LineThickness="2" Foreground="{DynamicResource BRUSH_TEXT}"
                                        Style="{StaticResource LinearAxisStyle}" />
                </telerik:RadCartesianChart.VerticalAxis>
                <telerik:RadCartesianChart.SmartLabelsStrategy>
                    <telerik:ChartSmartLabelsStrategy  />
                </telerik:RadCartesianChart.SmartLabelsStrategy>
     
                <telerik:RadCartesianChart.Behaviors>
                    <telerik:ChartPanAndZoomBehavior DragMode="Pan" ZoomMode="Both" PanMode="Both" />
                    <telerik:ChartTooltipBehavior />
                </telerik:RadCartesianChart.Behaviors>
                <telerik:RadCartesianChart.EmptyContentTemplate>
                    <DataTemplate>
                        <StackPanel>
                            <TextBlock Text="{Binding EmptyContentText}" />
                        </StackPanel>
                    </DataTemplate>
                </telerik:RadCartesianChart.EmptyContentTemplate>
                <telerik:RadCartesianChart.TooltipTemplate>
                    <DataTemplate>
                        <Border Background="{DynamicResource BRUSH_TOOLTIP}" BorderBrush="{DynamicResource BRUSH_TOOLTIP}" BorderThickness="1" Padding="10">
                            <StackPanel Background="{DynamicResource BRUSH_TOOLTIP}">
                                <StackPanel Width="{TemplateBinding Width}" Orientation="Horizontal" Background="{DynamicResource BRUSH_TOOLTIP}" Margin="5">
                                    <TextBlock Text="{Binding DataItem.VerticalAxisTitle}" />
                                    <TextBlock Text="{Binding YValue}" />
                                </StackPanel>
                                <StackPanel Width="{TemplateBinding Width}" Orientation="Horizontal" Background="{DynamicResource BRUSH_TOOLTIP}" Margin="5">
                                    <TextBlock Text="{Binding DataItem.HorizontalAxisTitle}" />
                                    <TextBlock Text="{Binding XValue}" />
                                </StackPanel>
                                <TextBlock Text="{Binding Presenter.DisplayName}" />
                            </StackPanel>
                        </Border>
                    </DataTemplate>
                </telerik:RadCartesianChart.TooltipTemplate>
                <telerik:RadCartesianChart.SeriesProvider>
                    <telerik:ChartSeriesProvider x:Name="ChartSeriesProvider" Source="{Binding SeriesCollection}">
     
                        <telerik:ChartSeriesProvider.SeriesDescriptors>
     
                            <telerik:ScatterSeriesDescriptor ItemsSourcePath="Points" YValuePath="YValue" XValuePath="XValue">
                                <telerik:ScatterSeriesDescriptor.Style>
                                    <Style TargetType="telerik:ScatterSplineSeries">
                                        <Setter Property="StrokeThickness" Value="{Binding StrokeThickness}" />
                                        <Setter Property="Stroke" Value="{Binding Color}" />
                                        <Setter Property="Visibility" Value="{Binding IsVisible,Converter={StaticResource BooleanToVisibilityConverter}}" />
                                        <Setter Property="DisplayName" Value="{Binding Name}" />
                                        <Setter Property="PointTemplate" Value="{StaticResource PointTemplate}" />
     
                                        <Style.Triggers>
                                            <DataTrigger Binding="{Binding IsDashed,Mode=TwoWay}" Value="True">
                                                <Setter Property="DashArray" Value="5"/>
                                            </DataTrigger>
                                        </Style.Triggers>
                                    </Style>
                                </telerik:ScatterSeriesDescriptor.Style>
                            </telerik:ScatterSeriesDescriptor>
                        </telerik:ChartSeriesProvider.SeriesDescriptors>
                    </telerik:ChartSeriesProvider>
                </telerik:RadCartesianChart.SeriesProvider>
            </telerik:RadCartesianChart>
        </Grid>
    </UserControl>

  2. Milena
    Admin
    Milena avatar
    203 posts

    Posted 07 Jan Link to this post

    Hi Shilpa,

    We added support for automatic step recalculation for the chart's axes based on the axis size, so that labels do not overlap with Q2 2015 as you can see in our release notes history. If you are using this version of our UI for WPF or latest, you should be able to see SmartLabelsMode property and set it in xaml. Could you
    tell us which version of our controls you are using in your project?

    Regards,
    Milena
    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
  3. UI for WPF is Visual Studio 2017 Ready
  4. Shilpa
    Shilpa avatar
    43 posts
    Member since:
    Dec 2015

    Posted 08 Jan in reply to Milena Link to this post

    Hi Milena,

    Thanks for the info. I am using Assembly: Telerik.Windows.Controls.Chart, Version=2014.3.1410.45. Now what should I do?

  5. Milena
    Admin
    Milena avatar
    203 posts

    Posted 11 Jan Link to this post

    Hi Shilpa,

    If you want to take advantage of Axis Smart Labels feature, you should update your UI for WPF to version 2015.2 or latest. If this is not an option for you, then you can use LabelFitMode and MajorStep properties of the LinearAxis in order to prevent labels overlapping. You can find more information about axis properties in our help article Axis

    I hope this information helps.

    Regards,
    Milena
    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
Back to Top