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

Overlapping Axis Labels in RadCartesian Linear Axis.

3 Answers 385 Views

ChartView

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

Shilpa asked on 06 Jan 2016, 09:22 AM

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>

3 Answers, 1 is accepted

answered on 07 Jan 2016, 09:49 AM

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

answered on 11 Jan 2016, 08:52 AM

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