Demo - Annotations

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.chart.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.chart.annotation.min.js"></script>
<div class="container">

  <h1>
    Annotations
  </h1>

  <p>
    Annotations are extra elements displayed over the chart to
    highlight notable points or areas on the chart.</p>
  <p>
    To add annotations to a FlexChart, create an <b>annotationLayer</b> 
    attached to the chart and populate it with annotation objects.</p>
  <p>
    There are several types of annotation objects, including
    Rectangle, Square, Circle, Ellipse, Line, Polygon, Image, and
    Text. They may be attached to data points or to arbitrary
    points in data or page coordinates.</p>
  <p>
    The chart below has an Ellipse annotation attached to data 
    point 15 and a Line annotation attached to the month of 
    February:</p>    
    
  <div id="theChart"></div>
</div>

CSS

.wj-flexchart {
  height: 300px;
}
.wj-control {
  margin-bottom: 6px;
}

body {
  margin-bottom: 24pt;
}

JavaScript

onload = function() {

  // create the chart
  var theChart = new wijmo.chart.FlexChart('#theChart', {
    itemsSource: getData(),
    bindingX: 'date',
    chartType: 'Candlestick',
    legend: { position: 'None' },
    series: [
    	{ binding: 'low,high,open,close', name: 'Alphabet Inc' }
		]
  });

	// add annotation layer
  var annotations = new wijmo.chart.annotation.AnnotationLayer(theChart, [
  	{ // attach an Ellipse to data point 15
    	type: 'Ellipse',
    	content: 'Ellipse',
    	tooltip: 'This is an <b>Ellipse</b><br/>annotation', 
    	attachment: 'DataIndex',
    	seriesIndex: 0,
    	pointIndex: 15,
      width: 100, height: 40,
      position: 'Top', // Center/Top/Bottom/Left/Right
    	style: { fill: 'green', stroke: 'darkgreen', strokeWidth: 2, opacity: .25 }
		},
    { // show a trendline between Jan 31 and Feb 27
    	type: 'Line',
    	tooltip: 'This is a <b>Line</b><br/>annotation', 
      position: 'Center',
      content: 'content',
      attachment: 'DataCoordinate',
			start: { x: new Date(2017, 0, 31), y: 810 },
    	end: { x: new Date(2017, 1, 28), y: 840 },
    	style: { stroke: 'darkgreen', strokeWidth: 4, opacity: .5 }
    },
    { // show a trendline between Jan 31 and Feb 27
    	type: 'Polygon',
    	tooltip: 'This is a <b>Line</b><br/>annotation', 
      position: 'Center',
      content: 'not showing content',
      attachment: 'DataCoordinate',
      points: [{ x: new Date(2017, 0, 5), y: 850 }, { x: new Date(2017, 1, 2), y: 850 }, { x: new Date(2017, 1, 2), y: 810 }, { x: new Date(2017, 0, 5), y: 810 }],
    	style: { stroke: 'darkgreen', strokeWidth: 4, opacity: .5 }
    }
  ]);

  // some stock data from Google Finance
  function getData() {
    return [
			{ date: new Date(2017,2,15), open: 867.94, high: 869.88, low: 861.3, close: 868.39, vol: 1332885},
			{ date: new Date(2017,2,14), open: 863.75, high: 867.58, low: 860.13, close: 865.91, vol: 1061692},
			{ date: new Date(2017,2,13), open: 860.83, high: 867.13, low:...