# Line Markers

FinancialChart control supports line markers. Learn more about the line markers supported by the FinancialChart control in MVC documentation.

## Content



Markers are the symbols used to display data points when the mouse is hovered over the data series. In FinancialChart, you can add line markers using **AddLineMarker** method. **LineMarkerLines** property allows you to set line markers to:

*   **Vertical**: Shows vertical line markers.
*   **Horizontal**: Shows horizontal line markers.
*   **Both**: Sets vertical as well as horizontal line markers.
*   **None**: Shows no line.

The image below shows how FinancialChart appears when the LineMarkerLines property is set to **Both (for a cross-hair effect)** to display the value of data points on the FinancialChart.

![Line markers and marker content added to financial chart](https://cdn.mescius.io/document-site-files/images/2b3ac322-100e-4637-958d-fb40dcda3f44/images/financialchartlinemarkers.png)

The following code example demonstrates how to add line markers and marker content to the FinancialChart. This example uses the sample created in the [Quick Start](/componentone/docs/mvc/online-mvc/workwithcontrols/FlexChart/QuickStart) section.

```razor
@using MVCFinancialChart.Models
@model List<FinanceData>
<script type="text/javascript">
    function lineMarkerContent(ht, pt) {
        var item = ht.series.collectionView.items[ht.pointIndex];
        if (item) {
            return 'Date: ' + wijmo.Globalize.format(ht.x, 'MMM-dd') + '<br/>' +
                                'High: ' + item.High.toFixed() + '<br/>' +
                                'Low: ' + item.Low.toFixed() + '<br/>' +
                                'Open: ' + item.Open.toFixed() + '<br/>' +
                                'Close: ' + item.Close.toFixed() + '<br/>' +
                                'Volume: ' + item.Volume.toFixed();
        }
    }
</script>
@*Initialize FinancialChart control.*@
@(Html.C1().FinancialChart()
.Bind(Model)
.BindingX("X")
//Set chart type.
.ChartType(C1.Web.Mvc.Chart.Finance.ChartType.CandleVolume)
.Series(sers =>
    {
        sers.Add().Binding("High,Low,Open,Close,Volume");
    })
.Tooltip(tp => tp.Content(""))
//Add a line marker to FinancialChart.
.AddLineMarker(lm => lm
        .Alignment(C1.Web.Mvc.Chart.LineMarkerAlignment.Auto)
        .Lines(C1.Web.Mvc.Chart.LineMarkerLines.Both)
        .DragContent(true)
        .Interaction(C1.Web.Mvc.Chart.LineMarkerInteraction.Move).Content("lineMarkerContent")))
```