Floating vertical axis Xamarin Label left of a Telerik Bar chart

[Ian]

This question relates more to general Xamarin forms techniques but the need arose because, as far as I can determine the Telerik radchart Xamarin UI component does  not provide any reserved space for a label for the naming of the x or y axes.

I realise that the x and y values along the tick marks of the axes can be labelled fairly easily.

However, what I wish to do is to provide a supplementary label on both vertical and horizontal axes to represent what those axes represent , eg Sales, Fuel volume, etc.

Where I have come to a roadblock is that I have failed to render a vertical label where the text showing the caption for the vertical axis is shown vertically.

I am trying to achieve this label by using a Xamarin Label in a left most Grid column and using the Rotate="90" attribute.

Here is the XAML fragment to illustrate my layout and what I am trying to achieve. Screenshot also supplied to show the clipping of the vertically rotated "label"

<Grid IsClippedToBounds="False">

<Grid.RowDefinitions>

<RowDefinition Height="auto"/><RowDefinition /></Grid.RowDefinitions>

<Grid.ColumnDefinitions><ColumnDefinition Width="20">

</ColumnDefinition>

<ColumnDefinition Width="auto" />

</Grid.ColumnDefinitions>

<Label Grid.Column="1" VerticalOptions="Center" Text="{Binding SelectedSite.SiteName}" FontSize="32" FontAttributes="Bold" TextColor="#b29565" HorizontalOptions="CenterAndExpand"/>

<Label LineBreakMode="NoWrap" Grid.Row="1" Grid.Column="0" Text="ThislongtextToShowClippingOccurs" VerticalOptions="CenterAndExpand" Rotation="90"/>

<telerikChart:RadCartesianChart Grid.Row="1" Grid.Column="1" VerticalOptions="CenterAndExpand" Palette="{x:Static local:CustomPalettes.CustomDark}" x:Name="chartVal" behave:TelerikChartBehaviour.Command="{Binding SelectionChange}" >

 

My issue is that the text within the label appears to clip to the originally specified column width despite the fact that the text is rotated by 90 degrees where it could potentially occupy a vertical space which extends the full vertical height of the bar chart.

I've tried various strategies to defeat this clipping.

I've set the "isClippedToBounds" attribute to false on the parent layout (Grid).

I've tried various VerticalOptions such as CenterAndExpand, StartAndExpand, Fill, FillAndExpand.

The Fill variants actually result in the label moving outside of the left hand grid column and it becomes rendered in the center of the barchart (with bar chart stacked above it) so I've preferred to use StartAndExpand or CenterAndExpand.

I've tried putting a WidthRequest on the Label which gets rotated into position to see if I can force the label to escape outside of it's original horizontal bounds.

Has anyone managed to render a vertical caption adjacent to a chart (or component) of any type ?

[Pavel R. Pavlov]

Hello Ian,

You are right that your question relates to the XamarinFomrs platform and our components are not involved in the measuring of the native XF Label. If I were you I would try to achieve my requirements just like you did. Moreover, I found this XamarinForms article which confirms this approach is the correct one. Since you already tried this and the clipping still occurs maybe you need to report this behavior to Xamarin.

On the other hand there is one more approach that you can try on your side. You can try creating custom XF control deriving from Label. Furthermore you can create custom renderer for that control. The renderer will allow you to override the MeasureOverride() method in which you can try to stretch the control in the vertical direction.

This is an example provided by Xamarin demonstrating how a custom Entry renderer can be created. You can use it as base for your custom LabelRenderer.

I hope this will be helpful.

Regards,
Pavel R. Pavlov
Telerik by Progress