Chartjs-Move data number position above chart in chart.js

by

0👍

✅

I can configurre ticks in order to:

  1. to draw them on top (z option)
  2. to set the stepSize to 20
const ctx = document.getElementById('myChart').getContext('2d');
  const chart = new Chart(ctx, {
  type: 'polarArea',
  data: {
    labels: ['Numbers', 'Measurements', 'Statistics', 'Geometry', 'Algebra'],
    datasets: [{
      data: [15, 59, 75, 29, 50]
    }],
  },
  options: {
    aspectRatio: 2,
    scales: {
      r: {
      beginAtZero: 0,
      ticks: {
        backdropColor: 'transparent',
        color: 'black',
        z: 999,
        stepSize: 20
      },
      pointLabels: {
        display: true
      },
            grid: {
               display: true
            }
      }
    },
    plugins: {
      legend: false
    }
  }
});
.myChartDiv {
  max-width: 600px;
  max-height: 400px;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<html>
  <body>
    <div class="myChartDiv">
      <canvas id="myChart" width="600" height="400"/>
    </div>
  </body>
</html>

Leave a comment