Demo - FlexChart ItemFormatter

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>
<div class="container">

  <h1>
    FlexChart ItemFormatter
  </h1>

  <p>
    The FlexChart's <b>itemFormatter</b> property allows you
    to specify a callback invoked when chart items are rendered.
    The callback may customize the item or add new ones using the
    chart engine's properties and methods.</p>
  <p>
    In this example, the <b>itemFormatter</b> is used to
    add line segments over periods when the data is 
    increasing:</p>
  <div id="theChart"></div>
</div>

CSS

.wj-flexchart {
   height: 300px;
}
.wj-flexgrid {
  height: 150px; 
  margin-top:10px;
}

JavaScript

onload = function() {

	// create the chart
  var theChart = new wijmo.chart.FlexChart('#theChart', {
  	itemsSource: getData(),
    bindingX: 'country',
    series: [
      { binding: 'downloads', name: 'Downloads', chartType: 'Line', symbolSize: 1 }
    ],
    itemFormatter: function (engine, hitTestInfo, defaultFormat) {
    	var ht = hitTestInfo,
      		binding = 'downloads';

			// check that this is the right series/element          
			if (ht.series.binding == binding && ht.pointIndex > 0 &&
          ht.chartElement == wijmo.chart.ChartElement.SeriesSymbol) {

				// get current and previous values
				var chart = ht.series.chart,
        		items = chart.collectionView.items,
        		valNow = items[ht.pointIndex][binding],
            valPrev = items[ht.pointIndex - 1][binding];
            
				// add line if value is increasing            
				if (valNow > valPrev) {
        	var pt1 = chart.dataToPoint(ht.pointIndex, valNow),
    					pt2 = chart.dataToPoint(ht.pointIndex - 1, valPrev);
          engine.drawLine(pt1.x, pt1.y, pt2.x, pt2.y, null, {
          	stroke: 'gold',
            strokeWidth: 6,
          });
        }
			}

      // render element as usual
			defaultFormat();
		}
  });

	// create some random data
  function getData() {
	  var countries = 'US,Canada,Mexico,Germany,UK,France,Japan,Korea,China'.split(','),
	    data = [];
	  for (var i = 0; i < countries.length; i++) {
	    data.push({
	      country: countries[i],
	      sales: Math.random() * 10000,
	      expenses: Math.random() * 5000,
	      downloads: Math.round(Math.random() * 20000),
	    });
	  }
  	return data;
  }

}