ASP.NET MVC Controls | ComponentOne
Working with Controls / Financial Charts / Work with Financial Charts / Line Markers
In This Topic
    Line Markers
    In This Topic

    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:

    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

    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 section.

    Razor
    Copy Code 
    @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")))