Search code examples
javascriptchartsamchartsamcharts4

Is there any option to make the chart (amcharts4) below draggable from both sides (left and right)?


I'm making a chart for weekdays starting/ending hours, and I want to make it draggable. I found a solution to how drag the right side (endTime) but there's no option for the leftside (startTime). Or if there's any other alternative for this chart you recommend.

I've tried to add another bullet in the left side but it appear that this is not a built-in option in amcharts.

enter image description here

// That's how I'm handling the drag event
 bullet.events.on("drag", event => {
      handleDrag(event);
 });
 bullet.events.on("dragstop", event => {
      handleDrag(event);
      var dataItem = event.target.dataItem;
      dataItem.column.isHover = false;
      event.target.isHover = false;
 });

 function handleDrag(event) {
      var dataItem = event.target.dataItem;
      var value = valueAxis.xToValue(event.target.pixelX);
      dataItem.valueX = value;
      dataItem.column.isHover = true;
      dataItem.column.hideTooltip();
      event.target.isHover = true;
 }

Solution

  • Just found I solution for that. I added another Bullet and changed the value where the bullet get data (I followed the object in the console).

    enter image description here

    bullet2.events.on("drag", event => {
      handleDrag(event, "start");
    });
    bullet2.events.on("dragstop", event => {
      handleDrag(event, "start");
      var dataItem = event.target.dataItem;
      dataItem.column.isHover = false;
      event.target.isHover = false;
      this.openHours.find(x => x.day === dataItem.dataContext.day).startTime = dataItem.openValueX;
    });
    
    
    function handleDrag(event, position) {
      var dataItem = event.target.dataItem;
      var value = valueAxis.xToValue(event.target.pixelX);
      if (position==="start"){
        dataItem.openValueX = value;
      }else{
        dataItem.valueX = value;
      }
      dataItem.column.isHover = true;
      dataItem.column.hideTooltip();
      event.target.isHover = true;
    }