[Chartjs]-Chartjs: How to offset ticks on radarchart?

by

1👍

✅

You need to do two things.

  1. To show the 0 tick add this to your options.scale object:
ticks: {
  beginAtZero: true,
  min: -0.001,
}

Note that if you set min at zero it will not work. This is how the radar tick engine works.

  1. To add an offset to the label override the tick render callback inside the same object, like this:
ticks: {
  callback: (value) => `${value}           `,
}

Note the extra spaces at the end. This is the padding. See the sample below

var options = {
  responsive: false,
  maintainAspectRatio: true,
  scale: {
    ticks: {
      beginAtZero: true,
      callback: (value) => `${value}           `,
      min: -0.001,
      max: 5
    }
  }
};

var dataLiteracy = {
  labels: [
    "1", "2", "3", "4", "5"
  ],
  datasets: [{
    label: "Literacy",
    backgroundColor: "rgba(179,181,198,0.2)",
    borderColor: "rgba(179,181,198,1)",
    pointBackgroundColor: "rgba(179,181,198,1)",
    pointBorderColor: "#fff",
    pointHoverBackgroundColor: "#fff",
    pointHoverBorderColor: "rgba(179,181,198,1)",
    data: [
      2, 3, 4, 1, 2
    ]
  }]
};

var ctx = document.getElementById("canvas");
var myRadarChart = new Chart(ctx, {
  type: 'radar',
  data: dataLiteracy,
  options: options
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script>

<canvas id="canvas" height="400" width="400"></canvas>

0👍

Try this in the chart options:

 ticks: {
    callback: (value) => {
      return '${value}';
    },

Leave a comment