# Markers

FlexChart supports markers to display data points. Learn more about adding the marker in MVC lexChart control in MVC documentation.

## Content



Markers are the symbols used to display data points when the mouse is hovered over the data series. In FlexChart, you can add line markers using [AddLineMarker](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.Fluent.LineMarkerExtension.AddLineMarker.html) method. [LineMarkerLines](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.Chart.LineMarkerLines.html) 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 vertical line marker with marker content to display the value of data points on the FlexChart.

![Markers added to FlexChart](https://cdn.mescius.io/document-site-files/images/2b3ac322-100e-4637-958d-fb40dcda3f44/images/flexchartmarker.png)

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

```razor
@using MVCFlexChart.Models;
@using C1.Web.Mvc.Chart;
@model IEnumerable<FruitSale>
@*Add content to display with marker*@
<script type="text/javascript">
    function lineMarkerContent(hitInfo, pt) {
        var html = '', chart = hitInfo.series ? hitInfo.series.chart : undefined;
        if (!chart || !chart.series) {
            return html;
        }
        chart.series.forEach(function (s, i) {
            var ht = s.hitTest(new wijmo.Point(pt.x, NaN)), hostEle = s.hostElement, polyline;
            polyline = s.hostElement ? s.hostElement.getElementsByTagName("polyline")[0] : undefined;
            if (polyline && ht.x && ht.y !== null) {
                if (i == 0) {
                    html += wijmo.Globalize.formatDate(ht.x, 'dd-MMM');
                }
                html += '<div style="color:' + polyline.getAttribute('stroke') + '">' + ht.name + ' = ' + ht.y.toFixed(2) + '</div>';
            }
        });
        return html;
    }
</script>
@*Add marker*@
<div style="width: 780px">
    @(Html.C1().FlexChart().Bind("Date", Model).ChartType(ChartType.Line).Series(sers =>
{
    sers.Add().Binding("SalesInUSA").Name("Sales in USA");
    sers.Add().Binding("SalesInJapan").Name("Sales in Japan");
})
    .AxisX(x => x.Format("dd-MMM")).Tooltip(tp => tp.Content(""))
    .AddLineMarker(lm => lm
    .Alignment(LineMarkerAlignment.Auto)
    .Lines(LineMarkerLines.Vertical)
    .Interaction(LineMarkerInteraction.Move).Content("lineMarkerContent")))
</div>
```