Series and Marker Models

• Jan 21, 2022
• 3 minutes to read

The DevExpress WPF Chart Control ships with multiple predefined models that you can assign to your series and series point markers. You can also create custom models for series or markers.

Predefined Series Models

You can apply a model to the Bar, Pie (Donut), and Financial series.

Bar

Models for 2D Series

OutsetBar2DModel

SteelColumnBar2DModel

TransparentBar2DModel

GradientBar2DModel

BorderlessGradientBar2DModel

FlatBar2DModel

FlatGlassBar2DModel

SimpleBar2DModel

BorderlessSimpleBar2DModel

GlassCylinderBar2DModel

Quasi3DBar2DModel

Models for 3D Series

CylinderBar3DModel

BoxBar3DModel

ConeBar3DModel

HexagonBar3DModel

PyramidBar3DModel

Waterfall

OutsetWaterfall2DModel

BorderlessGradientWaterfall2DModel

BorderlessSimpleWaterfall2DModel

GradientWaterfall2DModel

SimpleWaterfall2DModel

TransparentWaterfall2DModel

Pie and Donut

Models for 2D Series

SimplePie2DModel

CupidPie2DModel

GlarePie2DModel

GlassPie2DModel

GlossyPie2DModel

FlatPie2DModel

BorderlessFlatPie2DModel

Models for 3D Series

PentagonPie3DModel

CirclePie3DModel

RectanglePie3DModel

HexagonPie3DModel

RoundedRectanglePie3DModel

SemiCirclePie3DModel

SemiRectanglePie3DModel

SemiPentagonPie3DModel

SemiHexagonPie3DModel

SemiRoundedRectanglePie3DModel

Financial

Stock

ThinStock2DModel

DropsStock2DModel

ArrowsStock2DModel

FlatStock2DModel

Candle Stick

SimpleCandleStick2DModel

BorderCandleStick2DModel

ThinCandleStick2DModel

FlatCandleStick2DModel

GlassCandleStick2DModel

Apply Model to Series

Use the Model property to assign a model to a series:

XAML

<dxc:BarSideBySideSeries2D>
    <dxc:BarSideBySideSeries2D.Model>
        <dxc:OutsetBar2DModel/>
    </dxc:BarSideBySideSeries2D.Model>
</dxc:BarSideBySideSeries2D>

See also: How to: Assign Different Models for Series and Point Markers

Custom Model for Series

You can create a custom model for the following series:

Series Type	Custom Model Class
2D Bar Series	CustomBar2DModel
3D Bar Series	CustomBar3DModel
2D Pie Series	CustomPie2DModel
3D Pie Series	CustomPie3DModel
Stock Series	CustomStock2DModel
Candle Stick Series	CustomCandleStick2DModel

The following example shows how to create a custom model:

• Assign a Custom Model Class object to the Model property.
• Create a ControlTemplate with visual elements.
• Assign this template to the custom model’s PointTemplate property.

The code below defines a custom model for BarSideBySideSeries2D:

XAML

<dxc:BarSideBySideSeries2D ColorEach="True">
    <dxc:BarSideBySideSeries2D.Model>
        <dxc:CustomBar2DModel>
            <dxc:CustomBar2DModel.PointTemplate>
                <ControlTemplate>
                    <Grid>
                        <Border 
                            x:Name="border" 
                            Background="{Binding Path=PointColor, ConverterParameter=Gray, Converter={StaticResource brushOverlayConverter}}" 
                            Opacity="0.25" 
                            CornerRadius="5,5,0,0" 
                            Margin="0,-4,0,0" 
                            RenderTransformOrigin="0.5,0.5">
                        </Border>
                        <Border Background="{Binding Path=PointColor, ConverterParameter=Gray, Converter={StaticResource brushOverlayConverter}}" 
                                CornerRadius="3,3,0,0" Margin="4,0,4,0">
                            <Border CornerRadius="2,2,0,0" Margin="1,1,1,0">
                                <Border.Background>
                                    <Binding Path="PointColor" 
                                             Converter="{StaticResource brushOverlayConverter}">
                                        <Binding.ConverterParameter>
                                            <LinearGradientBrush EndPoint="0,0.5" StartPoint="1,0.5">
                                                <GradientStop Color="#FFB2B2B2" Offset="0" />
                                                <GradientStop Color="#FFC2C2C2" Offset="1" />
                                            </LinearGradientBrush>
                                        </Binding.ConverterParameter>
                                    </Binding>
                                </Border.Background>
                            </Border>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </dxc:CustomBar2DModel.PointTemplate>
        </dxc:CustomBar2DModel>
    </dxc:BarSideBySideSeries2D.Model>
</dxc:BarSideBySideSeries2D>

To view the complete example, refer to the following help topic: How to: Create Custom Series Point Model.

Predefined Models for Series Markers

2D Marker Models

You can apply 2D marker models to Area, Point, Line, and Bubble, Polar and Radar series.

CrossMarker2DModel

BorderlessSimpleMarker2DModel

CircleMarker2DModel

SimpleMarker2DModel

DollarMarker2DModel

PolygonMarker2DModel

RingMarker2DModel

SquareMarker2DModel

StarMarker2DModel

TriangleMarker2DModel

InvertedTriangleMarker2DModel

DiamondMarker2DModel

PlusMarker2DModel

PentagonMarker2DModel

Use the MarkerModel property to assign a marker model to a series:

XAML

<dxc:LineSeries2D>
  <dxc:LineSeries2D.MarkerModel>
    <dxc:CrossMarker2DModel/>
  </dxc:LineSeries2D.MarkerModel>
</dxc:LineSeries2D>

3D Marker Models

You can apply the following models to the Bubble and Point series.

SphereMarker3DModel

CapsuleMarker3DModel

ConeMarker3DModel

CubeMarker3DModel

CylinderMarker3DModel

HexagonMarker3DModel

PyramidMarker3DModel

RoundedCubeMarker3DModel

StarMarker3DModel

Use the Model property to assign a marker model to a series:

XAML

<dxc:XYDiagram3D>
    <dxc:XYDiagram3D.Series>
        <dxc:PointSeries3D>
            <dxc:PointSeries3D.Model>
                <dxc:SphereMarker3DModel />
            </dxc:PointSeries3D.Model>
        </dxc:PointSeries3D>
    </dxc:XYDiagram3D.Series>
</dxc:XYDiagram3D>

Custom Model for 2D Series Markers

You can implement a custom marker model for 2D series that support marker models.

Follow the steps below to create a custom marker model:

• Assign a CustomMarker2DModel object to the MarkerModel property.
• Create a ControlTemplate with visual elements.
• Assign this template to the CustomMarker2DModel.PointTemplate property.

XAML

<Window.Resources>
        <ResourceDictionary>
            <dxc:BrushOverlayConverter x:Key="brushOverlayConverter" />
        </ResourceDictionary>
</Window.Resources>
...
    <dxc:LineSeries2D Name="xLineSeries2D" DataSource="{Binding Data}" 
                    ArgumentDataMember="Argument"
                    ValueDataMember="Value"
                    MarkerSize="22"
                    MarkerVisible="True">
        <dxc:LineSeries2D.MarkerModel>
            <dxc:CustomMarker2DModel>
                <dxc:CustomMarker2DModel.PointTemplate>
                    <ControlTemplate>
                    <Grid Background="Transparent" >
                            <Ellipse Fill="CornflowerBlue" Opacity="0.5" />
                            <Ellipse Stroke="{Binding Path=PointColor, ConverterParameter=Gray, Converter={StaticResource brushOverlayConverter}}" StrokeThickness="2" />
                            <Ellipse Stroke="{Binding Path=PointColor, ConverterParameter=Gray, Converter={StaticResource brushOverlayConverter}}" StrokeThickness="2" Margin="4" />
                            <Ellipse Fill="Red"  Margin="8" />
                    </Grid>
                    </ControlTemplate>
                </dxc:CustomMarker2DModel.PointTemplate>
            </dxc:CustomMarker2DModel>
        </dxc:LineSeries2D.MarkerModel>
    </dxc:LineSeries2D>

You can use different custom marker models based on a point argument:

View Example: How to: Select a series point marker based on a point argument