Chart Panel

The ChartPanel is a container for the UI elements (ChartPanelObject’s) that can be positioned using data coordinates. The ChartPanel object includes two unique properties: Chart and Children. The Chart gets or sets the parent chart and the 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:

<c1chart:C1Chart x:Name="chart">

   <c1chart:C1Chart.View>

     <c1chart:ChartView>

       <c1chart:ChartView.Layers>

         <c1chart:ChartPanel >

          <!-- ChartPanelObjects -->

         </c1chart:ChartPanel>

       </c1chart:ChartView.Layers>

     </c1chart:ChartView>

   </c1chart:C1Chart.View>

</c1chart:C1Chart>

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

Using HorizontalAlignment / VerticalAlignment properties it's possible to adjust relative position to the element and the related data point property, 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:

   <c1chart:ChartPanelObject DataPoint="0,0" VerticalAlignment="Bottom">

       <TextBlock Text="Zero"/>

   </c1chart:ChartPanelObject>

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.

   <!-- horizontal line -->

   <c1chart:ChartPanelObject DataPoint="NaN,0"

HorizontalAlignment="Stretch">

     <Border BorderBrush="Red" BorderThickness="0,2,0,0"

Margin="0,-1,0,0" />

   </c1chart:ChartPanelObject>

The following sample here creates a vertical marker:

   <!-- vertical line -->

   <c1chart:ChartPanelObject DataPoint="0,NaN" VerticalAlignment="Stretch">

     <Border BorderBrush="Red" BorderThickness="2,0,0,0"

Margin="-1,0,0,0" />

   </c1chart:ChartPanelObject>