Chart js how to remove numbers on circles of polar chart

Question

i was using Prime react polar chart which is built on chartjs version 3.0 i was unable to remove the numbers on polar chart my options variable is

const config = {
  plugins: {
    legend: {
      position: "top",
      align: "center",
      display: false,
      labels: {
        color: "#495057",
        font: {
          fontFamily: "Josefin Sans",
          fontSize: 8
        },
        legend: {
          position: "start",
          title: {
            display: true,
            text: "Legend Title"
          }
        },
        position: "center"
      }
    }
  },
  scale: {
    r: {
      min: 0,
      max: 100,
      title: {
        align: "left"
      },
      grid: {
        color: "#ebedef"
      },
      ticks: {
        stepSize: 10
      }
    }
  },
};

can any one please help me how to remove the numbers

score 0 · Answer 1 · answered Sep 08 '21 at 09:25

You have to set ticks to display false:

const options = {
  type: 'polarArea',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]
    }]
  },
  options: {
    scales: {
      r: {
        ticks: {
          display: false
        }
      }
    }
  }
}

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.5.1/chart.js"></script>
</body>

Chart js how to remove numbers on circles of polar chart

1 Answers1