Dragging a vertical bar graph's columns horizontally?
mepc36 opened this issue · 3 comments
Hey Chris! Great library, really loving it so far. I was wondering, is there any way to drag a vertical bar graph's columns horizontally? An example of what I mean can be seen here (although it's implemented in a non-integratable library there, called CanvasJS.)
Fair enough if it's not possible; my own idea was to edit the source code and then open a P.R., but I'm having trouble so far. Happy to compensate you for your time, if it's a haul. Please let me know, thanks!
Hi Martin,
Where you able to figure out a fix for this? This exactly what I am trying to do. Thanks
Hey @mepc36,
sorry for the delay. Unfortunately, dragging bars along the x-axis is not supported. As long as I remember, Chart.js does not support drawing bars (categorial data) on a linear axis at all, which is a requirement for this plugin to work. While there are hacks e.g. this one making it look like the bars appear on a linear axis, this does not solve the underlying problem.
However, one could adapt the source code in order to rearrange bars along the x-axis. I'm relatively unsure how smooth the transition would be though. Eventually, once a certain dragging threshold is surpassed, the relevant bars would just flip given this implementation. I'm not sure whether this would be worth the effort...
Hey @mepc36,
sorry for the delay. Unfortunately, dragging bars along the x-axis is not supported. As long as I remember, Chart.js does not support drawing bars (categorial data) on a linear axis at all, which is a requirement for this plugin to work. While there are hacks e.g. this one making it look like the bars appear on a linear axis, this does not solve the underlying problem.
However, one could adapt the source code in order to rearrange bars along the x-axis. I'm relatively unsure how smooth the transition would be though. Eventually, once a certain dragging threshold is surpassed, the relevant bars would just flip given this implementation. I'm not sure whether this would be worth the effort...
Hey Chris! Thanks for the feedback. I ended up reformulating my problem, so I never got a chance to test any of our hypotheses for a solution. Instead, I ended up using the chartjs-plugin-annotation library to draw the columns, and implemented that on a chart of type linear (while still using chartjs-plugin-drag too). If you'd like to see it in action, it's live at heyrapbot.ai. That website is a digital audio workstation (like Garage Band or Logic Pro) that's been written in HTML, JS, and React, so it's super fast. The music is presented horizontally, and I wanted drag-functionality so the user could fix timing problems tactilely.
Thanks for all your hard work on this library! Really appreciate it.