Chartjs-Chart.js radar chart ticks are hidden behind the graph

by

2👍

✅

You can define the scale.ticks.z option as as documented here.

scale: {
  ticks: {
    ...
    z: 1
  }
},

z-index of tick layer. Useful when ticks are drawn on chart area. Values <= 0 are drawn under datasets, > 0 on top.

Please have a look at your amended code below:

const chart = new Chart('myChart', {
  type: 'polarArea',
        data: {
    labels: ['Silver', 'Palladium', 'Platinum', 'Gold'],
    datasets: [
      {
        label: 'Points',
        pointRotation: 45,
        backgroundColor: ['grey', 'green', 'blue', 'yellow'],
        data: [3, 4, 8, 9],
        borderWidth: 0,
        pointBackgroundColor: 'rgba(0, 0, 0, 1)'
      }
    ]
  },
  options: {
    responsive: true,
    animation: {
      animateRotate: true
    },
    layout: {
      padding: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0
      }
    },
    scale: {
      ticks: {
        fontColor: '#000000',
        mirror: true,
        z: 1
      }
    },
    legend: {
      position: 'top'
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="100"></canvas>

Leave a comment