ChartJS radar

by simoncoggins

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

JavaScript

var data = {
    // Change number of labels to test label positioning variation:
    // Including a multi-line label for testing
    labels: ["Eating", ["Drinking", "water"], "Sleeping", "Designing", "Coding", "Cycling"],
    datasets: [
        {
            label: "1",
            data: [65, 59, 90, 81, 56, 55],
            backgroundColor: 'rgba(153, 153, 255, 0.1)'
        },
        {
            label: "2",
            data: [28, 48, 40, 19, 96, 27],
            backgroundColor: 'rgba(255, 153, 153, 0.1)'
        }
    ]
};
var ctx = document.getElementById('myChart').getContext('2d');
var options = {
    scale: {
        pointLabels: {
            // Test label size variation:
	          //fontSize: 50		
        }
    }
};
var myRadarChart = new Chart(ctx, {
    type: 'radar',
    data: data,
    options: options,
});


document.getElementById("myChart").onclick = function (e) {
		    var helpers = Chart.helpers;
        var scale = myRadarChart.scale;
        var opts = scale.options;
        var tickOpts = opts.ticks;
				
        // Position of click relative to canvas.
        var mouseX = e.offsetX;
        var mouseY = e.offsetY;
        
        var labelPadding = 5; // number pixels to expand label bounding box by
        
        // get the label render position
        // calcs taken from drawPointLabels() in scale.radialLinear.js
        var tickBackdropHeight = (tickOpts.display && opts.display) ?
            helpers.valueOrDefault(tickOpts.fontSize, Chart.defaults.global.defaultFontSize)
            + 5: 0;
        var outerDistance = scale.getDistanceFromCenterForValue(opts.ticks.reverse ? scale.min : scale.max);
        for (var i = 0; i < scale.pointLabels.length; i++) {
            // Extra spacing for top value due to axis labels
            var extra = (i === 0 ? tickBackdropHeight / 2 : 0);
            var pointLabelPosition = scale.getPointPosition(i, outerDistance + extra + 5);
            
            // get label size info.
        ...