JSFiddle - React, Tailwind, and code Playground

by FungLee

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<canvas id="canvas"></canvas>
<div id="demo">123</div>
<button onclick="myFunction()">123</button>

JavaScript

var test = function(chart, options) {
    console.log(chart, options);
    let scale = chart.scale;
    let opts = options;
    var point = [];

    for (var i = getValueCount(scale) - 1; i >= 0; i--) {
      var outerPosition = scale.getPointPosition(i, outerDistance);
      var pointLabelPosition = scale.getPointPosition(i, outerDistance + 5);
      point.push({
        x: pointLabelPosition.x,
        y: pointLabelPosition.y
      });


      ctx.save();
      ctx.fillStyle = 'rgba(34, 23, 31, 42)'; // new fill colour here
      var size = scale._pointLabelSizes[i];
      fillRoundRect(ctx, pointLabelPosition.x - (size.w / 2), pointLabelPosition.y - (size.h / 2), size.w, size.h, 15);
      ctx.restore();
    }
    console.log(point);
  }



  let ctx = document.querySelector('#canvas').getContext('2d');
  console.log(ctx);
  let chart = new Chart(ctx, {
    responsive: true,
    type: 'radar',
    data: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
      datasets: [{
        label: 'RADAR 1',
        data: [3, 1, 6, 4, 7, 5],
        backgroundColor: ['#eee', 'red'],
        borderColor: 'rgba(0,119,204, 0.5)'
      }, {
        label: 'RADAR 2',
        data: [4, 2, 3, 6, 1, 7],
        backgroundColor: 'rgba(255, 0, 0 ,0.2)',
        borderColor: 'rgba(255, 0, 0 ,0.5)'
      }]
    },
    options: {
      scale: {
        pointLabels: {
          fontSize: 20,
          fontColor: '#ff0000',
          callback: function(pointLabel, index, labels) {
            // Return string here. String must be defined
            return pointLabel + ''
          }
        },
        gridLines: {
          //color: "rgba(0,0,0,1)"
          display: false
        },
        ticks: {
          max: 10,
          display: false,
        }
      },
    },
    plugins: [{
      afterDraw: test,
    }],
  });




  console.log(chart);
  let scale = chart.scale;
  var opts = scale.options;
  var outerDistance =...