Highcharts Annotations Demo

author(s): Sebastian Domas

by Black Label

HTML

<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="https://code.highcharts.com/modules/annotations-advanced.src.js"></script>

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

CSS

#container {
  max-width: 800px;
  margin: 0 auto;
}

JavaScript

var positioner = function(target) {
  var xy = Highcharts.Annotation.MockPoint.pointToPixels(
    target.points[this.index]
  );

  return {
    x: xy.x - this.graphic.width / 2,
    y: xy.y - this.graphic.height / 2
  };
};

var chart = Highcharts.chart('container', {

  title: {
    text: 'Controlling elements by dragging'
  },

  chart: {
    events: {
      load: function() {
        Highcharts.each(this.annotations, function(annotation) {
          // showControlPoints/hide
          annotation.setControlPointsVisibility(true);
        });
      }
    }
  },

  annotations: [{
    labels: [{
      point: 'b',
      format: '{y:.2f}',
      padding: 10,
      controlPoints: [{
        symbol: 'square',
        positioner: function(target) {
          if (!target.graphic.placed) {
            return {
              x: 0,
              y: -9e7
            };
          }

          return {
            x: target.graphic.alignAttr.x + target.graphic.width - this.graphic.width / 2,
            y: target.graphic.alignAttr.y + target.graphic.height - this.graphic.height / 2
          };
        },

        // TRANSLATE POSITION WITHOUT CHANGING THE ANCHOR
        events: {
          drag: function(e, target) {
            var translation = this.mouseMoveToTranslation(e),
              newPadding = Math.max(10, target.options.padding + translation.x);

            target.options.padding = newPadding;
            target.graphic.attr({
              padding: newPadding
            });
            target.annotation.redraw(false);
          }
        }
      }],
      overflow: 'none',
      crop: true
    }]
  }],
  tooltip: {
    enabled: false
  },
  series: [{
    data: [
      1, 2, 3, {
        y: 4,
        id: 'a'
      },
      5, {
        y: 6,
        id: 'b'
      },
      2, 3, 4, 5, 6, 7, 8, 3, 2, 4, {
        y: 8,
        id: 'c'
      },
      4, 4, 3
    ]
  }]
});