html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  var chart = anychart.polar();

​

  chart.padding(0);

​

  // grid settings

  chart.yGrid(true).xGrid(true);

​

  chart.xAxis(true);

  chart.yAxis(true);

​

  chart.listen('mouseMove', function (event) {

    if (event.target.paginator) {

      return;

    }

​

    var interactivity = this.interactivity();

​

    if (interactivity.hoverMode() !== 'bySpot') {

      return;

    }

​

    var spotRadius = interactivity.spotRadius();

​

    var clientX = event.clientX;

    var clientY = event.clientY;

​

    var container = $(this.container().getStage().container());

    var containerOffset = container.offset();

    var scrollLeft = $(document).scrollLeft();

    var scrollTop = $(document).scrollTop();

​

    var x = clientX - (containerOffset.left - scrollLeft);

    var y = clientY - (containerOffset.top - scrollTop);

​

    if (this.getType() === 'polar' || this.getType() === 'radar') {

      var dataBounds = this.xAxis().getRemainingBounds();

      var radius = Math.min(dataBounds.width, dataBounds.height) / 2;

      var cx = Math.round(dataBounds.left + dataBounds.width / 2);

      var cy = Math.round(dataBounds.top + dataBounds.height / 2);

​

      var clientRadius = Math.sqrt(

        Math.pow(cx - x, 2) + Math.pow(cy - y, 2)

      ); // eslint-disable-line no-restricted-properties

​

      if (clientRadius > radius) {

        if (this.spotCircle) this.spotCircle.parent(null);

        if (this.centerLine) this.centerLine.clear();

        if (this.leftLine) this.leftLine.clear();

        if (this.rightLine) this.rightLine.clear();

        return null;

      }

​

      if (!this.spotCircle) {

        this.spotCircle = anychart.graphics

          .circle()

          .radius(spotRadius)

          .zIndex(1000)

          .stroke('black .5');

      }

​

      if (!this.spotCircle.hasParent()) {

        this.spotCircle.parent(this.container());

      }

​

      this.spotCircle.centerX(x).centerY(y);

​

      if (!this.centerLine) {

        this.centerLine = this.container()

          .path()

          .zIndex(1000)

          .stroke('black .2')

          .disablePointerEvents(true);

      }

      this.centerLine.clear().moveTo(cx, cy).lineTo(x, y);

​

      var dx;

      var dy;

      var angle;

      var leftSideRatio;

      var rightSideRatio;

      if (clientRadius - spotRadius >= 0) {

        dx = cx - x;

        dy = cy - y;

​

        angle = Math.atan(dx / dy);

        if (angle <= 0) angle += Math.PI;

        if (dx < 0 || (angle === Math.PI && dy > 0)) angle += Math.PI;

        angle += this.startAngle();

​

        var dAngle = Math.asin(spotRadius / clientRadius);

        var leftSideAngle = angle + dAngle;

        var rightSideAngle = angle - dAngle;

​

        leftSideRatio = 1 - leftSideAngle / (Math.PI * 2);

        rightSideRatio = 1 - rightSideAngle / (Math.PI * 2);

​

        var leftA =

          ((this.startAngle() - 90 + 360 * leftSideRatio) * Math.PI) /

          180;

        var rightA =

          ((this.startAngle() - 90 + 360 * rightSideRatio) * Math.PI) /

          180;

​

        if (!this.leftLine) {

          this.leftLine = this.container()

            .path()

            .zIndex(1000)

            .stroke('black .2');

        }

        this.leftLine

          .clear()

          .moveTo(cx, cy)

          .lineTo(

            cx + radius * Math.cos(leftA),

            cy + radius * Math.sin(leftA)

          );

​

        if (!this.rightLine) {

          this.rightLine = this.container()

            .path()

            .zIndex(1000)

            .stroke('black .2');

        }

        this.rightLine

          .clear()

          .moveTo(cx, cy)

          .lineTo(

            cx + radius * Math.cos(rightA),

            cy + radius * Math.sin(rightA)

          );

      } else {

        if (this.leftLine) this.leftLine.clear();

        if (this.rightLine) this.rightLine.clear();

      }

    } else {

      var bounds = this.getPixelBounds();

      if (!bounds.contains({ x: x, y: y })) {

        if (this.spotCircle) this.spotCircle.parent(null);

        return null;

      }

​

      if (!this.spotCircle) {

        this.spotCircle = anychart.graphics

          .circle()

          .radius(spotRadius)

          .zIndex(1000)

          .stroke('black .5');

      }

​

      if (!this.spotCircle.parent()) {

        this.spotCircle.parent(this.container());

      }

​

      this.spotCircle.centerX(x).centerY(y);

    }

  });

  chart.listen('mouseOut', function () {

    if (!(this.getType() === 'polar' || this.getType() === 'radar')) {

      if (this.spotCircle) this.spotCircle.parent(null);

    }

  });

​

  chart.interactivity({ hoverMode: 'by-spot', spotRadius: 40 });

​

  var s1 = chart.line([

    [0, 1],

    [1, 2],

    [2, 3],

    [3, 4],

    [4, NaN],

    [0, 6],

    [1, 7],

    [2, 8],

    [3, NaN],

    [4, 10],

    [0, 11],

    [1, 12],

    [2, NaN],

    [3, 14],

    { x: 4, value: 15, state: 'selected' },

    [0, 16],

    [1, NaN],

    [2, 18],

    [3, 19],

    [4, 20]

  ]);

​

  var s2 = chart.marker([

    [0.5, 1],

    [1.5, 2],

    [2.5, 3],

    [3.5, 4],

    [4.5, NaN],

    [0.5, 6],

    { x: 1.5, value: 7, state: 'selected' },

    [2.5, 8],

    [3.5, NaN],

    [4.5, 10],

    [0.5, 11],

    [1.5, 12],

    [2.5, NaN],

    [3.5, 14],

    [4.5, 15],

    [0.5, 16],

    [1.5, NaN],

    [2.5, 18],

    [3.5, 19],

    [4.5, 20]

  ]);

​

  s1.labels().enabled(true);

  s2.labels().enabled(true);

​

  s1.markers(true);

  s1.hovered()

    .markers()

    .fill('yellow')

    .size(s1.hovered().markers().size() + 2)

    .type('star10');

​

  s2.hovered().fill('yellow');

  s2.selected()

    .size(s2.hovered().size() + 2)

    .type('star10');

​

  chart.container('container').draw();

});