Chart won't vertically center inside list view

3 posts, 1 answers
  1. Matt
    Matt avatar
    11 posts
    Member since:
    Feb 2015

    Posted 12 Jul Link to this post

    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">
                  <Grid Padding="10">
                      <RowDefinition Height="Auto" />
                      <ColumnDefinition Width="Auto" />
                      <ColumnDefinition Width="*" />
                      <ColumnDefinition Width="100" />
                      <ColumnDefinition Width="75" />
                    <ContentView Grid.Row="0" Grid.Column="0">
                      <Image Source="{Binding StatusImg}" Aspect="AspectFit"></Image>
                    <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>
                    <telerik:RadCartesianChart x:Name="ParameterChart" HeightRequest="60" Grid.Row="0" Grid.Column="2">
                        <telerik:DateTimeContinuousAxis ShowLabels="False" />
                        <telerik:NumericalAxis ShowLabels="False" />
                        <telerik:ScatterLineSeries ItemsSource="{Binding TrendTail}">
                            <telerik:PropertyNameDataPointBinding PropertyName="Timestamp"/>
                            <telerik:PropertyNameDataPointBinding PropertyName="Value"/>
                    <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>

  2. Answer
    Rosy Topchiyska
    Rosy Topchiyska avatar
    547 posts

    Posted 15 Jul Link to this post

    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)
            this.Control.Insets = new UIEdgeInsets(0, 0, 0, 0);

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

    Rosy Topchiyska
    Telerik by Progress
    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. DevCraft banner
  4. Matt
    Matt avatar
    11 posts
    Member since:
    Feb 2015

    Posted 15 Jul in reply to Rosy Topchiyska Link to this post

    Thank you!
Back to Top