The title of y values in y axis cut

0 Answers 76 Views
Chart
Daniel
Top achievements
Rank 1
Silver
Bronze
Daniel asked on 14 Apr 2022, 12:20 PM

Hi,

See the text below it should be "Test234" and we see "est1234".

How it can be fix ?

Thanks,

 


        <telerikChart:RadCartesianChart Grid.Row="5" Grid.Column="0" x:Name="totalFilesDividedByRoutesChart" Margin="10">
                <telerikChart:RadCartesianChart.HorizontalAxis>
                    <telerikChart:CategoricalAxis PlotMode="OnTicks"/>
                </telerikChart:RadCartesianChart.HorizontalAxis>
                <telerikChart:RadCartesianChart.VerticalAxis>
                    <telerikChart:NumericalAxis LabelFitMode="MultiLine" LabelFormat="N0"  Minimum="0" />
                </telerikChart:RadCartesianChart.VerticalAxis>
                <telerikChart:RadCartesianChart.Series>
                    <telerikChart:BarSeries ValueBinding="Value"
                                    CategoryBinding="RouteName"
                                    ItemsSource="{Binding TotalFilesDividedByRoutesDataSource}" />
                </telerikChart:RadCartesianChart.Series>
                <telerikChart:RadCartesianChart.Grid>
                    <telerikChart:CartesianChartGrid StripLinesVisibility="X"
                                       MajorLinesVisibility="XY"
                                       MajorLineColor="LightGray"
                                       MajorLineThickness="3" />
                </telerikChart:RadCartesianChart.Grid>
            </telerikChart:RadCartesianChart>

Lance | Senior Manager Technical Support
Telerik team
commented on 15 Apr 2022, 04:48 PM

This is because like the string is too long and cannot be word-wrapped. The text in that first label isn't going to "push" the entire chart away form the left margin. I've added a yellow highlight so you can see where the boundary of the chart canvas is:

I have two things for you to try:

  • Use PlotMode="BetweenTicks" instead
  • If possible, add a space so that it can be wrapped in the multi-line mode ("Test 1234")
  • Try to see if adding some padding will give you more room (e.g., Padding="5")
  • Do not use a value for the first tick by using a LabelFormatter that returns string.Empty if the value equals Test1234.
  • Use a custom LabelFormatter to change that label to something else that can wrap. There are many online examples that show you how to add spaces to a string, here's just one https://stackoverflow.com/questions/5796383/insert-spaces-between-words-on-a-camel-cased-token 

Other than that, I'm afraid I do not have a solution that doesn't include a custom native platform intervention (which will need to be done via custom renderer). The native control is from the Telerik UI for WinUI Chart, you can learn more about its API here WinUI 3 Chart. For assistance, you can ask the WinUI 3 team here (they are different than the Xamarin or MAUI teams).

No answers yet. Maybe you can help?

Tags
Chart
Asked by
Daniel
Top achievements
Rank 1
Silver
Bronze
Share this question
or