2D XY Diagram

  • 4 minutes to read

A 2D XY Diagram allows you to visualize data in a Cartesian chart.


The document consists of the following sections:

Compatible Series Types

You can only add the following compatible series to the 2D XY Diagram:

Refer to the Series Types Compatibility document for more information.

How to: Create a Chart with the 2D XY Diagram

The notation below shows how to create a chart with BarSideBySideSeries2D and LineSeries2D series (the second series is in the separate pane).

    <!-- The XY diagram's settings. -->
        <!-- The x-axis settings. -->
            <dxc:AxisX2D GridLinesVisible="True"/>
        <!-- The y-axis settings. -->
            <dxc:AxisY2D GridLinesMinorVisible="True"/>
            <dxc:Pane x:Name="pane"/>
        <!-- The Side-by-Side Bar series settings. -->
        <dxc:BarSideBySideSeries2D DisplayName="Series 1">
            <dxc:SeriesPoint Argument="A" Value="5"/>
            <dxc:SeriesPoint Argument="B" Value="2"/>
            <dxc:SeriesPoint Argument="C" Value="4"/>
        <!-- The Line series settings. -->
        <dxc:LineSeries2D DisplayName="Series 2" 
                          dxc:XYDiagram2D.SeriesPane="{Binding ElementName=pane}">
            <dxc:SeriesPoint Argument="A" Value="7"/>
            <dxc:SeriesPoint Argument="B" Value="3"/>
            <dxc:SeriesPoint Argument="C" Value="2"/>
        <dxc:Title Content="Cartesian Chart" 

The following table lists the classes and properties that are used in the markup above:

Class or Property Description
ChartControl The Chart control.
XYDiagram2D The 2D XY diagram.
XYDiagram2D.AxisX Stores the x-axis's settings.
AxisX2D A 2D XY Diagram's x-axis.
AxisBase.GridLinesVisible Specifies the x-axis's major grid line visibility.
XYDiagram2D.AxisY Stores the y-axis's settings.
AxisY2D A 2D XY diagram's y-axis.
AxisBase.GridLinesMinorVisible Specifies the minor y-axis's grid line visibility.
XYDiagram2D.Panes The chart panes' collection.
Pane A pane.
BarSideBySideSeries2D The Side-by-Side Bar series.
Series.DisplayName The series's display name.
BarSeries2D.Model Specifies a series model.
BorderlessSimpleBar2DModel Represents bars without a border.
SeriesPoint A series point.
SeriesPoint.Argument The series point's argument.
SeriesPoint.Value The series point value.
LineSeries2D The Line series.
XYDiagram2D.SeriesPane Specifies a pane displaying a series. This property is attached property of the XYDiagram2D class.
ChartControlBase.Legends The chart legends' collection.
Legend A legend.
ChartControlBase.Titles The chart titles' collection.
Title A title.
TitleBase.Content Specifies title content.
TitleBase.HorizontalAlignment Specifies the title's horizontal alignment.

Use the following code to access the 2D XY diagram's options at runtime:

// Cast Diagram to the XYDiagram2D type. 
XYDiagram2D diagram = chart.Diagram as XYDiagram2D;
if (diagram != null) {
    // Access diagram properties, for example, rotate the diagram. 
    diagram.Rotated = true;
    // Access properties of objects that belong to the diagram,  
    // for example, axes. 
    diagram.AxisX.Title = new AxisTitle {
        Content = "Date-Time Scale Type"

The Diagram's Specific Options

The Chart Control provides the following XY Diagram features:

See Also