impossible to remove scale from radar chart (chart.js)

Question

I have been trying all day to remove the scale of a radar chart in chart js. Although the chart works just fine, nothing seems to be working to remove the scale. Unfortunately the documentation is not that helpful for that issue. here is what the graph looks like. The scale looks the same everytime. Clearing cache from browser does not help either. here is the code for the chart:

function setChart(){

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
                        type: 'radar',
                        data: {
                            labels: ['classA','classB','classC','classD'],
                            datasets: [{
                                label: 'revenue proportion per class',
                                data: [0.25, 0.3, 0.15, 0.3],
                                backgroundColor: [
                                    'rgba(255, 99, 132, 0.2)',

                                ],
                                borderColor: ['rgba(255, 99, 132, 0.2)'],

                                borderWidth: 5

                            },
                                {

                             label: 'proportion of item quantity per class',
                                data: [0.25, 0.3, 0.15, 0.3],
                                    backgroundColor: [

                                    'rgba(54, 162, 235, 0.2)',


                                ],
                                    borderColor: ['rgba(54, 162, 235, 0.2)'],
                                    borderWidth: 5
                                }
                            ],

and the options:

options: {
                                scale: {

                                    ticks:{ 
                                           label: false,
                                            min: 0,
                                            max: 1,
                                            fixedStepSize: 4,
                                            showLabelBackdrop: false,
                                            fontSize: 0,
                                            color: "#eee"
                                    }
                                }

options: {
                                scale: {

                                    ticks:{ 
                                           display: false
                                    }
                                }

I am doing something stupid? Any help on that would be welcomed!

user_11254558 · Answer

options: {
     scales: {
         r: {
            pointLabels: {
                display: false // Hides the labels around the radar chart
            },
            ticks: {
                display: false // Hides the labels in the middel (numbers)
            }
        }
    }
}

user_3775731 · Answer

The linear radial axis documentation lists four configuration options (as of v2.9.3):

angleLines
gridLines
pointLabels
ticks

Each of these is an object that supports the display property. Specifying display: false in all four objects removes the scale.

options: {
  scale: {
    angleLines: {
      display: false
    },
    gridLines: {
      display: false
    },
    pointLabels: {
      display: false
    },
    ticks: {
      display: false
    },
  }
}

Here's a working example:

new Chart('myChart', {
  type: 'radar',
  data: {
    labels: ['A', 'B', 'C', 'D'],
    datasets: [{
      label: 'Series 1',
      data: [0.25, 0.3, 0.15, 0.3],
    }]
  },
  options: {
    scale: {
      angleLines: {
        display: false
      },
      gridLines: {
        display: false
      },
      pointLabels: {
        display: false
      },
      ticks: {
        display: false
      },
    }
  }
});

impossible to remove scale from radar chart (chart.js)

2 Answers