# Markers Labels

## Content



**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:

```xml
<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:

```xml
<c1chart:ChartPanelObject DataPoint="0,0" VerticalAlignment="Bottom">
      <TextBlock Text="Zero"/>
  </c1chart:ChartPanelObject>
```


> type=note
> **Note**: 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.

```xml
<!-- 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:

```xml
<!-- vertical line -->
<c1chart:ChartPanelObject DataPoint="0,NaN" VerticalAlignment="Stretch">
  <Border BorderBrush="Red" BorderThickness="2,0,0,0"
Margin="-1,0,0,0" />
</c1chart:ChartPanelObject>
```


> type=note
> **Note**: The chart panel objects support only the main axes. For auxiliary axes you need to perform coordinate conversion.

## See Also

[Simple Bound Markers](/componentone/docs/wpf/online-chart/overview/ChartFeatures/MarkersLabels/SimpleBoundMarkers)

[Line and Dot Marker](/componentone/docs/wpf/online-chart/overview/ChartFeatures/MarkersLabels/LineDotMarker)

[Crosshair Marker](/componentone/docs/wpf/online-chart/overview/ChartFeatures/MarkersLabels/CrosshairMarker)

[Adding Markers in Code](/componentone/docs/wpf/online-chart/overview/ChartFeatures/MarkersLabels/AddingMarkersCode)

[Updating Labels in Code](/componentone/docs/wpf/online-chart/overview/ChartFeatures/MarkersLabels/UpdatingLabelsCode)

[Mouse Interaction Chart Panel](/componentone/docs/wpf/online-chart/overview/ChartFeatures/MarkersLabels/MouseInteractionChartPanel)