Chart for WPF and Silverlight has special support for displaying bound and interactive markers and labels. There is no single approach to creating or displaying markers in a chart, so our strategy is to provide an extensible object model for the C1Chart control to help you create the exact setup you need.

This topic will cover the ChartPanelObject and the ChartView.Layers collection and how you can use these to provide a customized assortment of markers and labels for your chart.

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>

Through the ChartView.Layers collection you can add any number of ChartPanels. Each panel can have any number of ChartPanelObjects, which are basically UI elements that define our markers. The ChartPanelObject has a few key properties:

• Attach – sets whether the object is attached or “snapped” to the data points. You can attach to X, Y, both or none.
• Action – sets the interaction behavior such as on mouse move, mouse drag or none.
• DataPoint – explicitly sets the initial data point, or for creating a static marker

You can set the ChartPanelObject.Content property to any UIElement. This allows you to define the look of your marker as well as provide binding to the data point. You can also use the Alignment properties to help define the look of your marker – you may want to create a centered marker. In that case, you'd set the HorizontalAlignment property to "center".

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>