How to always show the last tick in X axis

[Fernando]

I have a linear chart that contains data from 1/4/2019 to 31/3/2020. However, the last tick is not displayed? How to always display the last tick with the corresponding label. Thanks

 

 

<telerik:RadCartesianChart
        HorizontalZoomRangeStart="0.0" HorizontalZoomRangeEnd="1.0" RenderTransformOrigin="0.5,0.5">

        <telerik:RadCartesianChart.Resources>

            <Style BasedOn="{StaticResource LineSeriesStyle}" TargetType="{x:Type telerik:LineSeries}">
                <Setter Property="CategoryBinding" Value="X" />
                <Setter Property="ValueBinding" Value="Y" />
                <Setter Property="StrokeThickness" Value="2" />
                <Setter Property="Stroke" Value="#0083A9" /> <!-- Aon blue. See: https://brandmatters.aon.com/bms/damui/index.cfm?category=1450&assetID=4993 -->
            </Style>

        </telerik:RadCartesianChart.Resources>

        <telerik:RadCartesianChart.HorizontalAxis>
            <telerik:DateTimeContinuousAxis LabelFormat="{Binding HorizontalAxisFormatString}" 
                                            SmartLabelsMode="SmartStep" />
        </telerik:RadCartesianChart.HorizontalAxis>

        <telerik:RadCartesianChart.VerticalAxis>
            <telerik:LinearAxis
                LabelFormat="{Binding VerticalAxisFormatString}"
                RangeExtendDirection="None"
                SmartLabelsMode="SmartStep" />
        </telerik:RadCartesianChart.VerticalAxis>

        <telerik:RadCartesianChart.SeriesProvider>
            <telerik:ChartSeriesProvider Source="{Binding ItemsSource}">
                <telerik:ChartSeriesProvider.SeriesDescriptors>
                    <telerik:ChartSeriesDescriptor ItemsSourcePath="Points" TypePath="SeriesType" />
                </telerik:ChartSeriesProvider.SeriesDescriptors>
            </telerik:ChartSeriesProvider>
        </telerik:RadCartesianChart.SeriesProvider>

        <telerik:RadCartesianChart.Grid>
            <telerik:CartesianChartGrid MajorLinesVisibility="XY" />
        </telerik:RadCartesianChart.Grid>

    </telerik:RadCartesianChart>

[Stenly]

Hello Fernando,

To achieve the wanted result, you could utilize the LastLabelVisibility property of the used DateTimeContinuousAxis, and set its value to Visible. Information regarding this property can be found inside the Axis article from our documentation.

<telerik:RadCartesianChart.HorizontalAxis>
    <telerik:DateTimeContinuousAxis LabelFormat="{Binding HorizontalAxisFormatString}" 
                                                          LastLabelVisibility="Visible"
							  SmartLabelsMode="SmartStep" />
</telerik:RadCartesianChart.HorizontalAxis

With that said, I hope the provided information is of help to you.

Regards,
Stenly
Progress Telerik

[Fernando]

I am afraid by adding the above property did not work. Any other alternatives? Thanks

[Stenly]

Hello Fernando,

Upon further investigating this behavior, the reason behind the missing last label is the SmartLabelsMode property, which is set on the DateTimeContinousAxis axis. This property shows only the first label and recalculates the actual step of its axis automatically, in order to prevent the rest of the labels from overlapping one another. This recalculation is executed on an update of the ChartView element's layout, for example, when it is resized.

With that said, what comes to my mind, in order to show the last label, is to remove the SmartLabelsMode property. Doing this will display all of the DateTime values on the DateTimeContinousAxis, as well as the last one. In addition, if the labels overlap, the LabelFitMode property of the axis could be utilized, to prevent the overlapping and improve the readability.

Alternatively, you could manually calculate the MajorStep and MajorStepUnit properties' values of the DateTimeContinousAxis, inside the PlotAreaClipChanged event of the ChartView control, and choose the total count of the visible labels and ticks. However, implementing such an algorithm can be quite tricky, as there any many edge cases that would cause the labels to not be rendered correctly.

With that said, I hope the provided information is of help to you.