RadCartesianChart: Label of BarSeries are showing wrong position when windows is resized

[Witt]

Hi,

I'm trying to make a bar chart with long text of categories, so I wrapped them all by the following code

 xaml

<Grid SizeChanged="Grid_SizeChanged">
        <telerik:RadCartesianChart Grid.Row="0"
                                   x:Name="ChartSeries"
                                   >

            <telerik:RadCartesianChart.HorizontalAxis>
                <telerik:CategoricalAxis ClipToBounds="False" HorizontalLocation="Right" SmartLabelsMode="SmartStep" IsStepRecalculationOnZoomEnabled="True">
                    <telerik:CategoricalAxis.LabelTemplate>
                        <DataTemplate>
                            <TextBlock TextWrapping="Wrap" MaxWidth="{Binding ElementName=Self, Path=MaxWidthTextBlock}" Text="{Binding}" />
                        </DataTemplate>
                    </telerik:CategoricalAxis.LabelTemplate>
                </telerik:CategoricalAxis>
            </telerik:RadCartesianChart.HorizontalAxis>
            <telerik:RadCartesianChart.VerticalAxis>
                <telerik:LinearAxis Minimum="0"
                                    RangeExtendDirection="Positive"
                                    SmartLabelsMode="SmartStep"
                                    >
                </telerik:LinearAxis>
            </telerik:RadCartesianChart.VerticalAxis>
            <telerik:BarSeries ShowLabels="False" ClipToPlotArea="False">
                <telerik:BarSeries.DataPoints>
                    <telerik:CategoricalDataPoint Category="TextTextTextTextTextTextText" Value="2" />
                    <telerik:CategoricalDataPoint Category="TextTextTextTextTextTextTextTextText" Value="5" />
                    <telerik:CategoricalDataPoint Category="TextTextTextTextTextTextTextTextTextText" Value="3" />
                    <telerik:CategoricalDataPoint Category="TextTextTextText" Value="10" />
                    <telerik:CategoricalDataPoint Category="TextTextTextTextTextTextTextTextTextTextTextTextText" Value="9" />
                    <telerik:CategoricalDataPoint Category="TextTextTextText" Value="7" />
                    <telerik:CategoricalDataPoint Category="TextTextTextText" Value="1" />
                </telerik:BarSeries.DataPoints>
            </telerik:BarSeries>
            <telerik:RadCartesianChart.Grid>
                <telerik:CartesianChartGrid MajorLinesVisibility="Y" x:Name="Line">
                    <telerik:CartesianChartGrid.MajorYLineStyle>
                        <Style TargetType="Line">
                            <Setter Property="Stroke" Value="DarkGray"/>
                        </Style>
                    </telerik:CartesianChartGrid.MajorYLineStyle>
                </telerik:CartesianChartGrid>
            </telerik:RadCartesianChart.Grid>
        </telerik:RadCartesianChart>
    </Grid>

As you can see, I have a method to recalculate the maxwidth of textblock when the container's size is change(Grid) as the following code behind

private void Grid_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            if(e.PreviousSize.Width != 0)
            {
                var ratio = e.NewSize.Width / e.PreviousSize.Width;
                MaxWidthTextBlock *= ratio;
            }
        }

The calculation seems to compute correctly for max width of the textblock but the position of the label is not correct. It seems to be a bit right aligned.

Do you have any idea to make it center as before windows size is changed, please advise ?

I also attached the image for before / after windows size change.

Best Regards,
Witt

<Grid SizeChanged="Grid_SizeChanged">

        <telerik:RadCartesianChart Grid.Row="0"

                                   x:Name="ChartSeries"

                                   >

 

            <telerik:RadCartesianChart.HorizontalAxis>

                <telerik:CategoricalAxis ClipToBounds="False" HorizontalLocation="Right" SmartLabelsMode="SmartStep"IsStepRecalculationOnZoomEnabled="True">

                    <telerik:CategoricalAxis.LabelTemplate>

                        <DataTemplate>

                            <TextBlock TextWrapping="Wrap" MaxWidth="{Binding ElementName=Self, Path=MaxWidthTextBlock}"Text="{Binding}" />

                        </DataTemplate>

                    </telerik:CategoricalAxis.LabelTemplate>

                </telerik:CategoricalAxis>

            </telerik:RadCartesianChart.HorizontalAxis>

            <telerik:RadCartesianChart.VerticalAxis>

                <telerik:LinearAxis Minimum="0" 

                                    RangeExtendDirection="Positive"

                                    SmartLabelsMode="SmartStep"

                                    >

                </telerik:LinearAxis>

            </telerik:RadCartesianChart.VerticalAxis>

            <telerik:BarSeries ShowLabels="False" ClipToPlotArea="False">

                <telerik:BarSeries.DataPoints>

                    <telerik:CategoricalDataPoint Category="TextTextTextTextTextTextText" Value="2" />

                    <telerik:CategoricalDataPoint Category="TextTextTextTextTextTextTextTextText" Value="5" />

                    <telerik:CategoricalDataPoint Category="TextTextTextTextTextTextTextTextTextText" Value="3" />

                    <telerik:CategoricalDataPoint Category="TextTextTextText" Value="10" />

                    <telerik:CategoricalDataPoint Category="TextTextTextTextTextTextTextTextTextTextTextTextText" Value="9"/>

                    <telerik:CategoricalDataPoint Category="TextTextTextText" Value="7" />

                    <telerik:CategoricalDataPoint Category="TextTextTextText" Value="1" />

                </telerik:BarSeries.DataPoints>

            </telerik:BarSeries>

            <telerik:RadCartesianChart.Grid>

                <telerik:CartesianChartGrid MajorLinesVisibility="Y" x:Name="Line">

                    <telerik:CartesianChartGrid.MajorYLineStyle>

                        <Style TargetType="Line">

                            <Setter Property="Stroke" Value="DarkGray"/>

                        </Style>

                    </telerik:CartesianChartGrid.MajorYLineStyle>

                </telerik:CartesianChartGrid>

            </telerik:RadCartesianChart.Grid>

        </telerik:RadCartesianChart>

    </Grid>

[Peshito]

Hello Witt,

From the code provided I see you are using SmartLabelsMode along with your custom recalculation of the axis labels MaxWidth. This is most probably breaking the logic for calculating the best possible label position. Could you try setting the SmartLabelMode to None for instance and see whether the issue will still appear?

Another thing you could try is to align the text with the HorizontalAlignment property set to Center.

If this does not help, could you provide a runnable project of the sample code you shared. There is an element missing in order to fully recreate the sample as it is on your side.

<TextBlock TextWrapping="Wrap" MaxWidth="{Binding ElementName=Self, Path=MaxWidthTextBlock}" Text="{Binding}" />

Regards,
Peshito
Telerik

[Witt]

Hello Peshito,

Thank you for your kindness assistance. I have tried what you suggested but it didn't work.

I attached my sample project as you request. Do you have any suggestion about this ?

Regards,
Witt

[Witt]

My sample project

https://www.dropbox.com/s/os4z4jk97531nyb/WpfApplication1.zip?dl=0

[Peshito]

Hi Witt,

Please find attached a sample project demonstrating how to achieve your desired result.

In short the approach uses a Canvas element positioned under the chart's axis and populate it with UI elements which represent the labels. You can position the custom labels with the help of the Conversion API of RadChartView. Note that this is custom solution and I cannot guarantee that it will work in all expected scenarios. This is why I recommend you to test it properly before its use in production code.

Hope this helps.

Regards,
Peshito
Telerik