Customize Chart Data Points with Conditional Formatting and Custom Symbols

One of the most common chart requirements is to customize the appearance of the data points—the individual values that are plotted on the chart. The representation of data points (known as symbols) varies depending upon the chart type being used, so customizing a data point in a Column/Bar chart would imply customizing the appearance of the columns/bars. Similarly, customizing a data point in LineSymbols/SplineSymbols/Scatter chart implies customizing the appearance of circular/square shaped symbols at that particular point. Note: Hereafter, to keep things simple we'll be using phrases like "customizing the data point", "customizing symbol" to imply customizing the appearance of the data point's representation. FlexChart offers an easy-to-use mechanism with great flexibility to customize a data point's appearance. In this blog post we'll cover:

• Underlying principles for data point customization
• Conditionally format a data point
  • Custom borders
  • Custom colors
• Display custom symbols

The Underlying Principle for Chart Data Points

The rendering of data points as well as other chart elements (such as Header, Footer, Legend, etc.) in FlexChart is taken care by its rendering engine. FlexChart allows developers to access this rendering engine in the SymbolRendering and SymbolRendered events to be able to format the data points. Further, since the rendering engine is based on the IRenderingEngine interface, you get the same API across all platforms for data point customization. We'll be doing most of the customization in the SymbolRendering event, because it's fired right before a data point is about to be rendered in the chart, providing all the necessary information required for its customization. Note: Conditional Formatting in FlexChart is not applicable for Area/SplineArea and Line/Spline chart types, as the notion of symbols does not apply.

Conditional Formatting

Before we begin, let’s take a look at the chart’s default appearance. FlexChart's Default Appearance Although it's easy to make out what this data is about—displaying revenue earned in a year—we could give the users even more information. Your data has a story to tell, and providing users with visual cues about data is an important part of that story telling. For example, wouldn’t it be nice if the chart above could indicate whether the Revenue earned lead to a Profit or not?

Your data has a story to tell, and providing users with visual cues about data is an important part of that storytelling.

The following subsections will demonstrate how we can add these visual cues in FlexChart by conditionally formatting the data points in the SymbolRendering event.

Custom Borders

One approach is to customize the border color of data points. FlexChart's rendering engine provides the SetStroke(), SetStrokeThickness() and SetStrokePattern() methods that allows to configure the border color, border thickness and border style of the data points respectively. The following snippet would display Green and Red borders around data points reflecting the revenue earned to be a profit and loss, respectively.

//Subscribe to the Series’ SymbolRendering Event  
flexChart.Series[0].SymbolRendering += OnSymbolRendering;  
//Handle the SymbolRendering event to customize the chart  
void OnSymbolRendering(object sender, RenderSymbolEventArgs args)  
{  
args.Engine.SetStrokeThickness(2);  
var pt = args.Item as ChartPoint;  
if (pt.Revenue > pt.Expense)  
args.Engine.SetStroke(new SolidColorBrush { Color = Colors.Green });  
else  
args.Engine.SetStroke(new SolidColorBrush { Color = Colors.Red });  
}

Custom Border Colors in FlexChart

Custom Colors

Another common approach to add visual cues is to customize the colors of the data points. The FlexChart rendering engine provides the SetFill() method that customizes the colors with which a data point is painted/filled. The following snippet would color the data point in Green and Red reflecting the revenue earned to be a profit and loss respectively.

void OnSymbolRendering(object sender, RenderSymbolEventArgs args)  
{  
var pt = args.Item as ChartPoint;  
if (pt.Revenue > pt.Expense)  
args.Engine.SetFill(new SolidColorBrush { Color = Colors.Green });  
else  
args.Engine.SetFill(new SolidColorBrush { Color = Colors.Red });  
}

FlexChart with Custom Color

Displaying Custom Symbols

The customization of data points is not just limited to changing of borders or fill colors only, you can go beyond and even customize the symbols that's being rendered at a data point. SetFill() method of FlexChart that we used above can accept any object that can be used as a Brush to fill the symbols, thus allowing to display images in place of the default series symbols - the circular/square shapes on the chart. The following snippet illustrates displaying of Country flags as symbols in a Scatter chart.

<!-- Set the Marker and Size the scatter symbols will use -->  
<c1:Series Binding="Sales" SeriesName="Sales" SymbolRendering="OnSymbolRendering" SymbolMarker="Box" SymbolSize="50">  
</c1:Series>

void OnSymbolRendering(object sender, RenderSymbolEventArgs args)  
{  
var country = args.Item as Country;  
var img = GetImage(country.Name + ".png");  
ImageBrush imgBrush = new ImageBrush();  
imgBrush.ImageSource = (ImageSource)img;  
imgBrush.Stretch = Stretch.Uniform;  
//Use ImageBrush as the fill brush  
args.Engine.SetFill(imgBrush);  
}

FlexChart with Custom Symbols The above approach can also be used to plot customized columns and bars in a chart. The following chart is created using FlexChart displaying World’s Tallest Buildings based on data from CTBUH. The implementation can be found in the sample attached to this blog. Custom Columns in FlexChart