Metro Elements: Area Charts and Custom Styling

Last time I showed you how to get started with Metro Elements and use our charting controls in your application. In this blog post I’ll show you how to create and style Area Series and other similar charts. Area charts render the data by connecting data points with line segments, and filling the area between the line and the X axis. Any chart that draws a line through all the data points is good for plotting values that change over time or a number series. The colored area usually indicates that the total area between the line and the axis is a meaningful value.

Creating an Area Chart

Just like when I showed you how to create a bar chart last time, creating an area chart is as simple as adding 1 or more AreaSeries tags between the Chart tag. Below is a simple code example of doing this. Each series is binding to a collection of randomly generated Point objects. The SeriesBrush property is used to give each series a distinct color.

<ms:Chart Title="Area Chart">
  <ms:AreaSeries ItemsSource="{Binding DataA}" SeriesBrush="#9DB82B" />
  <ms:AreaSeries ItemsSource="{Binding DataB}" SeriesBrush="#F0A82A" />
  <ms:AreaSeries ItemsSource="{Binding DataC}" SeriesBrush="#851215" />

Area Chart

Area Style

Now lets start looking at how to style the various parts of an area chart. First off, the colored area style. Styling the colored area allows you to customize the opacity of the area, make the area a different color to the line, or use a subtle gradient or other brush if you so wished. Here is a simple area style that uses a lighter opacity than the default:

<Style x:Key="AreaStyle" TargetType="Path">
  <Setter Property="Opacity" Value="0.4" />

You can apply your custom area style by setting the AreaStyle property on the AreaSeries. Other chart series that also have this property are SplineAreaSeries, StackedAreaSeries and StackedSplineAreaSeries.


Line Style

Next lets look at customizing the line that connects all the data points. This is useful for changing properties such as the thickness and color of the line. Here is a line style that creates a thick line with slightly rounded points:

<Style x:Key="LineStyle" TargetType="Path">
  <Setter Property="StrokeThickness" Value="7" />
  <Setter Property="StrokeLineJoin" Value="Round" />

To apply a custom line style, simply set the LineStyle property of the series you want to style. As well as all the different area charts, this property is also available on LineSeries, SplineSeries, StackedLineSeries and StackedSplineSeries.


Symbol Style

Last of all is the symbol style. Symbols can be rendered at each data point on the chart. By default, all charts apart from ScatterSeries don’t display a symbol. The SymbolStyle property on line, area and scatter charts lets you enable and customize what symbols to display. Here is a symbol style for rendering a cross at each data point:

<Style x:Key="CrossSymbolStyle" TargetType="ms:DataPoint">
  <Setter Property="Width" Value="18" />
  <Setter Property="Height" Value="18" />
  <Setter Property="Margin" Value="-8,-8,8,8" />
  <Setter Property="Template">
      <ControlTemplate TargetType="ms:DataPoint">
        <Path Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Fill="{TemplateBinding Background}"
               Data="M 0 2 L 2 0 L 4 2 L 6 0 L 8 2 L 6 4 L 8 6 L 6 8 L 4 6 L 2 8 L 0 6 L 2 4 Z" Stretch="Fill" />


And that’s all you need to know for customizing the data display of area series, line series and scatter series. Keen to create fantastic Windows 8 charts? Grab the trail from our Metro Elements page. If you have any questions about any of this, let us know in the forum.

One Response to “Metro Elements: Area Charts and Custom Styling”


Join our mailer

You should join our newsletter! Sent monthly:

Back to Top