Add Input Fields on Clicking on Chart - CanvasJS JavaScript Charts

Add Input Fields on Clicking on Chart - CanvasJS JavaScript Charts

by canvasjs

HTML

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

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  theme: "theme2",//theme1      	
  title: {
  	text: "Add Input Field on Chart"
  },
  subtitles: [{
    	text: "Click Anywhere on Chart to add Input Field"
  }],
  data: [              
    {			
      type: "column",
      dataPoints: [
        { label: "apple",  y: 18  },
        { label: "orange", y: 15  },
        { label: "banana", y: 25  },
        { label: "mango",  y: 30  },
        { label: "grape",  y: 28  }
      ]
    }
  ]
});

chart.render();

$("#chartContainer").click(function(e){
	var inputField = document.createElement("input");
  $(inputField).css({"position": "absolute", "left": e.clientX + "px", top: e.clientY + "px", width: "70px"});  
  $(inputField).attr("placeholder", "Type Here");
  $(inputField).insertAfter("#chartContainer")
	$(inputField).focus();
});