Colorization

Jul 22, 2020
7 minutes to read

This topic explains how to color points in a 3D chart and customize surface fill styles.

SurfaceSeriesView-Example

Paint Surfaces

You can apply different fill styles to surfaces. To do this, initialize the SurfaceSeriesView.FillStyle property with a fill style object. The following sections describe the available fill styles:

Tip

Use the SurfaceSeriesView.Material property to modify the surface material parameters (for example, light parameters).

Apply a Solid Fill

To paint a surface with a solid color, assign a SolidFillStyle object to the SurfaceSeriesView.FillStyle property. Use the SolidFillStyle.Brush property to specify the surface color.

XAML

<dxc:Series3D DisplayName="Function">
    ...
    <dxc:Series3D.View>
        <dxc:SurfaceSeriesView ...>
            <dxc:SurfaceSeriesView.FillStyle>
                <dxc:SolidFillStyle Brush="Coral"/>
            </dxc:SurfaceSeriesView.FillStyle>
        </dxc:SurfaceSeriesView>
    </dxc:Series3D.View>
</dxc:Series3D>

Apply a Gradient Fill

To fill a surface with a gradient brush, assign a GradientFillStyle object to the SurfaceSeriesView.FillStyle property. To specify color transition levels, populate the GradientFillStyle.ColorStops collection with ColorStop objects.

When the gradient fill style is used, the legend is displayed with a gradient scale. You can use {V} placeholder to format legend items.

XAML

<dxc:Chart3DControl AspectRatio="2 2 1">
    <dxc:Series3DStorage>
        <dxc:Series3D>
            ...
            <dxc:Series3D.View>
                <dxc:SurfaceSeriesView>
                    <dxc:SurfaceSeriesView.FillStyle>
                        <dxc:GradientFillStyle LegendTextPattern="{}{V:F2}">
                            <dxc:GradientFillStyle.ColorStops>
                                <dxc:ColorStop Offset="0%" />
                                <dxc:ColorStop Offset="25%" />
                                <dxc:ColorStop Offset="50%" />
                                <dxc:ColorStop Offset="75%" />
                                <dxc:ColorStop Offset="100%" />
                            </dxc:GradientFillStyle.ColorStops>
                        </dxc:GradientFillStyle>
                    </dxc:SurfaceSeriesView.FillStyle>
                </dxc:SurfaceSeriesView>
            </dxc:Series3D.View>
        </dxc:Series3D>
    </dxc:Series3DStorage>
    <dxc:Chart3DControl.Palette>
        <dxc:CustomPalette>
            <dxc:CustomPalette.Colors>
                <Color>#FF4472C4</Color>
                <Color>#FF5B9BD5</Color>
                <Color>#FF70AD47</Color>
                <Color>#FFFFC000</Color>
                <Color>#FFED7D31</Color>
            </dxc:CustomPalette.Colors>
        </dxc:CustomPalette>
    </dxc:Chart3DControl.Palette>
</dxc:Chart3DControl>

Apply a Striped Fill

To paint a surface with stripes, assign a StripeFillStyle object to the SurfaceSeriesView.FillStyle property. To specify color transition levels, populate the GradientFillStyle.ColorStops collection with ColorStop objects.

The legend displays a value range for each stripe when this fill style is used. You can use {V1} and {V2} placeholders to format legend items.

XAML

<dxc:Chart3DControl>
    <dxc:Series3DStorage>
        <dxc:Series3D ...>
            ...
            <dxc:Series3D.View>
                <dxc:SurfaceSeriesView>
                    <dxc:SurfaceSeriesView.FillStyle>     
                        <dxc:StripeFillStyle LegendTextPattern="{}{V1:f4} .. {V2:f4}">
                            <dxc:StripeFillStyle.ColorStops>
                                <dxc:ColorStop Offset="0%" />
                                <dxc:ColorStop Offset="25%" />
                                <dxc:ColorStop Offset="50%" />
                                <dxc:ColorStop Offset="75%" />
                            </dxc:StripeFillStyle.ColorStops>
                        </dxc:StripeFillStyle>
                    </dxc:SurfaceSeriesView.FillStyle>
                </dxc:SurfaceSeriesView>
            </dxc:Series3D.View>
        </dxc:Series3D>
    </dxc:Series3DStorage>
    <dxc:Chart3DControl.Palette>
        <dxc:CustomPalette>
            <dxc:CustomPalette.Colors>
                <Color>#FF5B9BD5</Color>
                <Color>#FF70AD47</Color>
                <Color>#FFFFC000</Color>
                <Color>#FFED7D31</Color>
            </dxc:CustomPalette.Colors>
        </dxc:CustomPalette>
    </dxc:Chart3DControl.Palette>
</dxc:Chart3DControl>

Map an Image to a Surface

To draw an image on a surface, assign an ImageFillStyle object to the SurfaceSeriesView.FillStyle property. Use the ImageFillStyle.ImageSource property to set the path to an image.

XAML

<dxc:Series3D DisplayName="Function">
    ...
    <dxc:Series3D.View>
        <dxc:SurfaceSeriesView>
            <dxc:SurfaceSeriesView.FillStyle>
                <dxc:ImageFillStyle ImageSource="dx-logo.png"/>
            </dxc:SurfaceSeriesView.FillStyle>
        </dxc:SurfaceSeriesView>
    </dxc:Series3D.View>
</dxc:Series3D>

Paint Point Markers

You can apply various colorization algorithms to bars, points, bubbles and surface point markers. To do this, initialize the Series3DViewBase.Colorizer property with a colorizer object.

Apply a Solid Brush

Assign a SolidColorizer3D object to the Series3DViewBase.Colorizer property to paint all points (markers) with a solid brush. Specify a color via the Brush property.

XAML

<dxc:Series3D DisplayName="Function">
    ...
    <dxc:Series3D.View>
        <dxc:Point3DSeriesView ...>
            <dxc:Point3DSeriesView.Colorizer>
                <dxc:SolidColorizer3D Brush="MediumSeaGreen"/>
            </dxc:Point3DSeriesView.Colorizer>
        </dxc:Point3DSeriesView>
    </dxc:Series3D.View>
</dxc:Series3D>

Color Each Point

Assign a ColorEachColorizer3D object to the Series3DViewBase.Colorizer property to apply a different color to points (markers). This colorizer sequentially assigns colors from the palette to individual points (markers). Colors are repeated if the number of data points exceeds the palette size. You can specify the palette via the Palette property (if not specified, the chart palette is used).

When SolidColorizer3D is applied to points (markers), the legend displays all points. You can use {X}, {Y}, and {Z} placeholders to format legend items.

XAML

<dxc:Series3D>
    ...
    <dxc:Series3D.View>
        <dxc:Point3DSeriesView ...>
            <dxc:Point3DSeriesView.Colorizer>
                <dxc:ColorEachColorizer3D ShowInLegend="True" 
                                          LegendTextPattern="{}{X:f2}, {Y:f2}, {Z:f2}">
                                    <dxc:ColorEachColorizer3D.Palette>
                                        <dxc:CustomPalette>
                                            <dxc:CustomPalette.Colors>
                                                <Color>#FF5B9BD5</Color>
                                                <Color>#FF70AD47</Color>
                                                <Color>#FFFFC000</Color>
                                                <Color>#FFED7D31</Color>
                                            </dxc:CustomPalette.Colors>
                                        </dxc:CustomPalette>
                                    </dxc:ColorEachColorizer3D.Palette>
                                </dxc:ColorEachColorizer3D>
            </dxc:Point3DSeriesView.Colorizer>
        </dxc:Point3DSeriesView>
    </dxc:Series3D.View>
</dxc:Series3D>

Color Points Based on Value Ranges

When a RangeColorizer3D is assigned to the Series3DViewBase.Colorizer property, a point color depends the range to which the point value belongs. You can use the RangeColorizer3D.RangeStops property to specify value range boundaries.

To customize legend items, use {V1} and {V2} placeholders.

XAML

<dxc:Series3D ...>
    <dxc:Series3D.View>
        <dxc:Bar3DSeriesView >
            <dxc:Bar3DSeriesView.Colorizer>
                <dxc:RangeColorizer3D RangeStops="30 60 90 120 150" 
                                      LegendTextPattern="{}{V1:f1} .. {V2:f1}" 
                                      ShowInLegend="True">
                    <dxc:RangeColorizer3D.Palette>
                        <dxc:CustomPalette>
                            <dxc:CustomPalette.Colors>
                                <Color>#6EC95C</Color>
                                <Color>#ACE45C</Color>
                                <Color>#E5E335</Color>
                                <Color>#FEAD2D</Color>
                                <Color>#FF5A19</Color>
                            </dxc:CustomPalette.Colors>
                        </dxc:CustomPalette>
                    </dxc:RangeColorizer3D.Palette>
                </dxc:RangeColorizer3D>
            </dxc:Bar3DSeriesView.Colorizer>
        </dxc:Bar3DSeriesView>
    </dxc:Series3D.View>
</dxc:Series3D>

Obtain Point Colors from a Data Source

Data-bound series can fetch point colors from a data source field. To do this, assign a ColorObjectColorizer3D object to the Series3DViewBase.Colorizer property. Use the SeriesPoint3DDataSourceAdapter.ColorDataMember or Series3DDataSourceAdapter.ColorDataMember (depending on the data binding approach) to pass the name of a field that stores colors.

The following color formats are supported:

Color
SolidColorBrush
Integer and unsigned integers that represent colors in the ARGB format. For example, 0xff808080 (0xAARRGGBB).
String. You can pass color names, for example, “Magenta”. The Colors class implements a set of available color names.

XAML

<dxc:Chart3DControl.DataContext>
      <local:ChartViewModel/>
</dxc:Chart3DControl.DataContext>
...
<dxc:Series3D DisplayName="Series">
    <dxc:SeriesPoint3DDataSourceAdapter DataSource="{Binding DataPoints}" 
                                        XArgumentDataMember="X" 
                                        YArgumentDataMember="Y" 
                                        ValueDataMember="Z" 
                                        ColorDataMember="Color"/>
    <dxc:Series3D.View>
        <dxc:Point3DSeriesView MarkerSize="50">
            <dxc:Point3DSeriesView.Colorizer>
                <dxc:ColorObjectColorizer3D LegendTextPattern="{}{X:f1}, {Y:f1}, {Z:f1}"/>
            </dxc:Point3DSeriesView.Colorizer>
        </dxc:Point3DSeriesView>
    </dxc:Series3D.View>       
</dxc:Series3D>

Show View Model Implementation

C#
VB.NET

using System.Collections.Generic;
using System.Windows;
using System.Windows.Media;
//...
public class ChartViewModel {
    List<DataPoint> dataPoints;
    public List<DataPoint> DataPoints {
        get {
            if (dataPoints == null) {
                dataPoints = new List<DataPoint> {
                        new DataPoint (0, 10, 1, "Magenta"),
                        new DataPoint (6, 11.46, 2, 0xfff58600),
                        new DataPoint (5, 11.90, 5, new Color(){ A=100, R=20, G=80, B=180 }),
                        new DataPoint (9, 12.1, 5, new SolidColorBrush(Colors.DarkGreen)),
            };
            }
            return dataPoints;
        }
    }
}
public class DataPoint {
    public double X { get; set; }
    public double Y { get; set; }
    public double Z { get; set; }
    public object Color { get; set; }
    public DataPoint(double x, double y, double z, object color) {
        this.X = x;
        this.Y = y;
        this.Z = z;
        this.Color = color;
    }
}

Public Class ChartViewModel
    Private f_DataPoints As List(Of DataPoint)
    Public ReadOnly Property DataPoints As List(Of DataPoint)
        Get
            If f_DataPoints Is Nothing Then
                f_DataPoints = New List(Of DataPoint) From {
                    New DataPoint(0, 10, 1, "Magenta"),
                    New DataPoint(6, 11.46, 2, &Hfff58600),
                    New DataPoint(5, 11.90, 5, New Color() With {
                        .A = 100,
                        .R = 20,
                        .G = 80,
                        .B = 180
                    }),
                    New DataPoint(9, 12.1, 5, New SolidColorBrush(Colors.DarkGreen))
                }
            End If
            Return f_DataPoints
        End Get
    End Property
End Class
Public Class DataPoint
    Public Property X As Double
    Public Property Y As Double
    Public Property Z As Double
    Public Property Color As Object
    Public Sub New(ByVal x As Double, ByVal y As Double, ByVal z As Double, ByVal color As Object)
        Me.X = x
        Me.Y = y
        Me.Z = z
        Me.Color = color
    End Sub
End Class

Color Points Based on Associated Keys

If you want point colors to vary depending on associated keys, assign a KeyColorColorizer3D object to the Series3DViewBase.Colorizer property. Points with the same key have the same color. Colors are repeated if the number of keys exceeds the number of palette colors.

Use the Palette property to specify the palette. If the palette is not specified, the chart palette is used.

XAML

<dxc:Chart3DControl.DataContext>
      <local:ChartViewModel/>
</dxc:Chart3DControl.DataContext>
...
<dxc:Series3D DisplayName="Series">
    <dxc:SeriesPoint3DDataSourceAdapter DataSource="{Binding DataPoints}" 
                                        XArgumentDataMember="X" 
                                        YArgumentDataMember="Y" 
                                        ValueDataMember="Z" 
                                        ColorDataMember="Key"/>
    <dxc:Series3D.View>
        <dxc:Point3DSeriesView MarkerSize="50">
            <dxc:Point3DSeriesView.Colorizer>
                 <dxc:KeyColorColorizer3D LegendTextPattern="Key: {V}">
                        <dxc:KeyColorColorizer3D.Palette>
                            <dxc:CustomPalette>
                                <dxc:CustomPalette.Colors>
                                    <Color>#6EC95C</Color>
                                    <Color>#FF5A19</Color>
                                </dxc:CustomPalette.Colors>
                            </dxc:CustomPalette>
                        </dxc:KeyColorColorizer3D.Palette>
                 </dxc:KeyColorColorizer3D>
            </dxc:Point3DSeriesView.Colorizer>
        </dxc:Point3DSeriesView>
    </dxc:Series3D.View>       
</dxc:Series3D>

Show View Model Implementation

C#
VB.NET

using System.Collections.Generic;
using System.Windows;
using System.Windows.Media;
//...
public class ChartViewModel {
    List<DataPoint> dataPoints;
    public List<DataPoint> DataPoints {
        get {
            if (dataPoints == null) {
                dataPoints = new List<DataPoint> {
                        new DataPoint (0, 10, 1, "I"),
                        new DataPoint (6, 11.46, 2, "II"),
                        new DataPoint (5, 11.90, 5, "II"),
                        new DataPoint (9, 12.1, 5, "II")
            };
            }
            return dataPoints;
        }
    }
}
public class DataPoint {
    public double X { get; set; }
    public double Y { get; set; }
    public double Z { get; set; }
    public string Key { get; set; }
    public DataPoint(double x, double y, double z, string key) {
        this.X = x;
        this.Y = y;
        this.Z = z;
        this.Key = key;
    }
}

Imports System.Collections.Generic
Imports System.Windows.Media
Imports System.Windows
'...
Public Class ChartViewModel
    Private f_DataPoints As List(Of DataPoint)
    Public ReadOnly Property DataPoints As List(Of DataPoint)
        Get
            If f_DataPoints Is Nothing Then
                f_DataPoints = New List(Of DataPoint) From {
                    New DataPoint(0, 10, 1, "I"),
                    New DataPoint(6, 11.46, 2, "II"),
                    New DataPoint(5, 11.90, 5, "II"),
                    New DataPoint(9, 12.1, 5, "II")
                }
            End If
            Return f_DataPoints
        End Get
    End Property
End Class
Public Class DataPoint
    Public Property X As Double
    Public Property Y As Double
    Public Property Z As Double
    Public Property Key As String
    Public Sub New(ByVal x As Double, ByVal y As Double, ByVal z As Double, ByVal key As String)
        Me.X = x
        Me.Y = y
        Me.Z = z
        Me.Key = key
    End Sub
End Class

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Paint Surfaces

Apply a Solid Fill

Apply a Gradient Fill

Apply a Striped Fill

Map an Image to a Surface

Paint Point Markers

Apply a Solid Brush

Color Each Point

Color Points Based on Value Ranges

Obtain Point Colors from a Data Source

Color Points Based on Associated Keys