JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-dragdata@latest/dist/chartjs-plugin-dragdata.min.js"></script>

<canvas id="myChart" width="200" height="100"></canvas>

JavaScript

var ctx = $("#myChart");

const data = [
  {
    x: 1617253200000,
    y: 10
  },
  {
    x: 1617256800000,
    y: 50
  },
  {
    x: 1617260400000,
    y: 30
  }
];

const config = {
    responsive: true,
    plugins:{
        tooltip: {
          callbacks: {
            title: function(context) {
              const timeString = new Date(context[0].parsed.x).toLocaleTimeString(navigator.language, {
    hour: '2-digit',
    minute:'2-digit'
  })
  
              return timeString
            }
          }
        },
        dragData: {        
            round: 0,
            dragX: true,
            showTooltip: true,
            onDragStart:function (e, datasetIndex, index, value) {
            },
            onDrag: function (e, datasetIndex, index, value) {
                e.target.style.cursor = 'grabbing'
                //console.log("Drag Value: ", value.x)
            },
            onDragEnd: function (e, datasetIndex, index, value) {
                e.target.style.cursor = 'default'
            },
        },
    },
    scales: {
        x:{
          type: 'linear',
          min: 1617253000000,
          max: 1617260800000,
          ticks: {
          callback(v) {
            return new Date(v).toLocaleTimeString(navigator.language, {
    hour: '2-digit',
    minute:'2-digit'
  })
          }
        }
        },
        y:{
           beginAtZero: true,
                steps: 1,
                stepValue: 1,
                max: 100
        },
    }
};

var myLineChart = new Chart(ctx, {
    type: 'line',
    data: {
      datasets: [
        {data}
      ]
    },
    options: config
});