How to make a vertical bar graph with horizontally draggable bars?

[Martin Connor]

Hello! I was wondering, could you please link me to a CanvasJS fiddle that shows a vertical bar graph with columns that the user can click on and drag horizontally? I have seen your posts for horizontally bars graphs that can be dragged left to right, and vertical bar graphs that can be dragged up and down, but I need a combination of both: a vertical bar graph whose columns can be dragged left and right. I need to do this in my React.js version of CanvasJS. Thanks, I love your technology!

• This topic was modified 3 years, 11 months ago by Martin Connor.

[Indranil]

@mepc36,

It is not possible to drag column chart horizontally as of now. However, you can use Error chart to achieve the above requirement. Please take a look at this JSFiddle for an example.

___________
Indranil Deo
Team CanvasJS

[Martin Connor]

Hi Idranil! Thanks for your help…however, that Fiddle does not do what I need. I need the column at 10 to move left or right to 12 or 8, but all that Fiddle does is make the column thicker, so that it overlaps with 8 and 12. I need to move the whole column to the left, not just make it wider.

Is that possible?

[Indranil]

@mepc36,

Please take a look at this JSFiddle.

___________
Indranil Deo
Team CanvasJS

[Martin Connor]

Hey Indranil! This looks great. There seems to be one small bug though — the columns get really thin and then really wide whenever the column you’re dragging overlaps with its first neighbor to the left or right. Is there any way to prevent that?

Thanks!

[Indranil]

@mepc36,

Width of columns / datapoints depends on multiple factors like width of the chart, number of dataPoints within the viewport, value difference between the consecutive dataPoints, etc. As dataPoints are dragged to reposition it, dataPoint’s x-value gets updated which in turn changes the value difference between its neighboring dataPoints. Hence width of dataPoints / columns are getting updated when you reposition the column. However, you can fix the width of the column / dataPoint by setting dataPointWidth property.

___________
Indranil Deo
Team CanvasJS

[Martin Connor]

Oh great, thanks! Do you mind please updating that Fiddle you just sent me with a fixed dataPointWidth property, please? I’d really appreciate it Indranil!

[Indranil]

@mepc36,

Please take a look at this updated JSFiddle.

___________
Indranil Deo
Team CanvasJS

[Martin Connor]

Great, thanks Indranil! I appreciate it.