How do I create a draggable plot line in Highcharts?

Question

How do I create a draggable plotline in Highcharts? I couldn't find info about this. See please screenshot. You will see a green line on the screenshot. This plotline must be oriented on xAxis and draggable with max and min value on the axis Х. Can you help me? maybe some suggestion or link to official docs. Thank you in advanced. screenshot

see pls also some short video

https://drive.google.com/open?id=1sHeIZU1S5M15yxbzKWQrTE44pdrUz7PW

score 4 · Accepted Answer · answered Oct 16 '18 at 17:25

You can simply render the rect element using Highcharts.SVGRenderer class, and then handle appropriate events, to change the line position on drag. Everything should be able to achieve on chart.events.load handler. Here is a sample code:

  load() {
    var chart = this,
      lineWidth = 2,
      draggablePlotLine = chart.renderer.rect(100, chart.plotTop, lineWidth, chart.plotHeight)
      .attr({
        fill: 'blue'
      })
      .add();

    chart.container.onmousemove = function(e) {
      if (draggablePlotLine.drag) {
        let normalizedEvent = chart.pointer.normalize(e),
          extremes = {
            left: chart.plotLeft,
            right: chart.plotLeft + chart.plotWidth
          };

        // Move line
        if (
          e.chartX >= extremes.left &&
          e.chartX <= extremes.right
        ) {
          draggablePlotLine.attr({
            x: e.chartX
          })
        }
      }
    }

    draggablePlotLine.element.onmousedown = function() {
      draggablePlotLine.drag = true
    }

    draggablePlotLine.element.onmouseup = function() {
      draggablePlotLine.drag = false
    }

  }

Live exampe: https://jsfiddle.net/Lnj7ac42/

API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer

This is not what I asked for. I have already known about this possibility. But anyway thank you!!! — Василий Поляков, Oct 23 '18 at 08:26
So, I suggest you tu use `draggable-points` plugin. I'm almost sure, that will give exactly the same effect like on your video and screenshot. Here is the example: https://jsfiddle.net/u7L3pfqg/ — daniel_s, Oct 23 '18 at 12:37
Awesome!!! Thank you for your time. This example on jsfiddle helped me!!! before this, I couldn't implement it by myself! — Василий Поляков, Oct 25 '18 at 06:40

How do I create a draggable plot line in Highcharts?

1 Answers1

Linked