RadChart not sizing to parent container

2 posts, 1 answers
  1. Phil
    Phil avatar
    23 posts
    Member since:
    Sep 2010

    Posted 03 Oct 2012 Link to this post

    I am having a problem with a Silverlight RadChart not sizing correctly to the parent container Grid Cell

    With the below XAML you can see in the attached images that the chart goes outside the constraints of the grid cell in both Visual Studio and when running in IE9.

    Is there an option I have to explicitly set to get the chart to size correctly?

                <Grid x:Name="TotalFaultCustomerGrid" Grid.Row="1">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="30"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    
                    <TextBlock x:Name="CutomerFaultsTitle" Grid.Row="0" Text="Total Faults By Customer" FontSize="20"
                                    Foreground="#FFD8D0D0" Margin="5" VerticalAlignment="Center"
                                    HorizontalAlignment="Center" TextAlignment="Center" />   
                    
                    <telerik:RadChart x:Name="FaultCountByCustomerChart" Grid.Row="1"
                                        ItemsSource="{Binding FaultCountByCustomer}">
                        <telerik:RadChart.SeriesMappings>
                            <telerik:SeriesMapping>
                                <telerik:SeriesMapping.SeriesDefinition>
                                    <telerik:BarSeriesDefinition/>
                                </telerik:SeriesMapping.SeriesDefinition>
                                <telerik:ItemMapping FieldName="Business" DataPointMember="XCategory"/>
                                <telerik:ItemMapping FieldName="Faults" DataPointMember="YValue"/>
                            </telerik:SeriesMapping>
                        </telerik:RadChart.SeriesMappings>
                        <telerik:RadChart.DefaultView>
                            <telerik:ChartDefaultView>
                                <telerik:ChartDefaultView.ChartLegend>
                                    <telerik:ChartLegend x:Name="ChartLegend1" Visibility="Collapsed"/>
                                </telerik:ChartDefaultView.ChartLegend>
                                <telerik:ChartDefaultView.ChartArea >
                                    <telerik:ChartArea Margin="0,0,0,-0.994">
                                        <telerik:ChartArea.AxisY >
                                            <telerik:AxisY StripLinesVisibility="Collapsed"/>
                                        </telerik:ChartArea.AxisY>
                                        <telerik:ChartArea.AxisX>
                                            <telerik:AxisX LabelRotationAngle="80"/>
                                        </telerik:ChartArea.AxisX>
                                    </telerik:ChartArea>
                                </telerik:ChartDefaultView.ChartArea>
                            </telerik:ChartDefaultView>
                        </telerik:RadChart.DefaultView>
                    </telerik:RadChart>                           
                </Grid>
  2. Answer
    Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 05 Oct 2012 Link to this post

    Hello Phil,

    Thank you for the attached code snippet. You need to set the Height of the second row definition to star (* instead of Auto). Let us know how it goes.

    All the best,
    Petar Marchev
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. DevCraft banner
Back to Top