Create a Custom Layout in a RadChart for Silverlight

The default layout for the RadChart for Silverlight is a very common one. It has a title at the top, a legend on the right, and an area in the middle reserved for the chart. It looks roughly like this.

If you started by using the default layout for the chart then you probably used these properties in some way.

Chart1.DefaultView.ChartArea

Chart1.DefaultView.ChartLegend

Chart1.DefaultView.ChartTitle

When you switch you’ll be adding in your own custom content inside of the RadChart tag in the XAML. You can only have one piece of content inside of the RadChart tag, so make sure you put in something like a Grid to do the layout. In this case I am removing the Legend and am going to just have the Title and Area in the chart, so I add this XAML for my chart. With this in place I am now able to see a spiffy new chart.

One more thing to do here. I’ve got my new layout in there but the chart is still using the old layout. Notice that the space for the chart and the legend still exist. I have to tell the chart that I don’t want it using the default layout anymore. There is an all-too-obvious name for the Boolean property to disable the default layout. Just set UseDefaultLayout to False in the XAML and you’ll be using the correct layout.

XAML for Custom RadChart Layout

<telerikChart:RadChart x:Name="Chart1" 

        UseDefaultLayout="False">

    <Grid>

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto" />

            <RowDefinition Height="*" />

        </Grid.RowDefinitions>

        <telerikCharting:ChartTitle

            Content="Number of Hamburgers Eaten" 

            HorizontalAlignment="Center"/>

        <telerikCharting:ChartArea 

            x:Name="ChartArea1" Grid.Row="1" 

            NoDataString="" />

    </Grid>

</telerikChart:RadChart>