Axis label alignment is off

[Steve]

This is a difficult one, I think. If you look at one of the attached screenshots, some of the labels are adjacent to the axis as they should be, but some are quite distant. Sometimes they will all be correct except a few, sometimes they are all fine, and sometimes they are all wrong.

 

The problem seems to especially manifest when that the chart is bound to changes, and the new values on the labels are not included in the original values. For example the first screenshot has values at each 100 step, and when the data point changes from 400 to 200, the x100 values which were already on the axis are correct but the new x50 values are placed incorrectly. It isn't that straightforward of course... for example, often labels which weren't there originally are added fine. 

 

The chart is fairly basic. It is a single fixed series bound to a list of data point objects. When we change the data we completely replace the list rather than try to use an observable collection.

<telerik:RadCartesianChart x:Name="Chart" BorderThickness="1">

    <telerik:RadCartesianChart.HorizontalAxis>
        <telerik:CategoricalAxis PlotMode="OnTicksPadded" SmartLabelsMode="SmartStep" />
    </telerik:RadCartesianChart.HorizontalAxis>

    <telerik:RadCartesianChart.VerticalAxis>
        <telerik:LinearAxis Title="{Binding VerticalLabel}" Minimum="0" SmartLabelsMode="SmartStepAndRange"
                            LabelTemplate="{StaticResource VerticalAxisLabelTemplate}" />
    </telerik:RadCartesianChart.VerticalAxis>

    <telerik:RadCartesianChart.Series>
        <telerik:BarSeries x:Name="barSeries" ItemsSource="{Binding SeriesData}" CategoryBinding="XValue" ValueBinding="YValue" >
            <telerik:BarSeries.DefaultVisualStyle>
                <Style TargetType="Border">
                    <!--The data context here is the data point, but we need to bind to properties of the visualizer,
                    which is the data context of the series (presenter) which contains it -->
                    <Setter Property="Background" Value="{Binding Presenter.DataContext.Fill}"/>
                    <Setter Property="BorderBrush" Value="{Binding Presenter.DataContext.Color}"/>
                    <Setter Property="BorderThickness" Value="2"/>
                </Style>
            </telerik:BarSeries.DefaultVisualStyle>
        </telerik:BarSeries>
    </telerik:RadCartesianChart.Series>

</telerik:RadCartesianChart>

[Martin Ivanov]

Hello Steve,

The issue probably comes from the applied LabelTemplate of the axis. I guess there is a binding to some property using a converter or the bound property changes at runtime. If this is your case the observed behavior is expected. It comes from the chart's label size caching mechanism. Basically, when the chart loads initially the size of all labels (axis and data point labels) is cached. If you change something in the template of the labels (like in the LabelTemplate of the axis) the presenter of the label won't get resized accordingly. In this case if you want to apply the change in the template you will need to change something in the chart's API. For example, you can reset the LabelTemplate of the axis. 

If this doesn't work for you I would recommend you to open a new support ticket from your telerik.com account and attach a runnable project showing the issue.

Additionally, you can check the Resolve Axis Labels Clipping article.

Regards,
Martin Ivanov
Progress Telerik

[Steve]

Thanks, that helped. I put an event handler on the ActualVisibleRangeChanged event of the axis and in the handler reset the template.