ChartControl.Diagram Property

Gets the chart control’s diagram and provides access to its settings.

Namespace: DevExpress.Xpf.Charts

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

NuGet Package: DevExpress.Wpf.Charts

Declaration

C#

public Diagram Diagram { get; set; }

VB.NET

Public Property Diagram As Diagram

Property Value

Type	Description
Diagram	A Diagram object that represents the chart control’s diagram.

Remarks

The Diagram is one of the basic chart elements, because it represents series data. Its most significant characteristic is type, allowing representation of only those series that are compatible with this diagram, within it.

To learn more on diagrams of different types, and to see which series types are compatible with each diagram types, refer to Diagram.

Example

This example shows how to create a 2D Side-by-Side Bar chart.

1. Create a ChartControl and set its ChartControl.Diagram property to a XYDiagram2D object. Note that the ChartControl.Diagram is a content property. You can declare a diagram in XAML directly after a chart control’s declaration without wrapping it in opening and closing ChartControl.Diagram tags.

2. Specify the Diagram.SeriesItemsSource property to bind a collection of objects used to generate series.

   The Diagram.SeriesItemTemplate property allows you to define a template for all series. Use the following API members to configure a series item:

   Member	Description
   BarSideBySideSeries2D	Represents the 2D Side-by-Side Bar series.
   Series.DataSource	Specifies the series’s data source.
   Series.ArgumentDataMember	Defines the data member that provides the series’s arguments.
   Series.ValueDataMember	Specifies the data member that provides the series’s values.
   Series.DisplayName	Gets or sets the display name of the series.

   For more information on how to populate a chart with data, see the following section: Providing Data

3. Use the following API members to configure the x-axis options.

   Member	Description
   XYDiagram2D.AxisX	Gets the X-axis.
   AxisX2D	Represents the X-axis of a XYDiagram2D class.
   AxisX2D.DateTimeScaleOptions	Provides access to the options that define the behavior of a date-time X-scale when its mode is manual, automatic or continuous.

4. Create a legend and customize its settings. For more information about legends, refer to the following topic: Legends

View Example

XAML

<Window x:Class="SideBySideBar2DChart.Window1" 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts"
        xmlns:local="clr-namespace:SideBySideBar2DChart"
        Title="Window1" Height="350" Width="620">
    <Window.DataContext>
        <local:ChartViewModel/>
    </Window.DataContext>
    <Grid>
        <dxc:ChartControl Name="chartControl1">
            <dxc:ChartControl.Diagram>
                <dxc:XYDiagram2D SeriesItemsSource="{Binding Data}">
                    <dxc:XYDiagram2D.SeriesItemTemplate>
                        <DataTemplate>
                            <dxc:BarSideBySideSeries2D DisplayName="{Binding Name}" 
                                               DataSource="{Binding Values}"
                                               ArgumentDataMember="Argument"
                                               ValueDataMember="Value" 
                                               BarWidth="0.6">
                                <dxc:BarSideBySideSeries2D.Model>
                                    <dxc:BorderlessSimpleBar2DModel/>
                                </dxc:BarSideBySideSeries2D.Model>
                            </dxc:BarSideBySideSeries2D>
                        </DataTemplate>
                    </dxc:XYDiagram2D.SeriesItemTemplate>
                    <dxc:XYDiagram2D.AxisX>
                        <dxc:AxisX2D>
                            <dxc:AxisX2D.DateTimeScaleOptions>
                                <dxc:ManualDateTimeScaleOptions MeasureUnit="Year" GridAlignment="Year" 
                                                                AutoGrid="False" GridSpacing="1"/>
                            </dxc:AxisX2D.DateTimeScaleOptions>
                        </dxc:AxisX2D>
                    </dxc:XYDiagram2D.AxisX>
                </dxc:XYDiagram2D>
            </dxc:ChartControl.Diagram>
            <dxc:ChartControl.Legends>
                <dxc:Legend HorizontalPosition="Right"/>
            </dxc:ChartControl.Legends>
        </dxc:ChartControl>
    </Grid>
</Window>

C#

using System;
using System.Collections.ObjectModel;
using System.Windows;
namespace SideBySideBar2DChart {
    public partial class Window1 : Window {
        public Window1() {
            InitializeComponent();
        }
    }
    public class ChartViewModel {
        public ObservableCollection<DataSeries> Data { get; private set; }

        public ChartViewModel() {
            Data = new ObservableCollection<DataSeries> {
                new DataSeries{
                    Name = "DevAV North",
                    Values = new ObservableCollection<DataPoint> {
                        new DataPoint (new DateTime(2013,12,31), 362.5),
                        new DataPoint (new DateTime(2014,12,31), 348.4),
                        new DataPoint (new DateTime(2015,12,31), 279.0),
                        new DataPoint (new DateTime(2016,12,31), 230.9),
                        new DataPoint (new DateTime(2017,12,31), 203.5),
                        new DataPoint (new DateTime(2018,12,31), 197.1)
                    }
                },
                new DataSeries{
                    Name = "DevAV South",
                    Values = new ObservableCollection<DataPoint> {
                        new DataPoint (new DateTime(2013,12,31), 277.0),
                        new DataPoint (new DateTime(2014,12,31), 328.5),
                        new DataPoint (new DateTime(2015,12,31), 297.0),
                        new DataPoint (new DateTime(2016,12,31), 255.3),
                        new DataPoint (new DateTime(2017,12,31), 173.5),
                        new DataPoint (new DateTime(2018,12,31), 131.8)
                    }
                }
            };
        }
        public class DataSeries {
            public string Name { get; set; }
            public ObservableCollection<DataPoint> Values { get; set; }
        }
        public class DataPoint {
            public DateTime Argument { get; set; }
            public double Value { get; set; }
            public DataPoint(DateTime argument, double value) {
                Argument = argument;
                Value = value;
            }
        }
    }
}

VB.NET

Imports System
Imports System.Collections.ObjectModel

Namespace SideBySideBar2DChart
    Public Partial Class Window1
        Inherits Window

        Public Sub New()
            InitializeComponent()
        End Sub
    End Class

    Public Class ChartViewModel
        Private _Data As System.Collections.ObjectModel.ObservableCollection(Of SideBySideBar2DChart.ChartViewModel.DataSeries)

        Public Property Data As ObservableCollection(Of DataSeries)
            Get
                Return _Data
            End Get
            Private Set(ByVal value As ObservableCollection(Of DataSeries))
                _Data = value
            End Set
        End Property

        Public Sub New()
            Data = New ObservableCollection(Of DataSeries) From {
                New DataSeries With {
                    .Name = "DevAV North",
                    .Values = New ObservableCollection(Of DataPoint) From {
                        New DataPoint(New DateTime(2013, 12, 31), 362.5),
                        New DataPoint(New DateTime(2014, 12, 31), 348.4),
                        New DataPoint(New DateTime(2015, 12, 31), 279.0),
                        New DataPoint(New DateTime(2016, 12, 31), 230.9),
                        New DataPoint(New DateTime(2017, 12, 31), 203.5),
                        New DataPoint(New DateTime(2018, 12, 31), 197.1)
                    }
                },
                New DataSeries With {
                    .Name = "DevAV South",
                    .Values = New ObservableCollection(Of DataPoint) From {
                        New DataPoint(New DateTime(2013, 12, 31), 277.0),
                        New DataPoint(New DateTime(2014, 12, 31), 328.5),
                        New DataPoint(New DateTime(2015, 12, 31), 297.0),
                        New DataPoint(New DateTime(2016, 12, 31), 255.3),
                        New DataPoint(New DateTime(2017, 12, 31), 173.5),
                        New DataPoint(New DateTime(2018, 12, 31), 131.8)
                    }
                }
            }
        End Sub

        Public Class DataSeries
            Public Property Name As String
            Public Property Values As ObservableCollection(Of DataPoint)
        End Class

        Public Class DataPoint
            Public Property Argument As Date
            Public Property Value As Double

            Public Sub New(ByVal argument As Date, ByVal value As Double)
                Me.Argument = argument
                Me.Value = value
            End Sub
        End Class
    End Class
End Namespace

Related GitHub Examples

The following code snippets (auto-collected from DevExpress Examples) contain references to the Diagram 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.

XAML

wpf-chart-change-point-colors/CS/Window1.xaml#L19

<!--endregion #Palette-->
<dxc:ChartControl.Diagram>
    <dxc:SimpleDiagram3D>

how-to-create-a-2d-side-by-side-bar-chart-e1257/CS/Window1.xaml#L12

<dxc:ChartControl Name="chartControl1">
    <dxc:ChartControl.Diagram>
        <dxc:XYDiagram2D SeriesItemsSource="{Binding Data}">

wpf-charts-create-2d-line-chart/CS/Window1.xaml#L12

</dxc:ChartControl.DataContext>
<dxc:ChartControl.Diagram>
    <dxc:XYDiagram2D>

how-to-create-a-2d-scatter-line-chart-e3506/CS/ScatterLine2DChart/MainWindow.xaml#L8

<dxc:ChartControl Name="chartControl1">
    <dxc:ChartControl.Diagram>
        <dxc:XYDiagram2D>

how-to-display-custom-tooltips-over-the-data-point-currently-hovered-by-the-mouse-pointer-e1376/CS/Window1.xaml#L9

              MouseLeave="chartControl1_MouseLeave">
<dxc:ChartControl.Diagram>
    <dxc:XYDiagram2D>

C#

wpf-dashboard-how-to-obtain-clicked-item-data/CS/Dashboard_ClientDataCards_Wpf/MainWindow.xaml.cs#L70

XYDiagram2D diagram = new XYDiagram2D();
chart.Diagram = diagram;
SplineAreaSeries2D series1 = new SplineAreaSeries2D();

VB.NET

wpf-dashboard-how-to-obtain-clicked-item-data/VB/Dashboard_ClientDataCards_Wpf/MainWindow.xaml.vb#L60

Dim diagram As XYDiagram2D = New XYDiagram2D()
chart.Diagram = diagram
Dim series1 As SplineAreaSeries2D = New SplineAreaSeries2D()