Chart won't vertically center inside list view

[Matt]

I have a telerik chart inside a listview. It won't center veritcally inside my Grid. If i replace it with an image it works fine. Here is the code I'm using to attempt to make the chart vertically center. I'll attach screenshots of what it looks like with the chart and with the image. This is the closest I could get it.

<ListView x:Name="ParameterLv" SeparatorVisibility="Default" RowHeight="70">
        <ListView.ItemTemplate>
          <DataTemplate>
            <ViewCell>
              <Grid Padding="10">
                <Grid.RowDefinitions>
                  <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="Auto" />
                  <ColumnDefinition Width="*" />
                  <ColumnDefinition Width="100" />
                  <ColumnDefinition Width="75" />
                </Grid.ColumnDefinitions>
                <ContentView Grid.Row="0" Grid.Column="0">
                  <Image Source="{Binding StatusImg}" Aspect="AspectFit"></Image>
                </ContentView>
                <StackLayout Orientation="Vertical" Grid.Row="0" Grid.Column="1">
                  <Label Text="{Binding FriendlyName}" Style="{StaticResource FriendlyNameStyle}" LineBreakMode="NoWrap"></Label>
                  <Label Text="{Binding TagId}" Style="{StaticResource MinorText}" LineBreakMode="NoWrap"></Label>
                </StackLayout>
                <telerik:RadCartesianChart x:Name="ParameterChart" HeightRequest="60" Grid.Row="0" Grid.Column="2">
                  <telerik:RadCartesianChart.HorizontalAxis>
                    <telerik:DateTimeContinuousAxis ShowLabels="False" />
                  </telerik:RadCartesianChart.HorizontalAxis>
                  <telerik:RadCartesianChart.VerticalAxis>
                    <telerik:NumericalAxis ShowLabels="False" />
                  </telerik:RadCartesianChart.VerticalAxis>
                  <telerik:GridLineVisibility>None</telerik:GridLineVisibility>
                  <telerik:RadCartesianChart.Series>
                    <telerik:ScatterLineSeries ItemsSource="{Binding TrendTail}">
                      <telerik:ScatterLineSeries.XValueBinding>
                        <telerik:PropertyNameDataPointBinding PropertyName="Timestamp"/>
                      </telerik:ScatterLineSeries.XValueBinding>
                      <telerik:ScatterLineSeries.YValueBinding>
                        <telerik:PropertyNameDataPointBinding PropertyName="Value"/>
                      </telerik:ScatterLineSeries.YValueBinding>
                    </telerik:ScatterLineSeries>
                  </telerik:RadCartesianChart.Series>
                </telerik:RadCartesianChart>
                <StackLayout Orientation="Vertical" Grid.Row="0" Grid.Column="3" HorizontalOptions="End">
                  <Label Text="{Binding Value}" Style="{StaticResource ValueStyle}" HorizontalTextAlignment="Center" LineBreakMode="NoWrap"></Label>
                  <Label Text="{Binding Unit}" Style="{StaticResource MinorText}" HorizontalTextAlignment="Center" LineBreakMode="NoWrap"></Label>
                </StackLayout>
              </Grid>
            </ViewCell>
          </DataTemplate>
        </ListView.ItemTemplate>
      </ListView>

[Rosy Topchiyska]

Hello Matt,

Thank you for contacting us.

First, you have to set VerticalOptionst:

<telerik:RadCartesianChart HeightRequest="60" VerticalOptions="Center" ...>

Then the chart will be centered, but the native iOS chart has Insets set by default, that make the chart look very small. You can remove them with a custom chart renderer:

public class CustomChartRenderer : CartesianChartRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<RadCartesianChart> e)
    {
        base.OnElementChanged(e);

        this.Control.Insets = new UIEdgeInsets(0, 0, 0, 0);
    }
}

I hope this helps. Please, let us know if you have further questions.

Regards,
Rosy Topchiyska
Telerik by Progress

[Matt]

Thank you!