This is a migrated thread and some comments may be shown as answers.
Chart won't vertically center inside list view
2 Answers 19 Views
This is a migrated thread and some comments may be shown as answers.
Matt
Top achievements
Rank 1
Matt asked on 12 Jul 2016, 06:30 PM

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>

2 Answers, 1 is accepted

Sort by
0
Accepted
Rosy Topchiyska
Telerik team
answered on 15 Jul 2016, 09:50 AM
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
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
0
Matt
Top achievements
Rank 1
answered on 15 Jul 2016, 04:03 PM
Thank you!
Tags
Chart
Asked by
Matt
Top achievements
Rank 1
Answers by
Rosy Topchiyska
Telerik team
Matt
Top achievements
Rank 1
Share this question
or