Drag legend out of Highchart

Question

I have a bunch of series represented as button outside of the chart which are draggable. When ever I drag these onto the line chart I add that serie with correct values. This part is working.

I wan't the similar workflow when I want to remove series from the chart. The legend item is probably the best item to drag off the chart, however - I have major issues with making the legend draggable with the native HTML5 drag and drop API.

I use HTML-legend and append the correct HTML attributes to it, without luck. Fiddle here.

$(function () {
    $('#container').highcharts({
        title: {
            text: 'Monthly Average Temperature'
        },
        subtitle: {
            text: 'Source: WorldClimate.com'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Temperature (°C)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '°C'
        },
        legend: {
            useHTML: true
        },
        series: [{
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }, {
            name: 'New York',
            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
        }, {
            name: 'Berlin',
            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
        }, {
            name: 'London',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
        }]
    });
$('div .highcharts-legend-item span')
    .attr('draggable', 'true')
    .attr('ondragstart', 'dragChartLegend(event)');
});

function dragChartLegend(event) {
    console.log(event);
}

I'm not quite sure what's causing the issue - but I belive it's something Highcharts does - as just a raw copy and paste of the legend somewhere else on the site works fine.

Anyone have any ideas?

Sebastian Bochan Sebastian Bochan · Accepted Answer · 2014-06-13T10:06:04

Unforunately in this way it is not possible, because the symbol will not move (it is not html element, but svg). You can try to adapt this plugin: http://www.highcharts.com/plugin-registry/single/32/draggable-legend-box

Drag legend out of Highchart

1 Answers