x axis label word wrap in high charts for radar chart

Question

Im trying to adjust the X axis label for Radar chart in highchart and I couldnt fix the 2 labels. when its on small width screen,some labels are not seen completely. attached the screenshot img

Here is the fiddle link:

https://jsfiddle.net/xs9zb3f6/6/enter code here

can someone help please? I want either the labels to be aligned further inside radar chart or word wrap so that when its on small screen it does not cut the word.

morganfree morganfree · Accepted Answer · 2017-03-22T14:05:45

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/

x axis label word wrap in high charts for radar chart

1 Answers