score:1

Accepted answer

You can write your own function to move labels.

Get bbox of the label element and check if it is inside the container (>= 0 or <= container's width). One caveat in getting bbox - the labels are rotated, so it means that the bbox you get has params of the element which is not rotated yet - in your case when the rotation does not change text width a lot - you can add some pixels to offset that difference.

function moveLabels() {
  const ticks = this.xAxis[0].ticks;
  const safeDistance = 10;

  Object.keys(ticks).forEach(value => {
    const label = ticks[value].label;
    const bbox = label.getBBox(true);

    if (bbox.y >= 0) {
      if (bbox.x - safeDistance < 0) {
        label.attr({
          x: label.xy.x + Math.abs(bbox.x - safeDistance)
        })
      } else if (bbox.x + bbox.width + safeDistance > this.chartWidth) {
        label.attr({
          x: label.xy.x - (bbox.x + bbox.width + safeDistance - this.chartWidth)
        });
      }
    }
  })
}

Move labels on load/redraw events:

  chart: {
 polar: true,
    type: 'line',
    events: {
      load: moveLabels,
      redraw: moveLabels
    }
  },

example: https://jsfiddle.net/nd5fob5d/


Related Query

More Query from same tag