Chartjs-ChartJS (Radar) – Set base tick position for "0" value

by

0👍

✅

Easyest way to achieve this is by setting your min to the negative of your stepSize like so:

const options = {
  type: 'radar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: 'Dataset 1',
        data: [10, 99, 0, 76, 0, 0],
        borderColor: 'pink'
      },
      {
        label: 'Dataset 2',
        data: [99, 35, 0, 0, 54, 0],
        borderColor: 'orange'
      }
    ],
  },
  options: {
    scales: {
      r: {
        min: -33.333,
        max: 99,
        beginAtZero: true,
        angleLines: {
          display: false
        },
        ticks: {
          display: false,
          stepSize: 33.333
        }
      }
    }
  }
}

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>

Leave a comment