Change the position of the rectangle that compose the StackedBar

[Ciere]

Hi everybody, I have create a stackedbar chart composed by 5 quantitative variable where each variable is a rectangle, now my problem is the following: I have to click on a rectangle of a stacked bar, after the click this rectangle have to take the position of the rectangle above it and this must happen in each stacked bar, I thought also to use not the click event but the drag and drop event but i Don’t know how can i do in each case.
I have to do this in JavaScript and using d3.js.
If we want the code to understand better tell me.

• This topic was modified 4 years, 5 months ago by Ciere.

[Manoj Mohan]

@ciere,

Please take a look at the documentation page for information on Stacked Bar Chart and mousemove event.

—
Manoj Mohan
Team CanvasJS

[Ciere]

The stacked bar are the 100% stacked bar chart and each bar is composed by 5 rectangle and I have to change the position of the rectangle in the bar, I’m not sure that mousemove can help me.

[Manoj Mohan]

@ciere,

You can swap the dataSeries with the help of click event as shown in this JSFiddle.

—-
Manoj Mohan
Team CanvasJS

[Ciere]

Yes, but this code only change the dimension of the rectangle after the click, what I want is that after the click on one rectangle changes the position with the rectangle above it, in you example the rectangle red change the position with the rectangle blu
Thank you for the answer.

[Manoj Mohan]

@ciere,

Please take a look at this updated JSFiddle.

—-
Manoj Mohan
Team CanvasJS

[Ciere]

Perfect, it’s what I wanted, thank you. Other question, this logic use for your code is usable with d3.js?

[Manoj Mohan]

@ciere,

You can achieve this using CanvasJS as provided in the above JSFiddle.

Please feel free to post any queries related to CanvasJS.

—-
Manoj Mohan
Team CanvasJS