How to always show the last tick in X axis

1 Answer 22 Views
Chart ChartView General Discussions
Fernando
Top achievements
Rank 1
Fernando asked on 31 Jan 2022, 03:14 PM

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>

1 Answer, 1 is accepted

Sort by
0
Stenly
Telerik team
answered on 01 Feb 2022, 02:31 PM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Fernando
Top achievements
Rank 1
commented on 03 Feb 2022, 10:29 AM

I am afraid by adding the above property did not work. Any other alternatives? Thanks
Stenly
Telerik team
commented on 08 Feb 2022, 09:41 AM

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.
Tags
Chart ChartView General Discussions
Asked by
Fernando
Top achievements
Rank 1
Answers by
Stenly
Telerik team
Share this question
or