Search code examples
chartschart.jschart.js2react-chartjs

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

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?

Solution

  • 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:enter image description here

    Make it auto if you wish:

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