Skip to main content

Series and Marker Models

  • 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

Models for 3D Series

Waterfall

Pie and Donut

Models for 2D Series

Models for 3D Series

Financial

Stock

Candle Stick

Apply Model to Series

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

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

Custom model for bar series

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

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

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

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

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

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

Custom marker model

Follow the steps below to create a custom marker model:

<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

See Also