title: Resizing Annotation shapes
body: <p>I am trying to create annotations in high charts and resizing the shapes on clicking inside a shape. I have created a js fiddle. </p>
  
  <p>Run the jsfiddle: <a href="http://jsfiddle.net/1e1jnv7w/" rel="nofollow">http://jsfiddle.net/1e1jnv7w/</a></p>
  
  <pre><code>HTML:
  &lt;h3&gt;Add annotation via simple form&lt;/h3&gt;
  &lt;div style="width: 1054px; float: left;"&gt;
    &lt;div id="container" style="float: left; height: 342px; width: 800px"&gt;
  &lt;/div&gt;
  
  JAVASCRIPT:
  $(function() {
    var options = {
      chart: {
        borderWidth: 5,
        borderColor: '#e8eaeb',
        borderRadius: 0,
        renderTo: 'container',
        backgroundColor: '#f7f7f7',
        //zoomType: 'x',
        events: {
          load: chartLoad
        }
      },
      title: {
        style: {
          'fontSize': '1em'
        },
        useHTML: true,
        x: -27,
        y: 8,
        text: '&lt;span class="chart-title"&gt; Drag and drop on a chart to add annotation  &lt;span class="chart-href"&gt; &lt;a href="http://www.blacklabel.pl/highcharts" target="_blank"&gt; Black Label &lt;/a&gt; &lt;/span&gt; &lt;span class="chart-subtitle"&gt;plugin by &lt;/span&gt;&lt;/span&gt;'
      },
      annotationsOptions: {
        enabledButtons: false
      },
      annotations: [{
        title: {
          text: '&lt;span style=""&gt;drag me anywhere &lt;br&gt; dblclick to remove&lt;/span&gt;',
          style: {
            color: 'red'
          }
        },
        anchorX: "left",
        anchorY: "top",
        allowDragX: true,
        allowDragY: true,
        x: 515,
        y: 55
      }, {
        title: 'drag me &lt;br&gt; horizontaly',
        anchorX: "left",
        anchorY: "top",
        allowDragY: false,
        allowDragX: true,
        xValue: 3,
        yValue: 10,
        shape: {
          type: 'path',
          params: {
            d: ['M', 0, 0, 'L', 110, 0],
            stroke: '#c55'
          }
        }
      }, {
        title: 'on point &lt;br&gt; drag&amp;drop &lt;br&gt; disabled',
        linkedTo: 'high',
        anchorX: "middle",
        anchorY: "middle",
        allowDragY: false,
        allowDragX: false,
        shape: {
          type: 'circle',
          params: {
            r: 40,
            stroke: '#c55'
          }
        }
      }, {
        x: 100,
        y: 200,
        title: 'drag me &lt;br&gt; verticaly',
        anchorX: "left",
        anchorY: "top",
        allowDragY: true,
        allowDragX: false,
        shape: {
          type: 'rect',
          params: {
            x: 0,
            y: 0,
            width: 55,
            height: 40
          }
        }
      }],
      series: [{
        data: [13, 4, 5, {
            y: 1,
            id: 'high'
          },
          2, 14, 3, 2, 11, 6
        ]
      }]
    };
  
    var chart = new Highcharts.Chart(options, function(chart) {
  
      var container = chart.container,
        offsetX = chart.plotLeft - container.offsetLeft,
        offsetY = chart.plotTop - container.offsetTop;
      Highcharts.addEvent(container, 'mousedown', function(e) {
        var isInside = chart.isInsidePlot(e.clientX - offsetX, e.pageY - offsetY);
      });
    });
  
    function chartLoad() {
      var chart = this,
        container = chart.container,
        annotations = chart.annotations.allItems,
        annotation,
        clickX,
        clickY;
  
      function getParams(e) {
  
        function getRadius(e) {
  
          var x = e.pageX - container.offsetLeft,
            y = e.pageY - container.offsetTop,
            dx = Math.abs(x - clickX),
            dy = Math.abs(y - clickY);
          return parseInt(Math.sqrt(dx * dx + dy * dy), 10);
        }
  
        function getPath(e) {
          var x = e.pageX - container.offsetLeft,
            y = e.pageY - container.offsetTop,
            dx = x - clickX,
            dy = y - clickY;
  
          return ["M", 0, 0, 'L', parseInt(dx, 10), parseInt(dy, 10)];
        }
  
        function getWidth(e) {
          var x = e.clientX - container.offsetLeft,
            dx = Math.abs(x - clickX);
  
          return parseInt(dx, 10) + 1;
        }
  
        function getHeight(e) {
          var y = e.pageY - container.offsetTop,
            dy = Math.abs(y - clickY);
  
          return parseInt(dy, 10) + 1;
        }
  
        if (!annotation.options.shape) return;
  
        var shape = annotation.options.shape.params;
        var newShape = {};
        if (shape.r) {
  
          newShape.r = getRadius(e);
        }
        if (shape.d) {
          newShape.d = getPath(e);
        }
        if (shape.width) {
          newShape.width = getWidth(e);
        }
        if (shape.height) {
          newShape.height = getHeight(e);
        }
        return newShape;
      }
  
  
      function drag(e) {
         //  alert("Hii");
        var shape = $("input[type='radio']:checked").val(),
          stroke = $("#stroke").val(),
          strokeWidth = $("#strokeWidth").val(),
          title = $("#title").val(),
          fill = $("#fill").val(),
          shapeOpt = null,
          x = null,
          y = null,
          width = null,
          height = null,
          radius = 20;
  
  
        clickX = e.pageX - container.offsetLeft;
        clickY = e.pageY - container.offsetTop;
  
  
        if (!chart.isInsidePlot(clickX - chart.plotLeft, clickY - chart.plotTop)) {
          return;
        }
  
  
        if (shape == 'rect') {
          x = 0;
          y = 0;
          width = 1;
          height = 1;
          radius = 1;
        }
        if (shape !== 'text') {
          shapeOpt = {
            type: shape,
            params: {
              r: shape == 'circle' ? 1 : 0,
              d: shape == 'path' ? ['M', 0, 0, 'L', 1, 1] : null,
              x: x,
              y: y,
              width: width,
              height: height
            }
          };
          title = null;
          Highcharts.addEvent(document, 'mousemove', step);
        }
        chart.addAnnotation({
          x: clickX,
          y: clickY,
          allowDragX: true,
          allowDragY: true,
          anchorX: 'left',
          anchorY: 'top',
          title: title,
          shape: shapeOpt
        });
  
        annotation = annotations[annotations.length - 1];
  
      }
  
      function step(e) {
        // use renderer api for better performance
        annotation.shape.attr(getParams(e));
      }
  
      function drop(e) {
  
        Highcharts.removeEvent(document, 'mousemove', step);
  
        // store annotation details
        if (annotation) {
          annotation.update({
            shape: {
              params: getParams(e)
            }
          });
        }
        annotation = null;
      }
    function sal(e)
    {
  
       // Highcharts.removeEvent(container, 'dblclick', step);
      var each = Highcharts.each;
  
       each(chart.annotations.allItems, function (item, i) {
          if (item.selectionMarker) {
            shape = item.shape.element.localName;
          }
      });
  
       // var shape = $("input[type='radio']:checked").val(),
        var shapeOpt = null,
          x = null,
          y = null,
          width = null,
          height = null,
          radius = null;
  
  
        clickX = e.pageX - container.offsetLeft;
        clickY = e.pageY - container.offsetTop;
  
  
        if (!chart.isInsidePlot(clickX - chart.plotLeft, clickY - chart.plotTop)) {
          return;
        }
  
        if (shape == 'rect') {
          x = clickX;
          y = clickY;
          width = 1;
          height = 1;
          radius = 1;
        }
        if (shape !== 'text') {
          shapeOpt = {
            type: shape,
            params: {
              r: shape == 'circle' ? 1 : 0,
              d: shape == 'path' ? ['M', 0, 0, 'L', 1, 1] : null,
              x: x,
              y: y,
              width: width,
              height: height
            }
          };
          title = null;
          Highcharts.addEvent(document, 'mousemove', step);
        }
  
  
        annotation = annotations[annotations.length - 1];
    }
  
    //  Highcharts.addEvent(container, 'mousedown', drag);
      Highcharts.addEvent(document, 'mouseup', drop);
       Highcharts.addEvent(container, 'dblclick', sal);
  
      $('#ann1size').click(function() {
        var ann = annotations[annotations.length - 1];
        ann.update({
          shape: {
            params: {
              r: 200
            }
          }
        })
      });
    }
  });
  </code></pre>
  
  <ol>
  <li>double click on square shape, you can resize it now.</li>
  <li>double click on circle shape, its still resizing square shape.</li>
  </ol>
  
  <p>Can you please let me know how to fix this issue that no matter which shape is double clicked, square is getting resized. </p>