CODEWITHSUNDEEP
javascriptchart.js
Ramon Bosch
Ramon Bosch

Reputation: 33

Omit 0 value points on chart.js radar

enter image description here

Is there a way to omit 0 value points on a radar chart from chart.js to prevent the border from collapsing in the center while still showing the axis of the 0 value points?

Attached is a picture of what I'd like to achieve (left is current chart, right is what I'm looking for).

Thank you!

Edit: attached is a minimal reproductible example, a plain chart.js radar chart.

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],
  }]
};

const config = {
  type: 'radar',
  data: data,
  options: {
    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>

Upvotes: 2

Views: 1100

Answers (1)

TechySharnav
TechySharnav

Reputation: 5084

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>

Upvotes: 3

Related Questions