wpf-114016-controls-and-libraries-charts-suite-chart-control-provide-data-series-point-colorizers.md
The chart control uses colorizers to paint series points. This topic lists available colorizer types and explains how to apply them to a chart.
Follow the steps below to apply a colorizer to series points:
Bind the series to a data source. For more information, refer to the following help topic: Bind a Series to a Data Source.
Create one of the following colorizers:
Configure the colorizer’s settings and assign it to the Series.Colorizer property.
Specify the series’s ColorDataMember property to set a data source field that is used to determine point colors.
The color that a colorizer calculates for a series point is assigned to the SeriesPoint.Brush property. You can handle the ChartControl.BoundDataChanged event to access the chart diagram’s series collection and the resulting colors of individual series points.
If the chart control aggregates series data, the aggregated point has the color that mostly occurs on the aggregated interval.
For line and area series, a colorizer calculates colors only for point markers. If you want to paint the line or the area itself, use segment colorizers.
The ColorObjectColorizer applies a color to a series point that is stored in the defined data field associated with the point. Use the ColorDataMember property to specify the data field name. This data field can store colors in different formats:
The following example shows how to apply colors from a data source to series points:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:ChartSample"
xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts"
xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
x:Class="ChartSample.MainWindow"
mc:Ignorable="d" Title="MainWindow" Height="640" Width="1350">
<Window.DataContext>
<local:MainWindowViewModel/>
</Window.DataContext>
<Grid>
<dxc:ChartControl DataSource="{Binding Data}">
<!-- ... -->
<dxc:XYDiagram2D>
<dxc:BarSideBySideSeries2D ArgumentDataMember="Argument"
ValueDataMember="Value"
ColorDataMember="Color">
<dxc:BarSideBySideSeries2D.Colorizer>
<dxc:ColorObjectColorizer/>
</dxc:BarSideBySideSeries2D.Colorizer>
</dxc:BarSideBySideSeries2D>
<!-- ... -->
</dxc:XYDiagram2D>
</dxc:ChartControl>
</Grid>
</Window>
using System.Collections.ObjectModel;
using System.Windows;
using System.Windows.Media;
namespace ChartSample {
public partial class MainWindow : Window {
public MainWindow() {
InitializeComponent();
}
}
public class MainWindowViewModel {
public ObservableCollection<DataPoint> Data { get; private set; }
public MainWindowViewModel() {
this.Data = DataPoint.GetDataPoints();
}
}
public class DataPoint {
public string Argument { get; set; }
public double Value { get; set; }
public object Color { get; set; }
public static ObservableCollection<DataPoint> GetDataPoints() {
return new ObservableCollection<DataPoint> {
new DataPoint { Argument = "Alabama", Value = 17383, Color = Colors.MediumOrchid },
new DataPoint { Argument = "California", Value = 17779, Color = "SkyBlue" },
new DataPoint { Argument = "Florida", Value = 18327, Color = Brushes.DarkSeaGreen },
new DataPoint { Argument = "Arizona", Value = 16957, Color = "#fc0" },
new DataPoint { Argument = "Colorado", Value = 19039, Color = "#ffof" },
new DataPoint { Argument = "Connecticut", Value = 17360, Color = "#ff005d" },
new DataPoint { Argument = "Georgia", Value = 17491, Color = "#ff20b2aa" },
new DataPoint { Argument = "Idaho", Value = 18801, Color = -32944 }
};
}
}
}
Imports System.Collections.ObjectModel
Imports System.Windows.Media
Namespace ChartSample
Public Partial Class MainWindow
Inherits Window
Public Sub New()
InitializeComponent()
End Sub
End Class
Public Class MainWindowViewModel
Private _Data As System.Collections.ObjectModel.ObservableCollection(Of ChartSample.DataPoint)
Public Property Data As ObservableCollection(Of DataPoint)
Get
Return _Data
End Get
Private Set(ByVal value As ObservableCollection(Of DataPoint))
_Data = value
End Set
End Property
Public Sub New()
Data = DataPoint.GetDataPoints()
End Sub
End Class
Public Class DataPoint
Public Property Argument As String
Public Property Value As Double
Public Property Color As Object
Public Shared Function GetDataPoints() As ObservableCollection(Of DataPoint)
Return New ObservableCollection(Of DataPoint) From {
New DataPoint With {
.Argument = "Alabama",
.Value = 17383,
.Color = Colors.MediumOrchid
},
New DataPoint With {
.Argument = "California",
.Value = 17779,
.Color = "SkyBlue"
},
New DataPoint With {
.Argument = "Florida",
.Value = 18327,
.Color = Brushes.DarkSeaGreen
},
New DataPoint With {
.Argument = "Arizona",
.Value = 16957,
.Color = "#fc0"
},
New DataPoint With {
.Argument = "Colorado",
.Value = 19039,
.Color = "#ffof"
},
New DataPoint With {
.Argument = "Connecticut",
.Value = 17360,
.Color = "#ff005d"
},
New DataPoint With {
.Argument = "Georgia",
.Value = 17491,
.Color = "#ff20b2aa"
},
New DataPoint With {
.Argument = "Idaho",
.Value = 18801,
.Color = -32944
}
}
End Function
End Class
End Namespace
The KeyColorColorizer applies colors to series points based on key values (keys) associated with the points. Points with equal keys have the same color. Populate the Keys collection with key values to specify the order in which the palette colors are assigned to keys. You should use values from a data source field that specifies ColorDataMember. If the Keys collection is empty, colors are applied to series points in the order keys have in the data source.
The following example shows how to paint series points by key values:
<dxc:BarSideBySideSeries2D DisplayName="GDP"
DataSource="{Binding XPath=/G20HPIs/CountryStatistics}"
ArgumentDataMember="Country" ValueDataMember="Product"
ColorDataMember="Region">
<dxc:BarSideBySideSeries2D.Colorizer>
<dxc:KeyColorColorizer>
<dxc:KeyColorColorizer.Keys>
<sys:String>Africa</sys:String>
<sys:String>America</sys:String>
<sys:String>Asia</sys:String>
<sys:String>Australia</sys:String>
<sys:String>Europe</sys:String>
</dxc:KeyColorColorizer.Keys>
<dxc:KeyColorColorizer.Palette>
<dxc:Office2013Palette/>
</dxc:KeyColorColorizer.Palette>
</dxc:KeyColorColorizer>
</dxc:BarSideBySideSeries2D.Colorizer>
</dxc:BarSideBySideSeries2D>
You can also specify the KeyColorColorizer.KeyProvider property to calculate keys based on custom logic.
The RangeColorizer applies colors based on ranges to which series point values belong. Use the RangeColorizer.RangeStops property to specify color boundaries.
<dxc:BarSideBySideSeries2D DataSource="{Binding Data}"
ArgumentDataMember="TimeStamp"
ValueDataMember="Temperature"
ArgumentScaleType="TimeSpan"
ColorDataMember="Temperature">
<dxc:BarSideBySideSeries2D.Colorizer>
<dxc:RangeColorizer RangeStops="40 45 50 55 60 65 70"
LegendTextPattern="{}{V1} - {V2}">
<dxc:RangeColorizer.Palette>
<dxc:SlipstreamPalette/>
</dxc:RangeColorizer.Palette>
</dxc:RangeColorizer>
</dxc:BarSideBySideSeries2D.Colorizer>
</dxc:BarSideBySideSeries2D>
If you want to distribute colors based on custom values, specify the RangeColorizer.ValueProvider property.