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.
// 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;
}
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).
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;
}