Highcharts plotLine drag xAxis event

Question

I would like to drag a plotLine on xAxis and detect this change. Can someone please provide an example ?

Edit

@DiMono

Here is what I have tried so far. The click event is not firing. By this approach I would like to add, dragstart, dragend etc events to enable drag functionality.

<html>
<head>
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
   <script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>

</head>
<body>
<div id="container" style ="height : 400px">

</div>

</body>

<script type="text/javascript">


    (function(H){
        H.Chart.prototype.callbacks.push(function(chart){

            H.addEvent(chart.xAxis[0].plotLinesAndBands[0].svgElem,'click',function(e){
                console.log('click from plugin');
            });
        });

    }(Highcharts));

    $(document).ready(function(){
        var chart = new Highcharts.Chart({
        chart : {
        renderTo: 'container'
        },
        xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],

                plotLines: [{
                    color: '#FF0000',
                    width: 2,
                    value: 5.5
                }]
            },

            series: [{
                data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
            }]

    });

    });






</script>
</html>

Can you show us what you've tried already? We're not going to simply write your code for you, but if you have non-working code we can help you fix it. — DiMono, Aug 28 '13 at 06:35

score 5 · Accepted Answer · edited Jul 18 '17 at 11:27

5

You can prepare it in JavaScript with the Highcharts translate function.

See working example: http://jsfiddle.net/VXTeR/1/

var line,
clickX,
clickY;

var start = function (e) {

    $(document).bind({
        'mousemove.line': step,
            'mouseup.line': stop
    });

    clickX = e.pageX - line.translateX;
    //clickY = e.pageY - line.translateY; //uncomment if plotline should be also moved vertically
}

var step = function (e) {
    line.translate(e.pageX - clickX, e.pageY - clickY)
}

var stop = function () {
    $(document).unbind('.line');
}

Highcharts callback

$('#container').highcharts(options, function(chart){

    line = chart.xAxis[0].plotLinesAndBands[0].svgElem.attr({
        stroke: 'yellow'
    })
    .css({
        'cursor': 'pointer'
    })
    .translate(0, 0)
    .on('mousedown', start);
});

edited Jul 18 '17 at 11:27

K. Rohde

9,439
1
31
51

answered Aug 28 '13 at 09:26

Sebastian Bochan

37,348
3
49
75

It works but if I resize the window, the plotLine changes its position. The purpose of having plotLine is to select a range. – lostpacket Aug 29 '13 at 13:19
Because plotline is related with chart, so when you resize, plotline moves. If you need to add "absolute" line you should use renderer.path. http://api.highcharts.com/highcharts#Renderer.path() – Sebastian Bochan Aug 29 '13 at 13:30
I have one final question.How do you pass the data in 'mousemove.line':step event binding ? I am familiar with the generic `$(element).bind('event',data,function)` syntax. Thanks. – lostpacket Aug 29 '13 at 20:47
It works as mouse evenet which kept position in pixels. – Sebastian Bochan Aug 30 '13 at 08:00
1

This solution worked for me. I extended it to include a label displaying the corresponding axis value. Thank you! – BenS Apr 20 '18 at 11:49

ssarabando · Answer 2 · 2013-08-28T09:07:19.120

0

svgElem can be treated as an Element, so if you use the on() method to apply your event handler (refer to the documentation here), it should work.

Something like:

chart.xAxis[0].plotLinesAndBands[0].svgElem.on('click', function () {
    console.log('click from plugin');
});

edited Aug 28 '13 at 09:07

answered Aug 28 '13 at 09:02

ssarabando

3,397
2
36
42

Highcharts plotLine drag xAxis event

2 Answers2

Linked