April 20, 2011

WPF Chart Styling Explained

Some of the big additions to the .NET Framework in .NET 3.5 Service Pack 1 were the Charting Components that give a rich, out-of-the-box solution for displaying charts in your application.  However, one thing that I've always found very hard is locating information on how to control the look and feel of the individual charts.  In this posting I'll show you how to style the following elements of a chart: Title, Legend, Independent Axis, and Dependent Axis.  This will show the key areas of styling.

The Code

Before I dive into the details of the chart, I am going to be using the following XAML snippet to describe the process.

<charting:Chart x:Name="chtSummary" Width="770" Height="400" Title="My Chart Title">
        <Style TargetType="datavis:Title">
            <Setter Property="FontSize" Value="28" />
            <Setter Property="FontFamily" Value="Arial" />
            <Setter Property="Margin" Value="5, 10, 5, 15" />
        <Style TargetType="datavis:Legend">
            <Setter Property="Width" Value="0" />
        <charting:BarSeries ItemsSource="{Binding}" DependentValuePath="Value" IndependentValuePath="Key" IsSelectionEnabled="True" >
                <charting:CategoryAxis Orientation="Y" AxisLabelStyle="{StaticResource SummaryChartAxisStyle}" />

In addition to the above code snippet the following namespace additions are required for the above chart to function.



Before copying the above namespaces be sure to remove the additional line break that was added for formatting.

Styling the Chart Title

There are two possible titles available, there is a series title to represent your values and the main "Title". Looking at the sample the chart title is defined on the first line using the title attribute. To style this element a sub node of Chart.TitleStyle is used. The key piece here is the "TargetType" Title elements in the charts both the main title and the series title are a type of "datavis:Title". Once the proper type is supplied you can use standard processes to set the individual properties.

If you are using a resource dictionary you can simply move the inline style as described above out to your resource file and add the needed style link to your application with a Static or Dynamic Resource reference.

Styling the Chart Legend

The default layout behavior of the charting component is to show the chart on the left side and to show a "Series Legend" on the right side. In this example we have a single series and I needed to "hide" the legend. This was accomplished with the Chart.LegendStyle. This inline style is targeting the type datavis:Legend. A "hack" of sorts was used to make the legend invisible by simply setting the width of the legend to 0 pixels.

Depending on your needs you can style the legend in more advanced ways if you want to have it display to the user using standard Setter nodes in the style.

Styling Chart Series Labels

The most elusive of all styling areas was with the styling of the chart. Finding a clear example of how to do this was NOT easy. So I hope that this will help explain this process a bit.

When you create your chart you have both an "Independent Axis" which is typically your textual labels, and the "Dependent Axis" which are the values for each of your data points. Each axis can be styled independently. In the above sample I styled only the Independent Axis as I needed to change fonts and layout to prevent squishing. Looking at the example, within the BarSeries I defined the IndependentAxis and from there I defined a category axis with orientation to the Y axis and set a style for the Axis label. This style looks like the following:

<Style x:Key="SummaryChartAxisStyle" 
      TargetType="{x:Type Charting:AxisLabel}">
    <Setter Property="FontSize" Value="16" />
    <Setter Property="FontFamily" Value="Arial" />
    <Setter Property="FontWeight" Value="Bold" />
    <Setter Property="Margin" Value="5,0,10,0" />

Looking at this we can see the important part. Unlike all other elements, the target type for Axis styling is from the actual Charting namespace and the AxisLabel type. From there we can handle any and all styling needed for the individual labels.

I hope this article has helped you get a better understanding of how to style the WPF chart component. Feel free to share comments/questions below.

tags: .NET 4.0, WPF
comments powered by Disqus

Content provided in this blog is provided "AS-IS" and the information should be used at your own discretion.  The thoughts and opinions expressed are the personal thoughts of Mitchel Sellers and do not reflect the opinions of his employer.

Content Copyright

Content in this blog is copyright protected.  Re-publishing on other websites is allowed as long as proper credit and backlink to the article is provided.  Any other re-publishing or distribution of this content is prohibited without written permission from Mitchel Sellers.