JSFiddle - React, Tailwind, and code Playground

HTML

<div id="chart" data-role="chart" class="k-chart" style="position: relative;">
    <!--?xml version='1.0' ?-->
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="663px" height="400px" style="position: relative; display: block;">
        <defs id="k10036">
            <clipPath id="k10037">
                <path id="k10038" style="display: block;" d="M0 0 663 0 663 400 0 400 z" stroke-linecap="square" stroke-linejoin="round" fill-opacity="1" stroke-opacity="1" fill="none"></path>
            </clipPath>
        </defs>
        <path style="display: block; " d="M0 0 663 0 663 400 0 400 z" stroke="" stroke-width="0" stroke-linecap="square" stroke-linejoin="round" fill-opacity="1" stroke-opacity="1" fill="#fff"></path>
        <path style="display: block; " d="M35.5 13.5 657.5 13.5 657.5 386.5 35.5 386.5 z" stroke-width="0.1" stroke-linecap="square" stroke-linejoin="round" fill-opacity="1" stroke-opacity="1" fill="none"></path>
        <path id="k10000" style="display: block; " data-model-id="k10001" d="M35 12.5 657 12.5 657 386 35 386 z" stroke="" stroke-linecap="square" stroke-linejoin="round" fill-opacity="0" stroke-opacity="1" fill="#fff"></path>
        <g id="k10002">
            <path style="display: block; " data-model-id="k10001" d="M35.5 345.5 657.5 345.5" stroke="#dfdfdf" stroke-width="1" stroke-linecap="square" stroke-linejoin="round" fill-opacity="1" stroke-opacity="1" fill="none"></path>
            <path style="display: block; " data-model-id="k10001" d="M35.5 303.5 657.5 303.5" stroke="#dfdfdf" stroke-width="1" stroke-linecap="square" stroke-linejoin="round" fill-opacity="1" stroke-opacity="1" fill="none"></path>
            <path style="display: block; " data-model-id="k10001" d="M35.5 262.5 657.5 262.5" stroke="#dfdfdf" stroke-width="1" stroke-linecap="square" stroke-linejoin="round" fill-opacity="1" stroke-opacity="1" fill="none"></path>
            <path style="display: block; " data-model-id="k10001" d="M35.5 220.5 657.5 220.5"...

JavaScript

$('circle')
.draggable({ 
            axis: "y",
            containment: $('svg') 
           }
          )
  .bind('mousedown', function(event, ui){
    // bring target to front
    $(event.target.parentElement).append( event.target );
  })
  .bind('drag', function(event, ui){
    // update coordinates manually, since top/left style props don't work on SVG          
    var path = $('#k10014').attr('d');
    // Remove M 
    path = path.substr(1);
    p_array = path.split(" ");
    p_array[7] = ui.position.left;
    path = "M"+ p_array.join(" ")
    $('#k10014').attr('d', path);

    event.target.setAttribute('cy', ui.position.left + 1000);
    // $chart.options.series[?].data[?] = new position.
  });