I have used this radar chart.js
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
var options = {
elements: {
line: {
borderWidth: 3
}
},
scales: {
r: {
grid: {
lineWidth: 4
},
angleLines: {
lineWidth: 6
},
suggestedMin: 0,
suggestedMax: 100,
},
},
};
var ctx = document.getElementById('myChart');
var ChartData = {
labels: [
'Eating',
'Drinking',
'Sleeping',
'Designing',
'Coding',
'Cycling',
'Running'
],
datasets: [{
label: 'My First Dataset',
data: [65, 59, 10, 21, 56, 55, 40],
fill: true,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgb(255, 99, 132)',
pointBackgroundColor: 'rgb(255, 99, 132)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(255, 99, 132)'
}, {
label: 'My Second Dataset',
data: [28, 48, 40, 19, 36, 27, 10],
fill: true,
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgb(54, 162, 235)',
pointBackgroundColor: 'rgb(54, 162, 235)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(54, 162, 235)'
}]
};
var myRadar = new Chart(ctx, {
type: 'radar',
data: ChartData,
options: options
});
</script>
I want to set the stepSize for ticks, so I included this in r section
var options = {
elements: {
line: {
borderWidth: 3
}
},
scales: {
r: {
grid: {
lineWidth: 4
},
angleLines: {
lineWidth: 6
},
suggestedMin: 0,
suggestedMax: 100,
},
ticks: {
stepSize: 20, // the number of step
},
},
};
but it doesn't work and gives th fllowing error
Cannot determine type of '' axis. Please provide 'axis' or 'position' option.
how can i set stepSize for radar chart v.4.2.1?
Ticks object should be inside r
var options = {
elements: {
line: {
borderWidth: 3
}
},
scales: {
r: {
grid: {
lineWidth: 4
},
angleLines: {
lineWidth: 6
},
suggestedMin: 0,
suggestedMax: 100,
ticks: {
stepSize: 20
}
}
},
};