All docs
V20.1
20.2 (EAP/Beta)
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

Colorization

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

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

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

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

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

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

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

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

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

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.

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