Chart.Js radar - hide label numbers

Question

I want to remove the displayed numbers on the radar from the library Chart.js (v3.7).

I've already tried to set the legend option to display:false

plugins: {
    legend: {
        display: false
    }
}

But it only hide the dataset label. If someone have the solution for it, I would be grateful to him.

score 3 · Accepted Answer · answered Jan 04 '22 at 18:58

The labels on the outside can be removed by setting the display option to false in options.scales.r.pointLabels.display. The tick marks in the middle can be hidden by setting the display options to false in: options.scales.r.ticks.display

const options = {
  type: 'radar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderColor: 'orange'
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderColor: 'pink'
      }
    ]
  },
  options: {
    scales: {
      r: {
        pointLabels: {
          display: false // Hides the labels around the radar chart 
        },
        ticks: {
          display: false // Hides the labels in the middel (numbers)
        }
      }
    }
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script>
</body>

Work perfectly, problem solved. thanks ! – PaulCrp Jan 04 '22 at 22:18 — PaulCrp, Jan 04 '22 at 22:18

Chart.Js radar - hide label numbers

1 Answers1