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

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

4 Answers 73 Views
ChartView
This is a migrated thread and some comments may be shown as answers.
Witt
Top achievements
Rank 1
Witt asked on 24 Dec 2015, 08:00 AM

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>

4 Answers, 1 is accepted

Sort by
0
Peshito
Telerik team
answered on 25 Dec 2015, 01:00 PM
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
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
0
Witt
Top achievements
Rank 1
answered on 04 Jan 2016, 04:36 AM
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
0
Witt
Top achievements
Rank 1
answered on 04 Jan 2016, 04:52 AM
My sample project

https://www.dropbox.com/s/os4z4jk97531nyb/WpfApplication1.zip?dl=0
0
Peshito
Telerik team
answered on 05 Jan 2016, 09:12 AM
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
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
Tags
ChartView
Asked by
Witt
Top achievements
Rank 1
Answers by
Peshito
Telerik team
Witt
Top achievements
Rank 1
Share this question
or