Series and Series Point Colors

• May 28, 2021
• 5 minutes to read

Series and Series Points provide the Brush property that allows you to assign a custom color to a series/series point.

How to: Specify the Series Color

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:

Xaml

<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>

C# View & ViewModel

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 },
        };
    }
}

VB View & ViewModel

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
XYSeries.Brush	Gets or sets the color of the XY-series.
AreaSeries2D.Border AreaStackedSeries2D.Border CircularAreaSeries2D.Border	Provides access to a series border’s settings.
SeriesBorder	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.

How to: Specify Series Points’ Colors

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.

Colorize Manually Added 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:

Xaml

<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>

Colorize Points of Data-Bound Series

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:

Xaml View

<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>

C# View and View Model

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" }
        };
    }
}

VB View and View Model

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.