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

Question

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

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?

score 7 · Accepted Answer · answered Sep 14 '17 at 11:17

7

Spent an hour and still can't find the proper label padding options.

My workaround is padding the labels with newlines and spaces:

['行業競爭情況', ''],
['擁有專利', ''],
'     成本控制',
'     現金流',
['', '回本期'],
['', '營運能力'],
['', '行業潛力'],
'行業網絡     ',
'團隊經驗     ',
['計劃的完整性', ''],

The outcome is acceptable:

Make it auto if you wish:

scale: {
  pointLabels: {
    callback: function (label, i, labels) {}...

answered Sep 14 '17 at 11:17

CHAN

1,518
18
16

Have you found a better solution by any chance? – Filipe Esperandio Sep 17 '18 at 14:09
Nope. Didn't use the lib for a while. – CHAN Sep 24 '18 at 06:09
Cool... ended up using `pointLabels: { display: false }` and making my own render logic attached as a plugin on `afterDraw`. – Filipe Esperandio Sep 25 '18 at 17:41

score 3 · Answer 2 · answered Feb 25 '18 at 21:14

I have the same problem as described in the question and also was unable to find a solution using known chart options.

However, here is another workaround to achieve a behaviour similar to the desired padding (although not exactly):

ticks: {
    display: false,
    max: 11, // notice how this is +1 more than what you actually want
},

gridLines: {
    display: true,
    color: [ 
        "#dddddd", "#dddddd", "#dddddd", "#dddddd", "#dddddd",
        "#dddddd", "#dddddd", "#dddddd", "#dddddd", "#dddddd",
        "transparent" ], // notice how the last (additional) line is set to transparent
},

angleLines: {
    display: true,
    color: "#dddddd",
},

The idea is to add one additional grid line with a transparent color. While this does not cause any padding between the pointLabels and the angleLines, it does cause there to be one gridLine worth of space between the label and the next gridLine. To me, this at least looks a little better.

Note that this is only feasible if you do not need to display ticks (or if you are ok with your scale showing one additional tick value that you don't actually use).

score 2 · Answer 3 · answered Jun 02 '21 at 16:13

2

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

pointLabels.padding

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

answered Jun 02 '21 at 16:13

Davi Mello

349
4
6

score 1 · Answer 4 · answered Nov 21 '18 at 06:03

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 
  }
 }

score 1 · Answer 5 · answered Dec 15 '18 at 15:20

1

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

answered Dec 15 '18 at 15:20

ketysek

1,159
1
16
46

hamza-jutt · Answer 6 · 2019-01-03T10:30:13.237

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.

score 0 · Answer 7 · answered Jun 03 '20 at 09:39

0

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

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

answered Jun 03 '20 at 09:39

k n

1

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

7 Answers7