Series and Series Point Colors

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

An area series's and series border's brushes

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>

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:

A Pie series with colorized series points

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:

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

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

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.