Draggable legend box
As in the example found at: http://www.ejschart.com/
![](https://secure.gravatar.com/avatar/d41d8cd98f00b204e9800998ecf8427e?size=40&default=https%3A%2F%2Fassets.uvcdn.com%2Fpkg%2Fadmin%2Ficons%2Fuser_70-6bcf9e08938533adb9bac95c3e487cb2a6d4a32f890ca6fdc82e3072e0ea0368.png)
-
CaptainBli commented
The plugin stops working if the legend is updated after the initialization. See: http://jsfiddle.net/4jZ7T/242/
-
Nico Po commented
Thaaaaank you!
-
I fixed that in the plugin now, check out version 1.0.2.
-
Gordon commented
did anyone mention how to have a draggable legend, AND a zoomable chart??
-
Instead of applying it to the legend.title.element, perhaps try legend.legendGroup.element instead?
addEvent(title.element, 'mousedown', function (e) {
-
PHPepe commented
Hey this is great ! Is there and easy way to drag and drop in the legend ( not only in the title ) ?
Thanks -
Roy Boverhof commented
I have added a "return false;" to the mouseDown event to prevent dragging from causing a zoom action.
-
@dcw: Actually it works with the latest v3 code: http://jsfiddle.net/highcharts/M7ZNQ/1/
-
Max Mueller commented
Was just thinking this would be a sweet feature to have - especially if it worked on all desktop/pad/mobile! Voting...
-
dcw commented
Great feature! But there is one problem... if you drag and drop the legend over the drawed lines then you cannot drag it anymore (because of the tooltips).
-
I see that - it's a problem with the legend and the axis labels both having zIndex 7. The workaround is to set the axis.labels.zIndex to 6, which I have done in the demo.
-
Anonymous commented
looks nice but when overlapping the axis the legend should be opaque and non transparent as it becomes confusing
-
Jamie commented
That's pretty nice Torstein.
One thing that I think would make it even better is if you could click on the legend title to collapse/expand the body of the legend, so that it could be hidden away.
-
Mat commented
bump
-
Anonymous commented
+10!!!
-
Stef commented
Yes, absolutely! Very useful to have!
-
Anonymous commented
Its also the first feature that I cannot find on HighCharts so far. Actually this might be a great option if your charts has much data and a legend would overlap this. So the user could decide when and where to place the legend in order to customize his or her appliaction-frame. I could also imagine that one particular legend could be used by several charts or maps as well.
-
Anonymous commented
Kevin, have you looked at the POC that Torstein posted? It may not be part of the original code base for HighCharts but it does make a legend in a div. After that you can use jQuery to make it dragggable, e.g. jQuery('#someLegendID').draggable(); I gave it a try and it works.
-
Kevin Versfeld commented
+1
Desperately want this feature... in fact, its bordering on make-or-break for us at the moment :( -
Actually I have a POC for HTML legend: http://jsfiddle.net/highcharts/nULxz/. Perhaps you can pick up this with jQuery and do some magic?