• Home
  • Jobs
  • Courses
  • Questions
  • Teachers
  • For business
  • ES/EN

0

9
Views
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 %}
about 1 month ago ·

Juan Pablo Isaza

1 answers
Answer question

0

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);
<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>

about 1 month ago · Juan Pablo Isaza Report
Answer question
Find remote jobs
Loading

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post job Plans Our process Sales
Legal
Terms and conditions Privacy policy
© 2022 PeakU Inc. All Rights Reserved.