JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/FVANCOP/ChartNew.js/master/ChartNew.js"></script>
<canvas id="canvas_1" height="200" width="450"></canvas>

JavaScript

function fnMouseDownLeft(event,ctx,config,data,other){
  	if(other != null){
      
      alert(other.v12);
      
    	window.alert("["+  data.labels[other.v12]+",  "+data.datasets[other.v11].data[other.v12]  +"]");
      
      
      
      //Below line SHOULD show the clicked value, and v12 (above) should show the position in the series of the clicked data point BUT above one shows clicked value and below one is "undefined". Why?
      window.alert("Position: " + data.datasets[other.v11].data[other.v3] );
	  }else{
	    window.alert("You click Left but not on a data");
	  }
}


var mydata1 = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        }
    ]
};
var setopts = {
    animation : false,
    mouseDownLeft : fnMouseDownLeft,
}

var myLine1 = new Chart(document.getElementById("canvas_1").getContext("2d")).Line(mydata1,setopts);