Line Markers

The LineMarker class allows you to add a mouse-driven cursor to your charts. The cursor consists of a text element used to display information about the point under the mouse and optional lines to indicate the exact position of the mouse.

You can customize the appearance of the LineMarker using CSS, and its behavior using properties including content, interaction, and lines:

Lines:
Interaction:

// This file locates: "Scripts/Lesson/C1FlexChart/LineMarkers.js".
c1.documentReady(function () {
    var theChart = wijmo.Control.getControl('#theChart');
    var lines = wijmo.Control.getControl('#lines');
    var interaction = wijmo.Control.getControl('#interaction');
 
    theChart.itemsSource = getData();
 
    // add a LineMarker
    var lm = new wijmo.chart.LineMarker(theChart, {
        isVisible: false,
        lines: 'Both',
        interaction: 'Move',
        content: function (ht) {
            return ht.item
            ? wijmo.format('The value on <b>{date:MMM d, yyyy}</b><br/>is <b>{value:c}</b>', ht.item)
            : 'No items here...';
        }
    });
 
    // show the marker when the mouse is over the chart
    theChart.addEventListener(theChart.hostElement, 'mouseenter', function () {
        lm.isVisible = true;
    });
    theChart.addEventListener(theChart.hostElement, 'mouseleave', function () {
        lm.isVisible = false;
    });
 
    // configure the LineMarker
    lines.textChanged.addHandler(function (s, e) {
        lm.lines = s.text;
    });
    interaction.textChanged.addHandler(function (s, e) {
        lm.interaction = s.text;
    });
 
    // create some random data
    function getData() {
        var arr = [],
                value = 100,
                    date = new Date();
        for (var i = 0; i < 100; i++) {
            arr.push({
                date: date,
                value: value + Math.random() * 10 - 4
            });
            date = wijmo.DateTime.addDays(date, -1);
        }
        return arr;
    }
});

// This file locates: "Content/css/Lesson/C1FlexChart/LineMarkers.css".
.wj-flexchart .wj-chart-linemarker {
  background: transparent;
}
.wj-chart-linemarker-content {
  padding: 12px;
  margin: 6px;
  background: white;
  border-radius: 3px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.wj-flexchart .wj-chart-linemarker .wj-chart-linemarker-hline,
.wj-flexchart .wj-chart-linemarker .wj-chart-linemarker-vline {
  height: 1px;
  width: 1px;
  opacity: .5;
  background: navy;
}

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1FlexChartController : Controller
    {
        // GET: LineMarkers
        public ActionResult LineMarkers()
        {
            return View();
        }
    }
}

@{
    var lineses = new[] { "None", "Vertical", "Horizontal", "Both" };
    var interactions = new[] { "None", "Move", "Drag" };
}
 
<h1>
    @Html.Raw(Resources.C1FlexChart.LineMarkers_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexChart.LineMarkers_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.LineMarkers_Text2)
</p>
 
<div class="demo-settings">
    <label for="lines">@Html.Raw(Resources.C1FlexChart.LineMarkers_Text3) </label>
    @Html.C1().ComboBox().Id("lines").Bind(lineses).Text("Both")
    <br>
    <label for="interaction">@Html.Raw(Resources.C1FlexChart.LineMarkers_Text4) </label>
    @Html.C1().ComboBox().Id("interaction").Bind(interactions).Text("Move")
</div>
 
@(Html.C1().FlexChart().Id("theChart")
    .AxisX(x => x.MajorGrid(false))
    .Legend(C1.Web.Mvc.Chart.Position.None)
    .Tooltip(t => t.Content(""))
    .ChartType(C1.Web.Mvc.Chart.ChartType.Line)
    .BindingX("date")
    .Series(sb => sb.Add().Binding("value").Name("Value"))
)