Chartjs-Chart.Js radar – hide label numbers

by

3👍

✅

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>

Leave a comment