Demo - Line Markers

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.chart.min.js"></script>
<div class="container">

  <h1>
    Line Markers</h1>
  <p>
    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.</p>
  <p>
    You can customize the appearance of the LineMarker using CSS,
    and its behavior using properties including <b>content</b>,
    <b>interaction</b>, and <b>lines</b>:</p>    
  
  <label for="lines">Lines: </label>
  <div id="lines"></div><br>
  <label for="interaction">Interaction: </label>
  <div id="interaction"></div>

  <div id="theChart"></div>
  
</div>

CSS

.wj-flexchart {
  height: 300px;
  margin: 10px 0;
}
.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: .7;
  background: seagreen;
}

.wj-control {
  margin-bottom: 3px;
}
label {
  width: 120px;
  text-align: right;
}
body {
  margin-bottom: 24pt;
}

JavaScript

onload = function() {

	// create the chart
  var theChart = new wijmo.chart.FlexChart('#theChart', {
		chartType: 'Line',
    bindingX: 'date',
    axisY: { majorGrid: false },
    legend: { position: 'None' },
    tooltip: { content: '' },
    series: [
    	{ binding: 'value', name: 'Value' }
		],
    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
  var lines = new wijmo.input.ComboBox('#lines', {
  	itemsSource: 'None,Vertical,Horizontal,Both'.split(','),
    textChanged: function(s, e) {
    	lm.lines = s.text;
    },
    text: 'Both'
  });
  var interaction = new wijmo.input.ComboBox('#interaction', {
  	itemsSource: 'None,Move,Drag'.split(','),
    textChanged: function(s, e) {
    	lm.interaction = s.text;
    },
    text: 'Move'
  });

  // 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;
	}
}