title: HighCharts Draggable Plotline with Logarithmic axis scale
body: <p>I have a simple Line chart using HighCharts &amp; trying to add draggable plotlines in it.</p>
  
  <pre><code>$(function () {
  
  function draggablePlotLine(axis, plotLineId) {
      var clickX, clickY;
  
      var getPlotLine = function () {
          for (var i = 0; i &lt; axis.plotLinesAndBands.length; i++) {
              if (axis.plotLinesAndBands[i].id === plotLineId) {
                  return axis.plotLinesAndBands[i];
              }
          }
      };
  
      var getValue = function() {
          var plotLine = getPlotLine();
          var translation = axis.horiz ? plotLine.svgElem.translateX : plotLine.svgElem.translateY;
          var new_value = axis.toValue(translation) - axis.toValue(0) + plotLine.options.value;
          new_value = Math.max(axis.min, Math.min(axis.max, new_value));
          return new_value;
      };
  
      var drag_start = function (e) {
          $(document).bind({
              'mousemove.line': drag_step,
                  'mouseup.line': drag_stop
          });
  
          var plotLine = getPlotLine();
          clickX = e.pageX - plotLine.svgElem.translateX;
          clickY = e.pageY - plotLine.svgElem.translateY;
          if (plotLine.options.onDragStart) {
              plotLine.options.onDragStart(getValue());
          }
      };
  
      var drag_step = function (e) {
          var plotLine = getPlotLine();
          var new_translation = axis.horiz ? e.pageX - clickX : e.pageY - clickY;
          var new_value = axis.toValue(new_translation) - axis.toValue(0) + plotLine.options.value;
          new_value = Math.max(axis.min, Math.min(axis.max, new_value));
          new_translation = axis.toPixels(new_value + axis.toValue(0) - plotLine.options.value);
          plotLine.svgElem.translate(
              axis.horiz ? new_translation : 0,
              axis.horiz ? 0 : new_translation);
  
          if (plotLine.options.onDragChange) {
              plotLine.options.onDragChange(new_value);
          }
      };
  
      var drag_stop = function () {
          $(document).unbind('.line');
  
          var plotLine = getPlotLine();
          var plotLineOptions = plotLine.options;
          //Remove + Re-insert plot line
          //Otherwise it gets messed up when chart is resized
          if (plotLine.svgElem.hasOwnProperty('translateX')) {
              plotLineOptions.value = getValue()
              axis.removePlotLine(plotLineOptions.id);
              axis.addPlotLine(plotLineOptions);
  
              if (plotLineOptions.onDragFinish) {
                  plotLineOptions.onDragFinish(plotLineOptions.value);
              }
          }
  
          getPlotLine().svgElem
              .css({'cursor': 'pointer'})
              .translate(0, 0)
              .on('mousedown', drag_start);
      };
      drag_stop();
  };
  
  $('#container').highcharts({
      xAxis: {
  
          min: -10,
          max: 10,
          plotLines: [{
              id: 'foo',
              color: '#00F',
              width: 4,
              value: 5,
              onDragStart: function (new_value) {
                  $("#x_value").text(new_value + ' (Not changed yet)');
              },
              onDragChange: function (new_value) {
                  $("#x_value").text(new_value + ' (Dragging)');
              },
              onDragFinish: function (new_value) {
                  $("#x_value").text(new_value);
              }
          }]
      },
  
      yAxis: {
             type: 'logarithmic',  
          plotLines: [{
              label: {
                  text: 'Not draggable'
              },
              id: 'y1',
              color: '#CCC',
              width: 4,
              value: 150
          }, {
              id: 'y2',
              color: '#00F',
              width: 4,
              value: 200,
              onDragStart: function (new_value) {
                  $("#y_value").text(new_value + ' (Not changed yet)');
              },
              onDragChange: function (new_value) {
                  $("#y_value").text(new_value + ' (Dragging)');
              },
              onDragFinish: function (new_value) {
                  $("#y_value").text(new_value);
              }
          }, {
              label: {
                  text: 'Not draggable'
              },
              id: 'y3',
              color: '#CCC',
              width: 4,
              value: 250
          }]
      },
  
      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]
      }]
  }, function (chart) {
      draggablePlotLine(chart.xAxis[0], 'foo');
      draggablePlotLine(chart.yAxis[0], 'y2');
      console.log('ready');
  });
  });
  </code></pre>
  
  <p>JSFiddle Link: <a href="http://jsfiddle.net/48awM/30/" rel="nofollow">http://jsfiddle.net/48awM/30/</a> (actual)
  My Forked Update: <a href="http://jsfiddle.net/kk8322/z62nnmwe/1/" rel="nofollow">http://jsfiddle.net/kk8322/z62nnmwe/1/</a></p>
  
  <p>Actual JSFiddle works fine - which has normal axis scale, but forked version fails while dragging plotline. Only difference between actual &amp; forked version is that my Y-Axis will be of type "Logarithmic".</p>
  
  <pre><code>   type: 'logarithmic'
  </code></pre>
  
  <p>Adding Logarithmic scale for axis is not handling drag/drop properly. Please suggest me how to handle Draggable Plotlines with Logarithmic x/y axis scale.</p>