Change the position of the rectangle that compose the StackedBar

• May 25, 2020 at 10:15 pm #29350
  
  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, 6 months ago by Ciere.
  May 26, 2020 at 7:13 pm #29364
  
  Manoj Mohan

  @ciere,

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

  —
  Manoj Mohan
  Team CanvasJS

  May 27, 2020 at 3:28 pm #29372
  
  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.

  May 29, 2020 at 4:56 pm #29396
  
  Manoj Mohan

  @ciere,

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

  —-
  Manoj Mohan
  Team CanvasJS

  May 29, 2020 at 7:58 pm #29404
  
  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.

  June 1, 2020 at 7:10 pm #29419
  
  Manoj Mohan

  @ciere,

  Please take a look at this updated JSFiddle.

  —-
  Manoj Mohan
  Team CanvasJS

  June 2, 2020 at 9:18 pm #29436
  
  Ciere

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

  June 3, 2020 at 6:54 pm #29446
  
  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