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>
<script>
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,
}
},
},
...