horizontal bar chart drag x axis

[carlgrayau]

Hi,

Thanks for your plugin, I found that with vertical bar chart the dragging works fine. However when I use the horizontal bar chart, it drags but along the Y axis, i.e. moving the mouse up and down, will move the horizontal bar left and right. I tried the DragX/Y options but did not get it to work, also putting DragData within the X/Y axis.

Also a smaller issue, was when I dragged to zero, I could not drag it out of zero, so I had to set the minimum to be 1 instead of 0.

Any fixes appreciated.
Thanks

[chrispahm]

Hi @carlgrayau,
Thanks for raising an issue!
So the underlying problem with the issue you are describing (also linked to #19) is that bar charts were originally never within the scope of this plugin. That said, I was even surprised to learn that vertical bar charts are somewhat working.

I started fiddling around on a new branch, mainly because I wanted to get rid of the security vulnerabilities due to the old dependencies. I guess the horizontal bar charts should be working now, I will try to solve the issue with the stacked ones while I'm at it before I merge into master though

You can check out the working brach here:
https://github.com/chrispahm/chartjs-plugin-dragData/tree/bar-chart-fixes

[carlgrayau]

@chrispahm thanks for the fix! works great!

Re Drag from 0 - I saw it working on your jsfiddle, but doesn't pick it up for me at 0.

[chrispahm]

Alright I just merged the changes into master, would be nice if you could have a look once again!

So about the drag from 0:
That's conceptually not easy, especially with bar charts. I mean what do you expect from a bar chart when a value is 0? Is guess we both agree, there shouldn't be a bar. Otherwise this would suggest that there still is a value > 0 for that variable, which would confuse users. Now that there is no actual bar drawn on canvas anymore (technically it's still there, it just doesn't have a height/width), it's also difficult to get a hold of it with the cursor or finger.
If you check out the example for the bar chart and drag one of the bars to 0, you can still get a hold of the bar afterwards if you hover right over the center of the data label (that's difficult to explain...).
From a UI perspective, that's terrible, because you have to 100% with your mouse in order to catch it. For the line charts, this can largely be fixed by increasing the value for the pointHitRadius in the dataset configuration. However, that options does not seem to be available for bar charts.

Best,
Christoph

[carlgrayau]

Thanks Christoph,

Yep master is working fine!

On the 0 problem, can see the difficulties from ux perspective, it would be cumbersome to have to start from a figure other than 0 for many charts (to avoid your user getting stuck). I guess they could refresh if they do so, but also this wouldn't be great.
Cheers for the update!
Carl

[chrispahm]

Ok thanks for confirming!
I guess about the 0 drag issue the best option I see is opening an issue on the Chart.js repo asking for a hitRadius option, or possible alternatives.

Cheers
Christoph

[carlgrayau]

Hey Chris,

Re this, I found an option that helped me for 0 values, it was minBarLength which you can add. Don't know why the default wasn't working per a lot of examples, but this is a good fix.

Cheers
Carl

[chrispahm]

That's good to know! If you want to, it would be nice to have a jsFiddle, Plunker, ..., showing the difference, then I could make a reference in the readme for anyone interested in using this with bar charts.

[chrispahm]

Just as a reference, I made a fiddle showcasing how to use minBarLength with this plugin:
https://jsfiddle.net/nc0fh3su/2/

See #52 for discussion