New to Telerik UI for WPF? Download free 30-day trial

Multiple Chart Series

The chart controls allow you to add multiple series into the same chart instance. This way you can create multi-line, multi-bar charts, or any other combination of visualizations.

The following article discusses the RadCartesianChart control, but the same API can be used also in the other chart types.

To add multiple series instances, use the Series property of the chart.

Defining chart with multiple visualizations

<telerik:RadCartesianChart Palette="Windows8"> 
    <telerik:RadCartesianChart.HorizontalAxis> 
        <telerik:CategoricalAxis/> 
    </telerik:RadCartesianChart.HorizontalAxis> 
    <telerik:RadCartesianChart.VerticalAxis> 
        <telerik:LinearAxis /> 
    </telerik:RadCartesianChart.VerticalAxis> 
    <telerik:RadCartesianChart.Grid> 
        <telerik:CartesianChartGrid MajorLinesVisibility="XY" /> 
    </telerik:RadCartesianChart.Grid> 
    <telerik:RadCartesianChart.Series> 
        <telerik:PointSeries> 
            <telerik:PointSeries.DataPoints>                        
                <telerik:CategoricalDataPoint Category="January" Value="3" /> 
                <telerik:CategoricalDataPoint Category="February" Value="9" /> 
                <telerik:CategoricalDataPoint Category="March" Value="15" /> 
                <telerik:CategoricalDataPoint Category="April" Value="16" /> 
                <telerik:CategoricalDataPoint Category="May" Value="12" /> 
                <telerik:CategoricalDataPoint Category="June" Value="14" /> 
                <telerik:CategoricalDataPoint Category="July" Value="7" /> 
            </telerik:PointSeries.DataPoints> 
        </telerik:PointSeries> 
        <telerik:BarSeries> 
            <telerik:BarSeries.DataPoints> 
                <telerik:CategoricalDataPoint Category="January" Value="2" /> 
                <telerik:CategoricalDataPoint Category="February" Value="5" /> 
                <telerik:CategoricalDataPoint Category="March" Value="3" /> 
                <telerik:CategoricalDataPoint Category="April" Value="10" /> 
                <telerik:CategoricalDataPoint Category="May" Value="9" /> 
                <telerik:CategoricalDataPoint Category="June" Value="7" /> 
                <telerik:CategoricalDataPoint Category="July" Value="1" /> 
            </telerik:BarSeries.DataPoints> 
        </telerik:BarSeries> 
        <telerik:LineSeries> 
            <telerik:LineSeries.DataPoints> 
                <telerik:CategoricalDataPoint Category="January" Value="2" /> 
                <telerik:CategoricalDataPoint Category="February" Value="5" /> 
                <telerik:CategoricalDataPoint Category="March" Value="3" /> 
                <telerik:CategoricalDataPoint Category="April" Value="10" /> 
                <telerik:CategoricalDataPoint Category="May" Value="9" /> 
                <telerik:CategoricalDataPoint Category="June" Value="7" /> 
                <telerik:CategoricalDataPoint Category="July" Value="1" /> 
            </telerik:LineSeries.DataPoints> 
        </telerik:LineSeries> 
    </telerik:RadCartesianChart.Series> 
</telerik:RadCartesianChart> 
A picture showing multiple chart visualizations in the same plot area

The different chart series work with different axis combinations. Keep that in mind when defining multiple series.

The previous example shows how to define a chart with static data. To add the data dynamically, you can populate the DataPoints collection in code, or you can use the data binding capabilities of the chart series.

Adding Multiple Series in MVVM Setup

In case an unknown number of series should be added dynamically, based on information defined in data models, the SeriesProvider feature of the chart can be used.

See Also

In this article