This topic provides information how to use the xamOverviewPlusDetailPane™ control to navigate content in the XamDataChart™ control.
The following table lists the topics required as a prerequisite to understanding this topic.
In the XamDataChart control, an overview of chart content is represented by the XamOverviewPlusDetailPane control. This control provides a preview of all types of supported series as well as navigation functionalities.
The following is previews of the XamOverviewPlusDetailPane control with an overview of the XamDataChart control displaying financial data using FinancialPriceSeries.
The following code demonstrates how to display the XamOverviewPlusDetailPane control in upper right corner of the XamDataChart control.
In XAML:
<ig:XamDataChart x:Name="DataChart"
OverviewPlusDetailPaneVisibility="Visible"
OverviewPlusDetailPaneHorizontalAlignment="Right"
OverviewPlusDetailPaneVerticalAlignment="Top">
</ig:XamDataChart>In Visual Basic:
Dim DataChart As New XamDataChart()
DataChart.OverviewPlusDetailPaneHorizontalAlignment = HorizontalAlignment.Right
DataChart.OverviewPlusDetailPaneVerticalAlignment = VerticalAlignment.Top
DataChart.OverviewPlusDetailPaneVisibility = Visibility.VisibleIn C#:
var DataChart = new XamDataChart();
DataChart.OverviewPlusDetailPaneHorizontalAlignment = HorizontalAlignment.Right;
DataChart.OverviewPlusDetailPaneVerticalAlignment = VerticalAlignment.Top;
DataChart.OverviewPlusDetailPaneVisibility = Visibility.Visible;The following table summarizes the user interaction capabilities of the XamOverviewPlusDetailPane control.
The following picture illustrates how to zoom chart incrementally using the mouse zoom in/out buttons of the XamOverviewPlusDetailPane control.
The following picture illustrates how to zoom chart to a specific level using the zoom slider of the XamOverviewPlusDetailPane control.
The following picture illustrates how to chart to 100% zoom level using the zoom reset button of the XamOverviewPlusDetailPane control.
The following picture illustrates how to pan chart in all directions using the window rectangle of the XamOverviewPlusDetailPane control.
The following picture illustrates how to pan chart to a specific region of chart using the window rectangle of the XamOverviewPlusDetailPane control.
The following picture illustrates how to change a mouse drag interaction with a chart using the cursor button of the XamOverviewPlusDetailPane control.
The following topics provide additional information related to this topic.