2👍
✅
You can map
the data array to replace all 0
values with null
and then set
spanGaps: true
in the options, which will skip missing data and connect the line to next point.
const labels = [
'O', 'D', 'M', 'L', 'S', 'A', 'P', 'C', 'I', 'F'
];
var data = {
labels: labels,
datasets: [{
label: '01',
data: [0, 2, 1, 3, 1, 0, 0, 1, 3, 2].map(n => n === 0 ? null : n),
}]
};
const config = {
type: 'radar',
data: data,
options: {
spanGaps: true,
scales: {
r: {
min: 0,
max: 3,
ticks: {
stepSize: 1,
display: false,
}
},
},
},
};
const myChart = new Chart(
document.getElementById('myChart'),
config
);
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<canvas id="myChart"></canvas>
Source:stackexchange.com