Chart.js2 Radar, how to configure the label padding/spacing?

user_149080 0
Viewed 3561

I have the following Radar chart using Chart.js v2.

radar chart

My configuration:

legend: false,
scale: {
    pointLabels :{
        fontSize: 16,
        fontStyle: "bold",
    }
}

The problem here is the "Communication" label has 0 padding between the label and the number 100. How can I configure this padding and/or fix this issue?

chart.js2 react-chartjs chart.js charts
7 Answers

I use chart.js 2.6.0. I suffered from the same problem as you. I use only the radar type chart and amended as follows.

// chart.js v2.6.0
function adjustPointPositionForLabelHeight(angle, textSize, position) {
  console.log(position.y);
  if (angle === 90 || angle === 270) {
   position.y -= (textSize.h / 2);
  } else if (angle > 270 || angle < 90) {
   position.y -= textSize.h;
  position.y -= 7; //add source 
  }
 }

user_106839690

Whenever my PR will be merged, pointLabels.padding option will be added ;)

user_32166730

The PR request mentioned by @ketysek was finally merged as of March 2021.

pointLabels.padding

options: {{
  scale: {
      pointLabels: {
        padding: 10, // Enter number here
      },
}};
user_123763520

Usually problem occurs with the first pointLabel when it is single liner you can add the callback in options as follows

pointLabels: {
      callback: function (label, index) {
        /* Hack to add spacing between first pointLabel item and radar graph */
        return index == 0 && label.length == 1? [''].concat(label): label;
      }

Making pointLabel multi line text solves the problem.

EDIT: Current version of chartjs is 2.7.3. Upcoming version will probably solves this problem.

user_49454470

var pointLabelPosition = scale.getPointPosition(i, outerDistance + 5);

-> var pointLabelPosition = scale.getPointPosition(i, outerDistance + 15);

user_136715710
Related