wpf-400440-controls-and-libraries-charts-suite-chart-control-series-series-and-series-point-colors.md
Series and Series Points provide the Brush property that allows you to assign a custom color to a series/series point.
The XYSeries.Brush property allows you to specify series color. The Area Series and Funnel Series provide the Border properties that contain the Brush property. This property specifies the series’ border brush:
The following markup demonstrates how to specify a custom color for a series:
<dxc:ChartControl Padding="0">
<dxc:ChartControl.DataContext>
<local:MainViewModel/>
</dxc:ChartControl.DataContext>
<dxc:ChartControl.Diagram>
<dxc:XYDiagram2D>
<dxc:XYDiagram2D.Series>
<dxc:SplineAreaSeries2D DataSource="{Binding History}"
ArgumentDataMember="Date"
ValueDataMember="Balance"
Brush="#43a047">
<dxc:SplineAreaSeries2D.Border>
<dxc:SeriesBorder Brush="#88000000"/>
</dxc:SplineAreaSeries2D.Border>
</dxc:SplineAreaSeries2D>
</dxc:XYDiagram2D.Series>
</dxc:XYDiagram2D>
</dxc:ChartControl.Diagram>
</dxc:ChartControl>
class HistoryItem {
public DateTime Date { get; set; }
public double Balance { get; set; }
}
class MainViewModel {
public IReadOnlyList<HistoryItem> History { get; }
public MainViewModel() {
DateTime initDate = DateTime.Now;
History = new List<HistoryItem> {
new HistoryItem { Date = initDate, Balance = 277 },
new HistoryItem { Date = initDate.AddYears(-1), Balance = 328.5 },
new HistoryItem { Date = initDate.AddYears(-2), Balance = 297 },
new HistoryItem { Date = initDate.AddYears(-3), Balance = 255.3 },
new HistoryItem { Date = initDate.AddYears(-4), Balance = 173.5 },
new HistoryItem { Date = initDate.AddYears(-5), Balance = 131.8 },
};
}
}
Class HistoryItem
Public Property Date As DateTime
Public Property Balance As Double
End Class
class MainViewModel {
Public Property History As IReadOnlyList(Of HistoryItem)
Public Sub New()
Dim initDate As DateTime = DateTime.Now
History = New List(Of HistoryItem) From {
New HistoryItem { .Date = initDate, .Balance = 277 },
New HistoryItem { .Date = initDate.AddYears(-1), .Balance = 328.5 },
New HistoryItem { .Date = initDate.AddYears(-2), .Balance = 297 },
New HistoryItem { .Date = initDate.AddYears(-3), .Balance = 255.3 },
New HistoryItem { .Date = initDate.AddYears(-4), .Balance = 173.5 },
New HistoryItem { .Date = initDate.AddYears(-5), .Balance = 131.8 },
}
End Sub
End Class
The classes and properties below configure series’ colors:
|
Symbol
|
Description
| | --- | --- | |
|
Gets or sets the color of the XY-series.
| |
|
Provides access to a series border’s settings.
| |
|
Contains settings the specify the appearance of a series border.
|
Important
The Chart Control can use only SolidColorBrush objects to draw series.
Note
The pie/donut series and funnel series do not provide series color and you should utilize series points’ brushes
Tip
Use the ChartControl.BoundDataChanged event to specify colors of series generated via the Series Template.
The Chart Control allows you to colorize series points in custom colors:
The selection of a particular method of coloring depends on whether the Chart Control is bound to data:
Important
The Chart Control can use only SolidColorBrush objects to color series points.
The SeriesPoint class provides the Brush property that allows you to specify the series point color when you manually add series points to series:
<dxc:PieSeries2D.Points>
<dxc:SeriesPoint Argument="Housing"
Value="0.33"
Brush="#2096f3"/>
<dxc:SeriesPoint Argument="Food"
Value="0.13"
Brush="#f44336"/>
<dxc:SeriesPoint Argument="Healthcare"
Value="0.06"
Brush="#ffca28"/>
<dxc:SeriesPoint Argument="Entertainment"
Value="0.05"
Brush="#43a047"/>
<dxc:SeriesPoint Argument="Apparel"
Value="0.04"
Brush="#9c27b0"/>
<dxc:SeriesPoint Argument="Other"
Value="0.39"
Brush="#bdbdbd"/>
</dxc:PieSeries2D.Points>
Use the ColorObjectColorizer colorizer to draw series points using colors that a data source stores when the chart displays series bound to a data source or it generates series from a data source:
<dxc:ChartControl>
<dxc:ChartControl.DataContext>
<local:MainViewModel/>
</dxc:ChartControl.DataContext>
<dxc:ChartControl.Diagram>
<dxc:SimpleDiagram2D>
<dxc:SimpleDiagram2D.Series>
<dxc:PieSeries2D DataSource="{Binding Statistics}"
ArgumentDataMember="Name"
ValueDataMember="Value"
ColorDataMember="ColorCode">
<dxc:PieSeries2D.Colorizer>
<dxc:ColorObjectColorizer/>
</dxc:PieSeries2D.Colorizer>
</dxc:PieSeries2D>
</dxc:SimpleDiagram2D.Series>
</dxc:SimpleDiagram2D>
</dxc:ChartControl.Diagram>
</dxc:ChartControl>
class StatisticsItem {
public string Name { get; set; }
public double Value { get; set; }
public string ColorCode { get; set; }
}
class MainViewModel {
public IReadOnlyList<StatisticsItem> Statistics { get; }
public MainViewModel() {
Statistics = new List<StatisticsItem> {
new StatisticsItem { Name = "Housing", Value = 0.33, ColorCode = "#2096f3" },
new StatisticsItem { Name = "Food", Value = 0.13, ColorCode = "#f44336" },
new StatisticsItem { Name = "Healthcare", Value = 0.06, ColorCode = "#ffca28" },
new StatisticsItem { Name = "Entertainment", Value = 0.05, ColorCode = "#43a047" },
new StatisticsItem { Name = "Apparel", Value = 0.04, ColorCode = "#9c27b0" },
new StatisticsItem { Name = "Other", Value = 0.39, ColorCode = "#bdbdbd" }
};
}
}
Class StatisticsItem
Public Property Name As String
Public Property Value As Double
Public Property ColorCode As String
End Class
Class MainViewModel
Public ReadOnly Property Statistics As IReadOnlyList(Of StatisticsItem)
Public Sub New()
Statistics = New List(Of StatisticsItem) From {
New StatisticsItem With { .Name = "Housing", .Value = 0.33, .ColorCode = "#2096f3" },
New StatisticsItem With { .Name = "Food", .Value = 0.13, .ColorCode = "#f44336" },
New StatisticsItem With { .Name = "Healthcare", .Value = 0.06, .ColorCode = "#ffca28" },
New StatisticsItem With { .Name = "Entertainment", .Value = 0.05, .ColorCode = "#43a047" },
New StatisticsItem With { .Name = "Apparel", .Value = 0.04, .ColorCode = "#9c27b0" },
New StatisticsItem With { .Name = "Other", .Value = 0.39, .ColorCode = "#bdbdbd" }
}
End Sub
End Class
The following classes and properties manage colors of series points that belong to the data-bound series:
| Symbol | Description |
|---|---|
| Series.ColorDataMember | Gets or sets the name of the data member on which the color of a series point is based. |
| Series.Colorizer | Gets or sets the colorizer used by this series. |
| ColorObjectColorizer | A Colorizer that allows providing Color objects stored in Series.ColorDataMember to series points. |
Refer to the Colorizers topic to learn more about other ways to color series points in custom colors.