Chart Panel Objects

ChartPanel

A container for the UI elements (ChartPanelObjects) that can be positioned using data coordinates. The ChartPanel object includes two unique properties: ChartPanel.Chart and ChartPanel.Children. The ChartPanel.Chart gets or sets the parent chart and the ChartPanel.Children property gets the collection of child elements.

To use chart panel with chart it’s necessary to add the panel to the Layers collection of ChartView:

XAML Markup	Copy Code
<Chart:C1Chart x:Name="chart"> <Chart:C1Chart.View> <Chart:ChartView> <Chart:ChartView.Layers> <Chart:ChartPanel > <!-- ChartPanelObjects --> </Chart:ChartPanel> </Chart:ChartView.Layers> </Chart:ChartView> </Chart:C1Chart.View> </Chart:C1Chart>

XAML Markup

Copy Code

<Chart:C1Chart x:Name="chart">
   <Chart:C1Chart.View>
     <Chart:ChartView>
       <Chart:ChartView.Layers>
         <Chart:ChartPanel >

          <!-- ChartPanelObjects -->
    
         </Chart:ChartPanel>
       </Chart:ChartView.Layers>
     </Chart:ChartView>
   </Chart:C1Chart.View>
</Chart:C1Chart>

ChartPanelObject

The ChartPanelObject class defines the element of the chart panel. The ChartPanelObject includes three unique properties: ChartPanelObject.Action, ChartPanelObject.Attach, and ChartPanelObject.DataPoint properties.

Using HorizontalAlignment / VerticalAlignment properties it's possible to adjust relative position to the element and the related data point property, ChartPanelObject.DataPoint. The Content property of the ChartPanelObject can be set to any UIElement.

The following XAML defines text label with its left-bottom corner at x=0, y=0 in data coordinates:
XAML Markup
Copy Code
<Chart:ChartPanelObject DataPoint="0,0" VerticalAlignment="Bottom">
       <TextBlock Text="Zero"/>
   </Chart:ChartPanelObject>

XAML Markup	Copy Code
<Chart:ChartPanelObject DataPoint="0,0" VerticalAlignment="Bottom"> <TextBlock Text="Zero"/> </Chart:ChartPanelObject>

It is not necessary to specify both coordinates. If the coordinate is set to double.NaN then the element does not have specific x- or y- coordinates.

We can create horizontal marker at y=0. Note that the HorizontalAlignment property is set to Stretch and the element fills the width of the plot area.

XAML Markup	Copy Code
<!-- horizontal line --> <Chart:ChartPanelObject DataPoint="NaN,0" HorizontalAlignment="Stretch"> <Border BorderBrush="Red" BorderThickness="0,2,0,0" Margin="0,-1,0,0" /> </Chart:ChartPanelObject> The following sample here creates a vertical marker: <!-- vertical line --> <Chart:ChartPanelObject DataPoint="0,NaN" VerticalAlignment="Stretch"> <Border BorderBrush="Red" BorderThickness="2,0,0,0" Margin="-1,0,0,0" /> </Chart:ChartPanelObject>

XAML Markup

Copy Code

 <!-- horizontal line -->
   <Chart:ChartPanelObject DataPoint="NaN,0"
HorizontalAlignment="Stretch">
     <Border BorderBrush="Red" BorderThickness="0,2,0,0"
Margin="0,-1,0,0" />
   </Chart:ChartPanelObject>
The following sample here creates a vertical marker:
   <!-- vertical line -->
   <Chart:ChartPanelObject DataPoint="0,NaN" VerticalAlignment="Stretch">
     <Border BorderBrush="Red" BorderThickness="2,0,0,0"
Margin="-1,0,0,0" />
   </Chart:ChartPanelObject>

The chart panel objects support only the main axes. For auxiliary axes you need to perform coordinate conversion.