[Chartjs]-Omit 0 value points on chart.js radar

by

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>

Leave a comment