APEX 20.1 Draggable Entries in Chart

I want to resize the bars in my chart when extending the date, so the user has the chance to do this directly in the chart by dragging it to the right. I need to create an combinaton of charts with the bar ranges and two line charts. Is it possible to drag and drop the fix lines to the top and bottom where the value stays the same for the whole x-axis. Or is there a possibility to make the changes manually by any update queries (User needs to make the changes then). Furthermore, I need to option the change the names of the axis. Thanks.

Wished outcome should look somehting like that:

Thanks for the answer. Unfortunately I can't import your sample application due to compatibilty problems (using newer APEX versio on my side). Could you please provide some sample code on how to implement the javascipt drag-and-drop functionality on the page. Thanks.

Is it possible to select dates for the low and max in the bar range chart or in any other chart besides gantt since I can' put there my target lines.

I need to display the start and end dates of the single projects similar to a gantt chart. Unfortunately I can't add the target lines in a gannt chart. Any idea how implement the timeline between start and end dates like a line, bar or range with the x-axis being the dates or any other time attribute. The Scatter chart with date axis reference didn't helped me a lot.

Thank you very much Oleh. Thats brilliant. Exactly what I was looking for. Do you also know what I need to change in the code to make the bar range chart draggable. Currently it doesn't work.

My code:

// Add Reference Object as straight target line

function( options ){

  $.extend(

    options.xAxis,

    {

      referenceObjects:[

        { id: 'Reference Object 1', text: 'Reference Object 1', type: 'line', value: "00", color : 'red', displayInLegend: 'on', lineWidth: 3, location: 'back', shortDesc: "" },

        { id: 'Reference Object 2', text: 'Reference Object 2', type: 'line', value: "01", color : 'red', displayInLegend: 'on', lineWidth: 3, location: 'back', shortDesc: "" }

      ]

    }

  );

// Enable drag and drop functionality   

  options.dnd = options.dnd || {};

   var onPlotAreaDrop1 = function (event, ui) {

    onPlotAreaDrop(event, ui, "#chrt_jet");

  };

  $.extend(

    options.dnd,

    {

      drag : { items : { dataTypes : ["text/barrangeechart"] }},

      drop : {

        plotArea : {

          dataTypes : ["text/barrangechart"],

          drop   : onPlotAreaDrop1

        }

      }

    }

  );

  options.dataFilter = function( data ) {

    for (var i = 0; i < data.series.length; i++ ) {

      for (var j = 0; j < data.series[i].items.length; j++ ) {

        data.series[ i ].items[j].markerSize = Math.round(Math.random() * (55 - 15)) + 15;

      }

    }

    return data;

  };

// Convert date to number

  this.baseDate = new Date(2020,10,1);

  this.toDates = { 

    format: function(value) {

      var theDate = new Date(baseDate);

      theDate.setDate(theDate.getDate() + value);

      return theDate.toLocaleDateString();

    }

  }

  return options;

}