how to change Y axis value dynamically based on user input in Chartjs for Line chart?

Question

I'm trying to draw the Line chart graph using chartjs. Now I'm struggling to change y axis value based on user input. So please help me out to load the value. It would be grateful, if answer is given in very detail. I've found some answer, but it has been given only for bar chart, but I need answer for line chart.

  var data = {
                labels : ["January", "February",    "March",   "April","May","June","July","August","September","October","November","December"],
                datasets : [
                    {
                        fillColor : "rgba(151,187,205,0.5)",
                        strokeColor : "rgba(151,187,205,1)",
                        pointColor : "rgba(151,187,205,1)",
                        pointStrokeColor : "#fff",
                        data : [10,48,40,19,96,27,85,60,15, 30, 80,75],
                        title : "First data"
                    }
                ]
            }
      var ctx = document.getElementById("myChart").getContext("2d");
       var myNewChart = new Chart(ctx).Line(data,options);
    });

 var options = {
       inGraphDataShow: true,
       inGraphDataPaddingX: 3,
       inGraphDataPaddingY: 3,
        inGraphDataAlign : "left",
        inGraphDataVAlign : "bottom",
        inGraphDataRotate : 0,
        inGraphDataFontFamily: "'Arial'",
        inGraphDataFontSize: 12,
        inGraphDataFontStyle: "normal",
        inGraphDataFontColor: "#666",
        scaleOverlay: false,
        scaleOverride: false,
        scaleSteps: null,
        scaleStepWidth: 20,
        scaleStartValue: null,
        // seting x axis value.
        yAxisLabel : "Salary",
        yAxisFontFamily : "'Arial'",
        yAxisFontSize : 16,
        yAxisFontStyle : "normal",
        yAxisFontColor : "#666",
        xAxisLabel : "Month",
      xAxisFontFamily : "'Arial'",
        xAxisFontSize : 16,
        xAxisFontStyle : "normal",
        xAxisFontColor : "#666",
        // y axis value
        scaleLineColor: "rgba(0,0,0,.1)",
        scaleLineWidth: 1,
        scaleShowLabels: true,

        scaleFontFamily: "'Arial'",
        scaleFontSize: 12,
        scaleFontStyle: "normal",
        scaleFontColor: "#666",
        scaleShowGridLines: true,
        scaleXGridLinesStep : 1,
        scaleYGridLinesStep : 1,
        scaleGridLineColor: "rgba(0,0,0,.05)",
        scaleGridLineWidth: 1,
        showYAxisMin: true,      // Show the minimum value on Y axis (in original version, this minimum is not displayed - it can overlap the X labels)
        rotateLabels: "smart",   // smart <=> 0 degre if space enough; otherwise 45 degres if space enough otherwise90 degre; 
        // you can force an integer value between 0 and 180 degres
        logarithmic: false, // can be 'fuzzy',true and false ('fuzzy' => if the gap between min and maximum is big it's using a logarithmic y-Axis scale
        scaleTickSizeLeft: 5,
        scaleTickSizeRight: 5,
        scaleTickSizeBottom: 5,
        scaleTickSizeTop: 5,
        bezierCurve: true,
        pointDot: true,
        pointDotRadius: 4,
        pointDotStrokeWidth: 2,
        datasetStroke: true,
        datasetStrokeWidth: 2,
        datasetFill: true,
        animation: true,
        animationSteps: 60,
        animationEasing: "easeOutQuart",
        onAnimationComplete: null,
            }

Answer 1

Suppose we want to change the Y value of X-label 'March' from 40 to 50. First change the first dataset's value of 'March' to be 50. Now calling update function animates the position of 'March' from 40 to 50.

myNewChart.datasets[0].points[2].value = 50;   //change the value  
myNewChart.update();   //update the chart