Highcharts Demo

author(s): Torstein Hønsi

by alxscms

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://rawgithub.com/highcharts/draggable-points/master/draggable-points.js?1"></script>



<div id="container"></div>

CSS

#container {
  min-width: 310px;
  max-width: 800px;
  height: 400px;
  margin: 0 auto
}

JavaScript

var chart = Highcharts.chart('container', {
  chart: {
    events: {
      load() {
        var chart = this,
          lineWidth = 5,
          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
        }

      }
    }
  },
  series: [{
    name: 'Installation',
    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
  }],
});