Label padding for pointLabels

[sashankQ]

I have been trying to generate a radar chart and the labels are covered with the graph. please suggest a solution to overcome such issue

[etimberg]

@sashankQ do you have a fiddle that reproduces this?

[jhadenfeldt]

Here is a fiddle that has the same issue: https://jsfiddle.net/ks5h2syL/

Any way to increase the distance of the label ("anger" in the screenshot or the months in the fiddle) from the graph would probably OK as a solution.

[filipesperandio]

I am also digging to find how to accomplish this

[Uranbold]

Also having this issue. How to resolve this?

[filipesperandio]

This is very specific to my case, but I believe you can adapt:

  function renderLabels(chart) {
    var scale = chart.scale;
    var ctx = scale.ctx;
    var opts = scale.options.pointLabels;

    ctx.fillStyle = opts.fontColor || DARK;
    ctx.font = opts.fontSize + "px " + opts.fontFamily;
    ctx.textAlign =  "center";

    for(var i = 0; i < data.axisLabels.length; i++) {
      var outerDistance = scale.getDistanceFromCenterForValue(scale.max);
      var pointLabelPosition = scale.getPointPosition(i, outerDistance);

      var width = $(canvas).width();
      var xCenter = width / 2;
      if(pointLabelPosition.x > xCenter) {
        ctx.textAlign = "left";
        pointLabelPosition.x = pointLabelPosition.x + (0.0175 * width);
      } else if(pointLabelPosition.x < xCenter) {
        ctx.textAlign = "right";
        pointLabelPosition.x = pointLabelPosition.x - (0.014 * width);
      } else {
        ctx.textAlign = "center";
      }

      var height = $(canvas).height();
      var yCenterBase = (height / 2) + 30;
      if(i === 0) {
        pointLabelPosition.y = pointLabelPosition.y - (0.095 * height);
        ctx.textAlign = "center";
      } else if(pointLabelPosition.y > yCenterBase) {
        pointLabelPosition.y = pointLabelPosition.y + (0.02 * height);
      } else {
        pointLabelPosition.y = pointLabelPosition.y - (0.03 * height);
      }

      ctx.fillText(data.axisLabels[i], pointLabelPosition.x, pointLabelPosition.y);
    }

    ctx.restore();
  }

add this callback into a beforeDraw plugin:

  new Chart(canvas, {
    ... 
    plugins: [{ beforeDraw: renderLabels }]
  });