2D XY Diagram

  • 4 minutes to read

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

WPF_2DXYDiagram_overview

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

<dxc:ChartControl>
    <!-- The XY diagram's settings. -->
    <dxc:XYDiagram2D>
        <!-- The x-axis settings. -->
        <dxc:XYDiagram2D.AxisX>
            <dxc:AxisX2D GridLinesVisible="True"/>
        </dxc:XYDiagram2D.AxisX>
        <!-- The y-axis settings. -->
        <dxc:XYDiagram2D.AxisY>
            <dxc:AxisY2D GridLinesMinorVisible="True"/>
        </dxc:XYDiagram2D.AxisY>
        <dxc:XYDiagram2D.Panes>
            <dxc:Pane x:Name="pane"/>
        </dxc:XYDiagram2D.Panes>
        <!-- The Side-by-Side Bar series settings. -->
        <dxc:BarSideBySideSeries2D DisplayName="Series 1">
            <dxc:BarSideBySideSeries2D.Model>
                <dxc:BorderlessSimpleBar2DModel/>
            </dxc:BarSideBySideSeries2D.Model>
            <dxc:SeriesPoint Argument="A" Value="5"/>
            <dxc:SeriesPoint Argument="B" Value="2"/>
            <dxc:SeriesPoint Argument="C" Value="4"/>
        </dxc:BarSideBySideSeries2D>
        <!-- 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:LineSeries2D>
    </dxc:XYDiagram2D>
    <dxc:ChartControl.Legends>
        <dxc:Legend/>
    </dxc:ChartControl.Legends>
    <dxc:ChartControl.Titles>
        <dxc:Title Content="Cartesian Chart" 
                   HorizontalAlignment="Center"/>
    </dxc:ChartControl.Titles>
</dxc:ChartControl>

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