CODEWITHSUNDEEP
javascriptchart.js
PaulCrp
PaulCrp

Reputation: 978

Chart.Js radar - hide label numbers

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.

Upvotes: 1

Views: 1722

Answers (1)

LeeLenalee
LeeLenalee

Reputation: 31371

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>

Upvotes: 4

Related Questions