title: Create multiple vertical plotlines on click and drag each of the plotline. Developed in Angular 6 and Highcharts
body: <p>I am developing a functionality to create vertical lines on a line graph on click. User should be able to drag the lines should left and right. I am developing the same in Angular 6 and Highcharts.</p>
  
  <p>I am able to create the vertical lines but not able to drag the line.</p>
  
  <p>Below is my component code where i create chart and plotline on click.</p>
  
  <pre><code>import * as Highcharts from 'highcharts';
  import * as HichartsExporting from 'highcharts/modules/exporting.src';
  
  HichartsExporting(Highcharts);
  
  var clickX;
  var clickY;
  
  @Injectable()
  export class HighchartsService {
  
    charts = [];
    defaultOptions = {
      title: {
        text: 'Vibration Data'
      },
      credits: {
        enabled: false
      },
      subtitle: {
        text: 'Nidec.com'
      },
      yAxis: {
        title: {
          text: ''
        }
      },
      xAxis: {
          categories: []
      },
      legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
      },
      // plotOptions: {
      //   series: {        
      //     point: {
      //       events: {
      //         click: function () {
      //           alert('Category: ' + this.category + ', value: ' + this.y);
      //         }
      //       }
      //     }
      //   }
      // },
      series: [],
      chart: {      
        events: {
          click: function (e) {
            let chart = this;
            let xAxis = chart.xAxis[0];
            let xValue = xAxis.toValue(this.mouseDownX);
  
            xAxis.addPlotLine({
              value: xValue,
              color: '#ff0000',
              width: 2,
              label: {
                rotation: 0,
                text:xValue
              },            
              events: {
                mousedown : function (e) {
                  clickX=e.pageX;
                },
                mouseout: function (e) {
  
                },
                mousemove: function(e) {                
                  this.svgElem.translate(e.pageX - clickX, e.pageY);                
                }
              }            
            });
  
          }
        }
  
      },
      exporting : {
        buttons: {
          customButton: {
            text: 'Close',
            onclick: function (e) {
              //console.log(e);
              console.log(document.getElementById(e.path[4].id).outerHTML = '');
              //console.log();
            }
          }
        }
      }
    }
  
    constructor() {
    }
  
    createChart(container, series, xAxisData, options?: any) {    
      this.defaultOptions.series= series;
      this.defaultOptions.xAxis.categories = xAxisData; 
      let opts = !!options ? options : this.defaultOptions;
      let e = document.createElement("div");
  
      container.appendChild(e);
  
      if (!!opts.chart) {
        opts.chart['renderTo'] = e;
      }
      else {
        opts.chart = {
          'renderTo': e
        }
      }
  
      this.charts.push(new Highcharts.Chart(opts));
    }
  </code></pre>