Search code examples
silverlightchartssilverlight-toolkit

How to style a chart to omit the excess chart area surround the chart


I am using Silverlight Toolkit from http://silverlight.codeplex.com/ and am having an issue with the styling. Based off microsoft's documents I see the chart is made up of 4 basic components.

  1. ChartAreaStyle ==> Grid
  2. LegendStyle ==> Legend (a control similar to an ItemsControl with a Title)
  3. PlotAreaStyle ==> Grid
  4. TitleStyle ==> Title (a ContentControl)

ref http://msdn.microsoft.com/en-us/expression/dd433476.aspx

My Question Is

How can I fill the chart container with the chart itself instead of having an empty surrounding area and if possible omit the legend?

I am still trying to wrap my head around xaml and control templates etc. I know it probably can be done using that, I just don't know how.

Here is an example of what I am trying to achieve:

Courtesy of Telerik's awesome controls

Here is what it looks like now:

Horrible


Solution

  • So I copied the style of the Chart control from the Toolkit source code and removed redundant elements from the template.

    Silverlight line chart

    The styles definitions look so:

    <UserControl.Resources>
        <Style x:Key="ChartWithoutPaddings" TargetType="chart:Chart">
            <Setter Property="Padding" Value="0" />
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="ChartAreaStyle">
                <Setter.Value>
                    <Style TargetType="Panel">
                        <Setter Property="MinWidth" Value="100" />
                        <Setter Property="MinHeight" Value="20" />
                    </Style>
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="chart:Chart">
                        <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
                            <chartingprimitives:EdgePanel x:Name="ChartArea" Style="{TemplateBinding ChartAreaStyle}">
                                <Grid Canvas.ZIndex="-1" Style="{TemplateBinding PlotAreaStyle}" />
                            </chartingprimitives:EdgePanel>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    
        <Style x:Key="EmptyDataPoint" TargetType="Control">
            <Setter Property="Background" Value="Black" />
            <Setter Property="Template" Value="{x:Null}" />
        </Style>
    
        <Style x:Key="OnePixelLine" TargetType="Polyline">
            <Setter Property="StrokeThickness" Value="1" />
        </Style>   
    </UserControl.Resources>
    

    You should also hide axes and specify height and width of the chart:

    <chart:Chart Style="{StaticResource ChartWithoutPaddings}"
                 VerticalAlignment="Center" HorizontalAlignment="Center"
                 Width="200" Height="30">
        <chart:LineSeries ItemsSource="{Binding Items}" IndependentValuePath="Title" DependentValuePath="Value" 
                          DataPointStyle="{StaticResource EmptyDataPoint}" PolylineStyle="{StaticResource OnePixelLine}"  />
    
        <chart:Chart.Axes>
            <chart:CategoryAxis Orientation="X" Height="0" Opacity="0" />
            <chart:LinearAxis Orientation="Y" Width="0" Opacity="0" />
        </chart:Chart.Axes>
    </chart:Chart>