Dynamic StripLine On Mouse Over - CanvasJS JavaScript Charts

Dynamic StripLine On Mouse Over - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
	{
     
    	toolTip:{
        contentFormatter: function (e) {
          e.chart.currentXPostion =  e.entries[0].dataPoint.x;
          e.chart.currentYPostion =  e.entries[0].dataPoint.y;
          return null;
        }
     },
     axisX: {  
	      valueFormatString: "MMM/DD",
        stripLines:[
					{                
						color:"#FF0000",
            showOnTop: true
					}
        ]
      },
      axisY: {
        includeZero: false,
        stripLines:[
					{                
						color:"#FF0000",
            showOnTop: true
					}
        ]
      },
      data: [
    	{        
        type: "splineArea",
        dataPoints: [
        { x: new Date(2012, 01, 1), y: 107.60},
        { x: new Date(2012, 02, 3), y: 112.39},
        { x: new Date(2012, 03, 5), y: 116.50},
        { x: new Date(2012, 04, 7), y: 110.11},
        { x: new Date(2012, 05, 11), y: 121.21},
        { x: new Date(2012, 06, 13), y: 119.56},
        { x: new Date(2012, 07, 20), y: 118.74},
        { x: new Date(2012, 08, 21), y: 109.12},
        { x: new Date(2012, 09, 25), y: 115.77},
        { x: new Date(2012, 10, 27), y: 117.98}

        ]
      }
      ]
    });

 chart.render();

//---------------------- Handling the stripLines ------------------------
  function stripLineHandler(xPosition, yPosition) {
  	chart.options.axisX.stripLines[0].value = xPosition;
    chart.options.axisX.stripLines[0].label = yPosition;
    chart.options.axisY.stripLines[0].value = yPosition;
    chart.render();
  }
 	
  var prevXData = null, currentXData, currentYData;
 
  document.getElementById("chartContainer").onmousemove = function (){
    if(chart.currentXPostion) {	
      currentXData =  chart.currentXPostion ;
      currentYData =  chart.currentYPostion ;
      if(prevXData !== currentXData){
        stripLineHandler(currentXData, currentYData);
        prevXData = currentXData;
      }
    }
	}