Dynamically Update DataPoint Value from Added Input Field - CanvasJS JavaScript Charts

Dynamically Update DataPoint Value from Added Input Field - 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: "Update Datapoint value from Input Field"
  },
  subtitles: [{
    	text: "Click on Any Datapoint to add Input Field"
  }],
  data: [              
    {			
      type: "column",
      click: clickHandler,
      dataPoints: [
        { label: "apple",  y: 18  },
        { label: "orange", y: 15  },
        { label: "banana", y: 25  },
        { label: "mango",  y: 30  },
        { label: "grape",  y: 28  }
      ]
    }
  ]
});

chart.render();

function clickHandler(e){
	var chart = e.chart;
  var dataPoint = e.dataPoint;
	var inputField = document.createElement("input");
  $(inputField).css({"position": "absolute", "left": chart.axisX[0].convertValueToPixel(e.dataPoint.x) + "px", top: chart.axisY[0].convertValueToPixel(e.dataPoint.y)+ "px", width: "70px"});  
  $(inputField).attr("placeholder", "Type Here");
  $(inputField).insertAfter("#chartContainer");
	$(inputField).change(function(){
  	dataPoint.y = Number($(inputField).val());
    chart.render();
    this.remove();
  });
}