wpf-115312-controls-and-libraries-charts-suite-chart-control-diagram-2d-xy-diagram.md
A 2D XY Diagram allows you to visualize data in a Cartesian chart.
You can add the following series to the 2D XY Diagram:
See the following help topic for more information: Series Type Compatibility.
The markup below shows how to create a chart with the BarSideBySideSeries2D and LineSeries2D series (the second series is in a 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>
Related API members:
| Class or Property | Description |
|---|---|
| XYDiagram2D | The 2D XY diagram. |
| XYDiagram2D.AxisX | Contains the X-axis settings. |
| XYDiagram2D.AxisY | Contains the Y-axis settings. |
| XYDiagram2D.Panes | The diagram’s pane collection. |
| BarSideBySideSeries2D | The Side-by-Side Bar series. |
| BarSeries2D.Model | Specifies a series model. |
| SeriesPoint | A series point. |
| LineSeries2D | The Line series. |
| XYDiagram2D.SeriesPane | Specifies a pane that displays a series. This property is an attached property of the XYDiagram2D class. |
| ChartControlBase.Legends | The collection of chart legends. |
| ChartControlBase.Titles | The collection of chart titles. |
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"
};
}
' Cast Diagram to the XYDiagram2D type.
Dim diagram As XYDiagram2D = TryCast(chart.Diagram, XYDiagram2D)
If diagram IsNot Nothing Then
' 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() With { _
Key .Content = "Date-Time Scale Type" _
}
End If
Refer to the following help topic to learn how to populate a chart with data: Providing Data.
The following options are available:
See the following help topic for more information: Secondary Axes.
Multiple panes that can be stacked to each other horizontally or vertically. Use the XYDiagram2D.DefaultPane property to access the default pane. To add panes to the diagram, populate the XYDiagram2D.Panes collection with Pane objects. See the following help topic for more information: Panes.
Zoom and scroll. Use the XYDiagram2D.EnableAxisXNavigation and XYDiagram2D.EnableAxisYNavigation properties to allow users to zoom and scroll a chart. The following help topic describes zoom and scroll operations in greater detail: Zoom and Scroll in 2D XY-Charts.
Swap axes. Use the XYDiagram2D.Rotated property to rotate the diagram. When the Rotated property is set to true , the X-axis is displayed vertically, and the Y-axis is displayed horizontally.
The following appearance customization properties are available:
Use the XYDiagram2D.DefaultPane property to specify appearance settings for the default diagram pane.
The following example hides the diagram border, specifies paddings and margins, changes the font style, and makes the diagram transparent:
<dxc:ChartControl Background="{x:Null}">
<dxc:XYDiagram2D BorderThickness="0" Padding="10" Margin="10" FontStyle="Italic" >
<dxc:XYDiagram2D.DefaultPane>
<dxc:Pane DomainBrush="Transparent" />
</dxc:XYDiagram2D.DefaultPane>
<!--...-->
</dxc:XYDiagram2D>
</dxc:ChartControl>
See Also