a_valentine
Posts: 15
Joined: Fri Jun 11, 2021 3:13 pm

Possible to Drag and Drop multiple Columns

Good Afternoon,

Is it possible to drag multiple columns in a column chart with drag and drop enabled? It would be ideal to drag a box around a group of columns, but if that is not possible, then could it be accomplished by CTRL or SHIFT selecting columns to be dragged?

Thanks,

-A
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Possible to Drag and Drop multiple Columns

Hi a_valentine!
We appreciate you reaching out to us!

Yes, it is possible.. You can use select and unselect events on points and assign points to some group. Then in dragDrop.groupBy you are setting this group and everything works correctly. You can check the demo below.

Demo: https://jsfiddle.net/BlackLabel/9znurftL/
API Reference: https://api.highcharts.com/highcharts/s ... n.dragDrop
https://api.highcharts.com/highcharts/s ... nts.select
https://api.highcharts.com/highcharts/s ... s.unselect

Let me know if you have any further questions.
Regards!
Hubert Kozik
Highcharts Developer
a_valentine
Posts: 15
Joined: Fri Jun 11, 2021 3:13 pm

Re: Possible to Drag and Drop multiple Columns

Thank you very much for your response!

I did play with the demo a bit. What is the best way to re-order the items in the data after the drop and update the dataset to reflect the new changes? For example, if I drag a column over another, I would want to replace it move the previous item either before or after. I added a drop event to the fiddle provided to try to update the data afterwards, but it's not working so well. In addition, depending on if more than one column is selected the {newPoint} parameter on the event disappears and is replaced by {newPoints}. Can you see the updates in the jsFiddle?
https://jsfiddle.net/0hawfuy8/14/

Thanks
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Possible to Drag and Drop multiple Columns

a_valentine,

You were right to use the drop event. You can get dragged points from newPoints object (with some JS tricks). Then, all you need to use is the built-in method Element.toFront(), which automatically pops and re-appends to the top.

An example to move the point at data index it would then be:

Code: Select all

chart.series[0].data[i].graphic.toFront()
And that's all it takes!

Demo: https://jsfiddle.net/BlackLabel/6sLujngf/

Let me know if that was what you were looking for.
Regards!
Hubert Kozik
Highcharts Developer
a_valentine
Posts: 15
Joined: Fri Jun 11, 2021 3:13 pm

Re: Possible to Drag and Drop multiple Columns

Thank you for the response! Is it possible to change the x-coordinates of the columns in the drop event and have the chart redraw the columns in the new positions?

Thanks!
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Possible to Drag and Drop multiple Columns

a_valentine,
I'm sorry but I think I'm missing something. Could you please show a little bit more light on the matter to help me understand it? I am not sure what would you like to do by changing the x-coordinates of dropped columns (which already had been changed by dropping). Of course you can update dropped point with update method: https://api.highcharts.com/class-refere ... int#update

Demo: https://jsfiddle.net/BlackLabel/ksu9jm3L/

Regards!
Hubert Kozik
Highcharts Developer
a_valentine
Posts: 15
Joined: Fri Jun 11, 2021 3:13 pm

Re: Possible to Drag and Drop multiple Columns

I would like to change the x-coordinates of the other columns, specifically those that were not dragged. If I drag a column from X=4 to X = 10, I want the columns between ( at X = 5 through X = 9 ) to shift 1 to the left automatically. So the column that was at X = 5 becomes the new column at X=4.... and so on until reaching the dropped column at X = 10
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Possible to Drag and Drop multiple Columns

a_valentine,

Actually, the feature you are requesting is beyond the scope of support on our forum. Also dragging a group of points is also a custom thing and it also collides with each other. If you need help with your implementation, you can try to look for it on the more general forums like StackOverflow or contact the Black Label company that specializes in Highcharts custom projects. See the official Black Label site: https://blacklabel.pl

Kind regards!
Hubert Kozik
Highcharts Developer
a_valentine
Posts: 15
Joined: Fri Jun 11, 2021 3:13 pm

Re: Possible to Drag and Drop multiple Columns

Good Afternoon,

Thank you for all of your help on this item. I did have another question. How would I un-select the items after a drop? Setting the 'groupId' field to NULL on a drop event (in the same block of code as setting the color) doesn't seem to work.

https://jsfiddle.net/BlackLabel/ksu9jm3L/

Thanks!
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Possible to Drag and Drop multiple Columns

Hi again a_valentine!

All you need to use is point.select method with false as the parameter. It will fire unselect events.

Demo: https://jsfiddle.net/BlackLabel/hgw315va/
API Reference: https://api.highcharts.com/class-refere ... int#select

Kind regards!
Hubert Kozik
Highcharts Developer
a_valentine
Posts: 15
Joined: Fri Jun 11, 2021 3:13 pm

Re: Possible to Drag and Drop multiple Columns

Thank you very much!

The fix worked like a charm!
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Possible to Drag and Drop multiple Columns

That's great to hear! In case of any further questions, feel free to contact us again.
Hubert Kozik
Highcharts Developer
a_valentine
Posts: 15
Joined: Fri Jun 11, 2021 3:13 pm

Re: Possible to Drag and Drop multiple Columns

Good Afternoon,

Here is a demo that I made for an issue I'm having with drag and drop. It is using the x-range chart type instead of the column chart type. I decided to use this because it allows for columns to be wider if I decide to set them to be wider with width values that I can control easy, though I have to use a function at declaration at the beginning to set the height of the individual columns. It is using React Highcharts and also has multiple select and drag and drop enabled (as long as the columns are adjacent to each other), but I am encountering 2 issues:

1) Clicking anywhere off the bars causes an issue within the drag and drop module

2) In the Drop Event, it seems that there is a bug where the data from the drop event function (e.target.series.data) is out of order during subsequent drag and drops. It functions well the first time, but every other time, the data seems to become disorganized and the drop animation shows it. I have tried maintaining the correct car order in the state, but this doesn't entirely fix the issue because it can become invalid somehow too.

https://stackblitz.com/edit/react-9hxrwq

Thank you for your time
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Possible to Drag and Drop multiple Columns

Hello,

As you wrote, these are bugs, in which case you need to report them on GitHub, there you will receive more information and a potential workaraund.

You can report a bug using this link: https://github.com/highcharts/highchart ... new/choose

Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/

Return to “Highcharts Usage”