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

5 posts, 0 answers
  1. Witt
    Witt avatar
    7 posts
    Member since:
    Mar 2015

    Posted 24 Dec 2015 Link to this post

    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>
  2. Peshito
    Admin
    Peshito avatar
    497 posts

    Posted 25 Dec 2015 Link to this post

    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
  3. UI for WPF is Visual Studio 2017 Ready
  4. Witt
    Witt avatar
    7 posts
    Member since:
    Mar 2015

    Posted 03 Jan Link to this post

    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
  5. Witt
    Witt avatar
    7 posts
    Member since:
    Mar 2015

    Posted 03 Jan in reply to Witt Link to this post

    My sample project

    https://www.dropbox.com/s/os4z4jk97531nyb/WpfApplication1.zip?dl=0
  6. Peshito
    Admin
    Peshito avatar
    497 posts

    Posted 05 Jan Link to this post

    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
Back to Top
UI for WPF is Visual Studio 2017 Ready