Design Tips for Creating Modern Style Charts in XAML

Designing a chart for a Modern UI-style application should be one of the easiest tasks in a developer’s lifetime. The Modern UI (formerly Metro) style that you know has very simple and minimalistic qualities to it. Some of those qualities include:

  • Solid, non-gradient colors
  • Sharp, non-rounded corners
  • Lack of unnecessary lines, symbols and borders
  • Small color palettes

Five years ago a UI design with these qualities may have been considered uninteresting and too amateurish or simple. But with the right combination of color and text a simple design can be made to look beautiful and professional. That’s what Modern UI is all about. In this article I will discuss tips and techniques to help you get started building modern UI applications using the C1Chart control. It does not matter if you are working in Silverlight, WPF, Windows Phone or WinRT. When you first drop a C1Chart control onto your page you may get a bit more than you want. Let’s go over some tips on how you can create a cleaner slate to start with.

Remove Axis and Grid Lines

Depending on your chart type you may want to remove grid lines for one axis, remove the labels and tick marks, or remove the axis line all-together. Here is the code to do these tasks:


// hide all grid lines  
c1Chart1.View.AxisX.MajorGridStrokeThickness = 0;  
c1Chart1.View.AxisX.MinorGridStrokeThickness = 0;  
c1Chart1.View.AxisY.MajorGridStrokeThickness = 0;  
c1Chart1.View.AxisY.MinorGridStrokeThickness = 0;  

// hide all tick marks  
c1Chart1.View.AxisX.MajorTickThickness = 0;  
c1Chart1.View.AxisX.MinorTickThickness = 0;  
c1Chart1.View.AxisY.MajorTickThickness = 0;  
c1Chart1.View.AxisY.MinorTickThickness = 0;  

// hide actual grid line  
c1Chart1.View.AxisX.AxisLine = new Line() { StrokeThickness = 0 };  
c1Chart1.View.AxisY.AxisLine = new Line() { StrokeThickness = 0 };  

// hide axis labels  
c1Chart1.View.AxisX.Foreground = new SolidColorBrush(Colors.Transparent);  
c1Chart1.View.AxisY.Foreground = new SolidColorBrush(Colors.Transparent);  

And there you have a clean slate to work with. You can also declare the entire ChartView object in XAML, however I find it to be quicker to set in code. In reality we will probably keep some of the labels and lines. You can create a very clean and sleek chart by keeping just one set of grid lines and any labels that are necessary to understand the chart.

Make Transparent Plot Elements

For the sharpest looking chart you can remove those barely noticeable borders with one or two simple properties on the DataSeries object. Depending on the chart type, try setting SymbolStrokeThickness, SymbolStroke or ConnectionStrokeThickness. You can also set the Opacity of the DataSeries object to get semi-transparent elements. This creates a stylish look but it can also improve visualization because you can see grid lines and other plot elements that may otherwise be blocked.


<c1:C1Chart x:Name="c1Chart1" ChartType="Column" Palette="Standard">  
    <c1:C1Chart.Data>  
        <c1:ChartData ItemNames="P1 P2 P3 P4 P5">  
            <c1:DataSeries Label="s1" Values="20, 22, 19, 24, 25" SymbolStroke="Transparent" Opacity="0.9"/>  
            <c1:DataSeries Label="s2" Values="8, 12, 10, 12, 15" SymbolStroke="Transparent" Opacity="0.9"/>  
        </c1:ChartData>  
    </c1:C1Chart.Data>  
    <c1:C1ChartLegend />  
</c1:C1Chart>  

Set the Plot Background

A transparent plot background is perfect for a Modern looking application. But there’s also nothing wrong with making the plot background a different color. When it comes to data visualization and charts specifically, contrast is important. You want the plot elements to have a high visibility over the background. So in some cases you should set the plot background to a solid color, such as white. For my dark theme I will set it to a gray. Here’s how you would set the ChartView and plot background in XAML.


<c1:C1Chart.View>  
    <c1:ChartView PlotBackground="#FF343434">  
    </c1:ChartView>  
</c1:C1Chart.View>  

Add Data Labels

Typically you put labels on a chart axis; however depending on the size of the chart that could result in a lot of labels and busyness on your screen. In a Modern app we don’t want busy. If you want to keep axis labels but simply reduce their frequency, you can do this with one line of code. Set the MajorUnit or MinorUnit properties for either axis.


// reduce label frequency  
c1Chart1.View.AxisY.MajorUnit = 100;  

As an alternative, consider displaying labels over the plot elements rather than on the axis. Here is how you can add a label template for the plot elements. First, define the label appearance using a DataTemplate resource.


<UserControl.Resources>  
    <DataTemplate x:Key="lbl">  
        <TextBlock Text="{Binding}" />  
    </DataTemplate>  
</UserControl.Resources>  

The binding is left to be default, which will display the value (Y). Second you will assign this resource to the PointLabelTemplate property of the data series. Here is the complete XAML of the chart.


<c1:C1Chart x:Name="c1Chart1" ChartType="Column" Palette="Standard">  
    <c1:C1Chart.Data>  
        <c1:ChartData ItemNames="P1 P2 P3 P4 P5">  
            <c1:DataSeries Label="s1"  
                           Values="20, 22, 19, 24, 25"  
                           SymbolStroke="Transparent"  
                           Opacity="0.9"  
                           PointLabelTemplate="{StaticResource lbl}"/>  
            <c1:DataSeries Label="s2"  
                           Values="8, 12, 10, 12, 15"  
                           SymbolStroke="Transparent"  
                           Opacity="0.9"  
                           PointLabelTemplate="{StaticResource lbl}" />  
        </c1:ChartData>  
    </c1:C1Chart.Data>  
    <c1:C1Chart.View>  
        <c1:ChartView PlotBackground="#FF343434">  
        </c1:ChartView>  
    </c1:C1Chart.View>  
    <c1:C1ChartLegend />  
</c1:C1Chart>  

Then you can hide the axis labels with this line of code.


// hide axis labels  
c1Chart1.View.AxisY.Foreground = new SolidColorBrush(Colors.Transparent);  

Be careful when combining axis labels and data labels. You don't need to add more clutter to your UI if it's not needed.

Choose a Color Palette

The C1Chart control includes 22 pre-set color palettes for you to choose from. Just set the Palette property.


<c1:C1Chart x:Name="c1Chart1" Palette="Metro" />  

It’s also possible to create your own palette. Just create an array of Brushes and assign it to the CustomPalette property. There are ways to change the color of plot elements dynamically at run-time (see the PlotElementLoaded event), however setting the CustomPalette property will automatically update the legend items for you.


// set custom palette  
SolidColorBrush[] customPalette = new SolidColorBrush[3];  
customPalette[0] = new SolidColorBrush(Color.FromArgb(255, 2, 186, 2));  
customPalette[1] = new SolidColorBrush(Color.FromArgb(255, 2, 140, 186));  
customPalette[2] = new SolidColorBrush(Color.FromArgb(255, 2, 78, 186));  
c1Chart1.CustomPalette = customPalette;  

It's amazing what a different color palette can do to drastically change the style.

Tip: Don’t use built-in themes on Windows 8

If you’re going for a clean, Modern look do not use the built-in themes. The Themes were designed for desktop apps that want a similar look and feel to Microsoft Office 2010 or Windows Vista. The themes add a bit of chrome to the charts which is not necessary (extraneous borders and gradients). While the themes are supported for compatibility reasons, they are not intended for Windows Phone or Windows Store apps. Only use them if you truly desire that look and feel for your application. I recommend to stick to the Palette property to customize the colors of the plot series and optionally fill in the plot area with a solid color. Take these tips and build some incredible Modern UI applications today with Chart for WinRT XAML, Chart for Silverlight, Chart for WPF and Chart for Windows Phone.

Greg Lutz

comments powered by Disqus