Chartjs-Chart.js doughnut-like radar chart (no anglelines in the center/empty center)

by

0👍

You could try to achieve something like this by making the ticks scale negative (min: -2) and then using the borderDash configuration for angleLines. However, if the size of your chart changes, you will also need to adjust the 4th array number in borderDash accordingly.

The below code should render something like this for my screen size:

enter image description here

radarChart = new Chart('radarCanvas', {
    "type": "radar",
    "data": {
        "labels": [
            "Management & Leadership",
            "Education & Teaching",
            "Research",
            "Impact",
            "Team"
        ],
        "datasets": [{
            "label": "4-3-21",
            "backgroundColor": "rgb(231,74,59,0.5)",
            "hoverBackgroundColor": "rgb(231,74,59,0.8)",
            "borderColor": "rgb(231,74,59)",
            "data": [
                2.7,
                3.8,
                4.6,
                2.2,
                3.2
            ]
        }]
    },
    "options": {
        "responsive": true,
        "maintainAspectRatio": false,
        "scale": {
            "angleLines": {
                "color": "rgb(90,92,105)",
                "lineWidth": 1,
                "borderDash": [
                    0,
                    0,
                    0,
                    28,
                    150,
                    250
                ]
            },
            "gridLines": {
                "color": "rgb(90,92,105)"
            },
            "ticks": {
                "max": 10,
                "min": -2,
                "stepSize": 2,
                "callback": function(tickValue, index, ticks) {
                    if (tickValue >= -0) {
                        return tickValue
                    }
                    return null
                },
            },
            "max": 10,
            "min": -4,
            "beginAtZero": false
        }
    }
})
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<canvas id="radarCanvas" width="400" height="400"></canvas>

Leave a comment