Making a HighChart container draggble

Question

Has anyone successfully been able to add the ability to drag and drop highcharts on an HTML page?

I am evaluating HighCharts for use in work project.

One of the requirements will be the ability to click on a chart, and drag and drop the entire chart to a different location (div) on the page.

HTML 5 has built in drag and drop capabilities where you simply set an object's draggable property to "true" and set a couple of drag and drop events.

I have not been able to implement this HTML5 drag and drop on a High Chart. I tried setting the chart's container DIV tag "draggable" attribute to true, and the div's "ondragstart" event, but the drag start event is never fired.

I imagine that the Highchart object is handling the onclick events so that the drag start event is not fired.

One another requirement is that the user will still be able to use the default chart functionality when you click on a series or a legend title. For instance, we will allow a user to click on a pie-slice to open a new window to "drilldown" into a series to see the data associated. So the onclick event of the series elements still needs to function normally. I imagine the ability to drag the entire chart would mean initially clicking in some "open" space inside the container.

Has anyone successfully been able to add the ability to drag and drop highcharts on an HTML page?

Thanks

Courtney

Kamil Kulig Kamil Kulig · Accepted Answer · 2018-05-10T13:19:00

It can be done by overriding the the default behavior of Highcharts.Pointer.prototype.drag function:

JS:

 (function(H) {
   H.Pointer.prototype.drag = function(e) {
    var container = this.chart.container.parentElement;
      container.style.left = container.offsetLeft + e.movementX + 'px';
      container.style.top = container.offsetTop + e.movementY + 'px';
   }
 })(Highcharts);

 var chart = Highcharts.chart('container', {
   series: [{
     data: [1, 2]
   }]
 });

CSS:

#container {
  width: 300px;
  height: 200px;
  position: absolute;
  left: 100px;
  top: 100px;
}

Live demo: http://jsfiddle.net/BlackLabel/gtqdheLc/

Making a HighChart container draggble

1 Answers