Diagram.SeriesItemTemplate Property

Gets or sets the DataTemplate that specifies how to convert a model object to a series.

Namespace: DevExpress.Xpf.Charts

Assembly: DevExpress.Xpf.Charts.v18.2.dll

Declaration

C#

public DataTemplate SeriesItemTemplate { get; set; }

VB.NET

Public Property SeriesItemTemplate As DataTemplate

Property Value

Type	Description
DataTemplate	A DataTemplate that specifies the visualization of the series data objects. The default is null (Nothing in Visual Basic).

Example

This example demonstrates how to bind series view models to a chart. Note that you can bind secondary axes and custom labels using the same approach.

To bind series view models to a chart, use the Diagram.SeriesItemsSource property. To configure how the series view model is converted to a series on a chart, use Diagram.SeriesItemTemplate or Diagram.SeriesItemTemplateSelector. In this example, the Template is used to generate identical series.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-generate-series-of-identical-view-types-using-the-mvvm-binding-style-t513360.

GdpSeries.vb

Public Class GdpSeries
    Public Property CountryName() As String
    Public Property Values() As IEnumerable(Of Gdp)
End Class

Public Class Gdp
    Public Property Year() As Integer
    Public Property Value() As Double
End Class

MainWindow.xaml

<dxc:ChartControl>
    <dxc:ChartControl.Legends>
        <dxc:Legend HorizontalPosition="Left" VerticalPosition="Top" Orientation="Horizontal"/>
    </dxc:ChartControl.Legends>
    <dxc:XYDiagram2D SeriesItemsSource="{Binding GdpSeries}">
        <dxc:XYDiagram2D.SeriesItemTemplate>
            <DataTemplate>
                <dxc:LineSeries2D DisplayName="{Binding CountryName}"
                                  DataSource="{Binding Values}"
                                  ArgumentDataMember="Year"
                                  ValueDataMember="Value"/>
            </DataTemplate>
        </dxc:XYDiagram2D.SeriesItemTemplate>
    </dxc:XYDiagram2D>
</dxc:ChartControl>

ChartViewModel.vb

Public Class ChartViewModel
    Private privateGdpSeries As IEnumerable(Of GdpSeries)
    Public Property GdpSeries() As IEnumerable(Of GdpSeries)
        Get
            Return privateGdpSeries
        End Get
        Private Set(ByVal value As IEnumerable(Of GdpSeries))
            privateGdpSeries = value
        End Set
    End Property

    Public Sub New()
        GdpSeries = New Collection(Of GdpSeries) From { _
            New GdpSeries With { _
                .CountryName = "USA", .Values = New Collection(Of Gdp) From { _
                    New Gdp With {.Year = 2015, .Value = 18.037}, _
                    New Gdp With {.Year = 2014, .Value = 17.393}, _
                    New Gdp With {.Year = 2013, .Value = 16.692}, _
                    New Gdp With {.Year = 2012, .Value = 16.155}, _
                    New Gdp With {.Year = 2011, .Value = 15.518}, _
                    New Gdp With {.Year = 2010, .Value = 14.964}, _
                    New Gdp With {.Year = 2009, .Value = 14.419}, _
                    New Gdp With {.Year = 2008, .Value = 14.719} _
                } _
            }, _
            New GdpSeries With { _
                .CountryName = "China", .Values = New Collection(Of Gdp) From { _
                    New Gdp With {.Year = 2015, .Value = 11.065}, _
                    New Gdp With {.Year = 2014, .Value = 10.482}, _
                    New Gdp With {.Year = 2013, .Value = 9.607}, _
                    New Gdp With {.Year = 2012, .Value = 8.561}, _
                    New Gdp With {.Year = 2011, .Value = 7.573}, _
                    New Gdp With {.Year = 2010, .Value = 6.101}, _
                    New Gdp With {.Year = 2009, .Value = 5.11}, _
                    New Gdp With {.Year = 2008, .Value = 4.598} _
                } _
            }, _
            New GdpSeries With { _
                .CountryName = "Japan", .Values = New Collection(Of Gdp) From { _
                    New Gdp With {.Year = 2015, .Value = 4.383}, _
                    New Gdp With {.Year = 2014, .Value = 4.849}, _
                    New Gdp With {.Year = 2013, .Value = 5.156}, _
                    New Gdp With {.Year = 2012, .Value = 6.203}, _
                    New Gdp With {.Year = 2011, .Value = 6.157}, _
                    New Gdp With {.Year = 2010, .Value = 5.7}, _
                    New Gdp With {.Year = 2009, .Value = 5.231}, _
                    New Gdp With {.Year = 2008, .Value = 5.038} _
                } _
            } _
        }
    End Sub
End Class

ChartViewModel.cs

public class ChartViewModel {
    public IEnumerable<GdpSeries> GdpSeries { get; private set; }

    public ChartViewModel() {
        GdpSeries = new Collection<GdpSeries> {
            new GdpSeries {
                CountryName = "USA",
                Values = new Collection<Gdp> {
                    new Gdp { Year = 2015, Value = 18.037},
                    new Gdp { Year = 2014, Value = 17.393},
                    new Gdp { Year = 2013, Value = 16.692},
                    new Gdp { Year = 2012, Value = 16.155},
                    new Gdp { Year = 2011, Value = 15.518},
                    new Gdp { Year = 2010, Value = 14.964},
                    new Gdp { Year = 2009, Value = 14.419},
                    new Gdp { Year = 2008, Value = 14.719}
                }
            },
            new GdpSeries {
                CountryName = "China",
                Values = new Collection<Gdp> {
                    new Gdp { Year = 2015, Value = 11.065},
                    new Gdp { Year = 2014, Value = 10.482},
                    new Gdp { Year = 2013, Value = 9.607},
                    new Gdp { Year = 2012, Value = 8.561},
                    new Gdp { Year = 2011, Value = 7.573},
                    new Gdp { Year = 2010, Value = 6.101},
                    new Gdp { Year = 2009, Value = 5.11},
                    new Gdp { Year = 2008, Value = 4.598}
                }
            },
            new GdpSeries {
                CountryName = "Japan",
                Values = new Collection<Gdp> {
                    new Gdp { Year = 2015, Value = 4.383},
                    new Gdp { Year = 2014, Value = 4.849},
                    new Gdp { Year = 2013, Value = 5.156},
                    new Gdp { Year = 2012, Value = 6.203},
                    new Gdp { Year = 2011, Value = 6.157},
                    new Gdp { Year = 2010, Value = 5.7},
                    new Gdp { Year = 2009, Value = 5.231},
                    new Gdp { Year = 2008, Value = 5.038}
                }
            }
        };
    }
}

GdpSeries.cs

public class GdpSeries {
    public String CountryName { get; set; }
    public IEnumerable<Gdp> Values { get; set; }
}

public class Gdp {
    public int Year { get; set; }
    public double Value { get; set; }
}

Related GitHub Examples

The following code snippets (auto-collected from DevExpress Examples) contain references to the SeriesItemTemplate property.

Note

The algorithm used to collect these code examples remains a work in progress. Accordingly, the links and snippets below may produce inaccurate results. If you encounter an issue with code examples below, please use the feedback form on this page to report the issue.

C#

wpf-charts-create-multiple-series-of-identical-view-mvvm/VB/SeriesItemTemplateSample/MainWindow.xaml#L24

<dxc:XYDiagram2D SeriesItemsSource="{Binding GdpSeries}">
    <dxc:XYDiagram2D.SeriesItemTemplate>
        <DataTemplate>

how-to-create-a-2d-area-chart-e1633/VB/Window1.xaml#L16

<dxc:XYDiagram2D SeriesItemsSource="{Binding Data}">
    <dxc:XYDiagram2D.SeriesItemTemplate>
        <DataTemplate>