JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://kendo.cdn.telerik.com/2018.2.516/js/kendo.all.min.js"></script>
<div id="chart"></div>

CSS

body* {
    padding:0;
    margin:0
}
circle {
    cursor: ns-resize;
}

JavaScript

$("#chart").kendoChart({
seriesDefaults: {
                    type: "line",
                    style: "smooth"
                },
    series: [{
        data: [150, 350, 250, 100, 250,150, 350, 250, 100, 250]
    }]
});

// Events don't bind -- as a workaround destory the chart and get the SVG
var chart = $("#chart").data("kendoChart");
var svg = chart.svg();
chart.destroy();
$("#chart").html(svg);

// This only works for one path ... but if you know the number of points
// then you can expand this easily ... 
function movePathForPointId(element, pos) {
   // Update pos to account for the circle radius 
   pos = pos + 2;
    
   // The graph is in two nested <g> elements, we can use this ... 
   
   // First find the position of the circle,     
   var pointIndex = $('svg g g circle').index(element); 
   
   // Get the first path in the graph 
   var pathElement = $('svg g g path').first();
    
   var path = pathElement.attr('d');     // Get Path String
   path = path.substr(1);                // Remove M 
   p_array = path.split(" ");            // Split into array
   p_array[(pointIndex * 2) + 1] = pos;  // Change one value (but which one?)
   path = "M"+ p_array.join(" ")         // Combine back with M
   pathElement.attr('d', path);          // Write new path back to SVG
   element.setAttribute('cy', pos);      // Update circle position
   console.log(pointIndex);
   return pointIndex;                    // Might be useful to update the data table
   
}

$('circle')
    .draggable({ 
        axis: "y",
        containment: $('svg') 
     })

    .bind('drag', function(event, ui){
        movePathForPointId(event.target, ui.position.top + 2);
        // Update your data here ... 
    });