How do I remove the ticks or inner circles of my polar area chart Chart.js

I have written the code for my chart in Jquery and I am using the chart to display data on my Django Web Page, I want to remove the inner circles which I think are called ticks along with the small numbers that are displayed with them. I have tried to use the

ticks:{ display: false, }

and

scale:{ display: false, }

but have had no luck with either I am not sure how to do it.

Code for Chart:

            new Chart("chart_{{ i.pk }}_{{ t.pk }}", {
              type: "polarArea",
              data: {
                labels: labels_{{ t.pk }},
                datasets: [{
                  fill: true,
                  pointRadius: 1,
{#                  borderColor: backgroundColors_{{ t.pk }} ,#}
                  backgroundColor: backgroundColors_{{ t.pk }} ,
                  data: totals_{{ i.pk }}_{{ t.pk }}_arr,
                }]
              },
              options: {
                responsive: false,
                maintainAspectRatio: true,
                plugins: {
                    legend: {
                        display: false,
                    },
                    scale: {
                        ticks: {
                            display: false,
                        },
                        gridLines: {
                                display: false,
                                lineWidth: 7,
                                tickMarkLength: 30// Adjusts the height for the tick marks area
                        },
                        
                    },
                    title: {
                        display: false,
                        text: 'Chart.js Polar Area Chart'
                    }
                }
              }
            });

        {% endfor %}
    {% endfor %}
{% endblock %}

JavaScript
​x
 
            new Chart("chart_{{ i.pk }}_{{ t.pk }}", {
              type: "polarArea",
              data: {
                labels: labels_{{ t.pk }},
                datasets: [{
                  fill: true,
                  pointRadius: 1,
{#                  borderColor: backgroundColors_{{ t.pk }} ,#}
                  backgroundColor: backgroundColors_{{ t.pk }} ,
                  data: totals_{{ i.pk }}_{{ t.pk }}_arr,
                }]
              },
              options: {
                responsive: false,
                maintainAspectRatio: true,
                plugins: {
                    legend: {
                        display: false,
                    },
                    scale: {
                        ticks: {
                            display: false,
                        },
                        gridLines: {
                                display: false,
                                lineWidth: 7,
                                tickMarkLength: 30// Adjusts the height for the tick marks area
                        },
                        
                    },
                    title: {
                        display: false,
                        text: 'Chart.js Polar Area Chart'
                    }
                }
              }
            });
​
        {% endfor %}
    {% endfor %}
{% endblock %}
​

Answer

In v3 the radialLinear scale is not configured in the scale object anymore but also in the scales namespace with namespace r for radial. Also it shouldn’t be configured in the plugins section but in the root of the the options object. And as last the gridLines has been renamed to grid.

For all changes between V2 and V3 please read the migration guide

Live example:

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 // Remove vertical numbers
        },
        grid: {
          display: false // Removes the circulair lines
        }
      }
    }
  }
}

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

JavaScript
 
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 // Remove vertical numbers
        },
        grid: {
          display: false // Removes the circulair lines
        }
      }
    }
  }
}
​
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>

JavaScript
 
<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>

Advertisement

Answer