Binding the Color of Series Items

This topic demonstrates how to create charts, where each individual item, has its color bound to a property of the underlying data object.

There are small differences in the approaches used with the different series types. For the sake of the example the following series will be used. They cover the possible approaches.

• Bar Series
• Scatter Point Series
• Pie Series

The color binding is done via the DefaultVisualStyle or PointTemplate properties of the series. In case you are using one of the lightweight render options (Direct2D or Bitmap), keep in mind that bindings are not support in the DefaultVisualStyle. Instead, use only fixed values. Also setting the PointTemplate property will disable the lightweight render options and the chart will fallback to the default XAML rendering.

Example Data Model Definition

This section contains the data model used for the series examples in this article and also how to set it up.

Example 1: Defining the data model

• C#
• VB.NET

public class ChartData : INotifyPropertyChanged 
{ 
    private int _category; 
    public int Category 
    { 
        get { return this._category; } 
        set { this._category = value; this.OnPropertyChanged("Category"); } 
    } 
 
    private double _value; 
    public double Value 
    { 
        get { return this._value; } 
        set { this._value = value; this.OnPropertyChanged("Value"); } 
    } 
 
    private Brush _color; 
    public Brush Color 
    { 
        get { return this._color; } 
        set { this._color = value; this.OnPropertyChanged("Color"); } 
    } 
 
    public event PropertyChangedEventHandler PropertyChanged; 
    private void OnPropertyChanged(string propertyName) 
    { 
        if (this.PropertyChanged != null) 
        { 
            this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); 
        } 
    } 
} 

Public Class ChartData 
    Implements INotifyPropertyChanged 
    Private _category As String 
    Public Property Category() As String 
        Get 
            Return Me._category 
        End Get 
        Set 
            Me._category = value 
            Me.OnPropertyChanged("Category") 
        End Set 
    End Property 
 
    Private _value As Double 
    Public Property Value() As Double 
        Get 
            Return Me._value 
        End Get 
        Set 
            Me._value = value 
            Me.OnPropertyChanged("Value") 
        End Set 
    End Property 
 
    Private _color As Brush 
    Public Property Color() As Brush 
        Get 
            Return Me._color 
        End Get 
        Set 
            Me._color = value 
            Me.OnPropertyChanged("Color") 
        End Set 
    End Property 
 
    Public Event PropertyChanged As PropertyChangedEventHandler 
    Private Sub OnPropertyChanged(propertyName As String) 
        RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(propertyName)) 
    End Sub 
End Class 

Let's create some data so we can test the result.

Example 2: Populating the data collection

• C#
• VB.NET

public MainWindow() 
{ 
    InitializeComponent(); 
    DataContext = GetData(12); 
} 
 
public static List<ChartData> GetData(int dataSize) 
{ 
    Random rnd = new Random(); 
    var result = new List<ChartData>(); 
 
    for (int i = 0; i < dataSize; i++) 
    { 
        result.Add(new ChartData() 
        { 
            Category = i, 
            Value = rnd.Next(1, 100), 
            Color = new SolidColorBrush( 
                Color.FromArgb(255, (byte)rnd.Next(0, 256), (byte)rnd.Next(0, 256), (byte)rnd.Next(0, 256))) 
        }); 
    } 
 
    return result; 
} 

Public Sub New() 
    InitializeComponent() 
    DataContext = GetData(12) 
End Sub 
 
Public Shared Function GetData(ByVal dataSize As Integer) As List(Of ChartData) 
Dim rnd As Random = New Random() 
Dim result = New List(Of ChartData)() 
 
For i As Integer = 0 To dataSize - 1 
    result.Add(New ChartData() With { 
        .Category = i, 
        .Value = rnd.Next(1, 100), 
        .Color = New SolidColorBrush(Color.FromArgb(255, CByte(rnd.Next(0, 256)), CByte(rnd.Next(0, 256)), CByte(rnd.Next(0, 256)))) 
    }) 
Next 
 
Return result 

Bar Series

Here is a sample chart with BarSeries defined in Xaml.

Example 3: BarSeries definition

• XAML

<telerik:RadCartesianChart x:Name="chart" Width="400" Height="300"> 
    <telerik:RadCartesianChart.VerticalAxis> 
        <telerik:LinearAxis/> 
    </telerik:RadCartesianChart.VerticalAxis> 
    <telerik:RadCartesianChart.HorizontalAxis> 
        <telerik:CategoricalAxis/> 
    </telerik:RadCartesianChart.HorizontalAxis> 
    <telerik:RadCartesianChart.Series> 
        <telerik:BarSeries CategoryBinding="Category" ValueBinding="Value" ItemsSource="{Binding}" />             
    </telerik:RadCartesianChart.Series> 
</telerik:RadCartesianChart>     

You can see the data model used for this example in the Example Data Model Definition section.

There are couple approaches which could be used to bind the color from the data object to the fill of the data point visual (the bar).

• Use the DefaultVisualStyle property of the series. You can use this to target the default visual of the series and bind its properties to the data model object.

  Using the data model from this article's example you can bind the Color property from the ChartData class.

  Example 4: Setting BarSeries DefaultVisualStyle

  • XAML

      <telerik:BarSeries CategoryBinding="Category" ValueBinding="Value" ItemsSource="{Binding}"> 
          <telerik:BarSeries.DefaultVisualStyle> 
              <Style TargetType="Border"> 
                  <Setter Property="Background" Value="{Binding DataItem.Color}" /> 
              </Style> 
          </telerik:BarSeries.DefaultVisualStyle> 
      </telerik:BarSeries> 

• Use the PointTemplate property of the series. In this case you can define a DataTemplate containing a custom visual element for the data points and bind its color property (Background or Fill for example) to the property from the data model.

  Using the data model from this article's example you can bind the Color property from the ChartData class.

  Example 5: Setting BarSeries PointTemplate

  • XAML

      <telerik:BarSeries CategoryBinding="Category" ValueBinding="Value" ItemsSource="{Binding}"> 
          <telerik:BarSeries.PointTemplate> 
              <DataTemplate> 
                  <Rectangle Fill="{Binding DataItem.Color}"/> 
              </DataTemplate> 
          </telerik:BarSeries.PointTemplate> 
      </telerik:BarSeries> 

  The DataItem in the binding's path points to the custom ChartData model.

The recommended approach for binding the color is to use the DefaultVisualStyle. This is because the PointTemplate creates an additional ContentPresenter for each data point visual which means a bit more rendering time for the framework.

You can use those approaches with most series types of the chart.

Figure 1: Different colored bars

Scatter Point Series

Here is a sample chart with ScatterPointSeries defined in XAML.

Example 3: ScatterPointSeries definition

• XAML

<telerik:RadCartesianChart x:Name="chart" Width="400" Height="300"> 
    <telerik:RadCartesianChart.VerticalAxis> 
        <telerik:LinearAxis/> 
    </telerik:RadCartesianChart.VerticalAxis> 
    <telerik:RadCartesianChart.HorizontalAxis> 
        <telerik:LinearAxis/> 
    </telerik:RadCartesianChart.HorizontalAxis> 
    <telerik:RadCartesianChart.Series> 
        <telerik:ScatterPointSeries XValueBinding="Category" YValueBinding="Value" ItemsSource="{Binding}" />             
    </telerik:RadCartesianChart.Series> 
</telerik:RadCartesianChart>     

You can see the data model used for this example in the Example Data Model Definition section.

The ScatterPointSeries can be customized using the same manner as with the BarSeries. There are two small differences which could be applied.

As all scatter series, ScatterPointSeries requires the RadCartesianChart to define two LinearAxis as a vertical and horizontal axis.

• When using DefaultVisualStyle you will need to target a different UI element - a Path in this case. And also you will need to define the size (Width and Height) of the Path.

  Example 6: Setting Point Series DefaultVisualStyle

  • XAML

      <telerik:ScatterPointSeries XValueBinding="Category" YValueBinding="Value" ItemsSource="{Binding}"> 
          <telerik:ScatterPointSeries.DefaultVisualStyle> 
              <Style TargetType="Path"> 
                  <Setter Property="Fill" Value="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Tag.DataItem.Color}" /> 
                  <Setter Property="Width" Value="10" /> 
                  <Setter Property="Height" Value="10" /> 
              </Style> 
          </telerik:ScatterPointSeries.DefaultVisualStyle> 
      </telerik:ScatterPointSeries> 

  The data context passed in the DefaultVisualStyle of the ScatterPointSeries (and several other series) is not the DataPoint object, but the context of the series. In this case the DataPoint is stored in the Tag property of the Path.

• When using PointTemplate the most common shape you will use is an ellipse so you can define an Ellipse element in the template.

  Example 7: Setting Point Series PointTemplate

  • XAML

      <telerik:ScatterPointSeries XValueBinding="Category" YValueBinding="Value" ItemsSource="{Binding}"> 
          <telerik:ScatterPointSeries.PointTemplate> 
              <DataTemplate> 
                  <Ellipse Width="10" Height="10" Fill="{Binding DataItem.Color}"/> 
              </DataTemplate> 
          </telerik:ScatterPointSeries.PointTemplate> 
      </telerik:ScatterPointSeries> 

You can see the data model used for this example in the Example Data Model Definition section.

Figure 2: Different colored points

Pie Series

Similar to the BarSeries the PieSeries uses a default visual style to customize the appearance of the pie slices. The Style should target a Path element and it is applied to the DefaultSliceStyle property of the series.

Example 8: Setting Pie Series default visual style

• XAML

<telerik:RadPieChart x:Name="chart"> 
    <telerik:PieSeries ValueBinding="Value" ItemsSource="{Binding}"> 
        <telerik:PieSeries.DefaultSliceStyle> 
            <Style TargetType="Path"> 
                <Setter Property="Fill" Value="{Binding DataItem.Color}" /> 
            </Style> 
        </telerik:PieSeries.DefaultSliceStyle> 
    </telerik:PieSeries> 
</telerik:RadPieChart> 

You can see the data model used for this example in the Example Data Model Definition section.

Figure 3: Different colored pie slices