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 %}
Advertisement
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);<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>