Using JS – how do I make a chart like this?

I’ve been trying to get this made using Chart.js or even ApexCherts – but haven’t been able to do it. The closest this looks like is a Polar Chart, this is what I have so far:

This is my code:

 <div class="my-4">
                <canvas id="myRadarChart"></canvas>
            </div>

 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
{{-- <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-labels-dv"></script> --}}
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
<script src="https://unpkg.com/chart.js-plugin-labels-dv/dist/chartjs-plugin-labels.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const chartDataObj = @json($responseData['chartData']);

        const chartData = {
            labels: chartDataObj.labels,
            datasets: [{
                    label: 'Personal Data',
                    data: chartDataObj.personalData,
                    fill: true,
                    backgroundColor: 'rgba(255, 99, 132, 0.2)', // Light pink fill
                    borderColor: 'rgb(255, 99, 132)', // Pink border
                    pointBackgroundColor: 'rgb(255, 99, 132)', // Pink points
                    pointBorderColor: '#fff',
                    pointHoverBackgroundColor: '#fff',
                    pointHoverBorderColor: 'rgb(255, 99, 132)'
                },
                {
                    label: 'Organisation Data',
                    data: chartDataObj.orgData,
                    fill: true,
                    backgroundColor: 'rgba(54, 162, 235, 0.2)', // Light blue fill
                    borderColor: 'rgb(54, 162, 235)', // Blue border
                    pointBackgroundColor: 'rgb(54, 162, 235)', // Blue points
                    pointBorderColor: '#fff',
                    pointHoverBackgroundColor: '#fff',
                    pointHoverBorderColor: 'rgb(54, 162, 235)'
                }
            ]
        };

        const options = {
            elements: {
                line: {
                    borderWidth: 5,
                    tension: 0.8, // Adjust this value for more or less curvature
                },
                point: {
                    radius: 10
                }
            },
            scales: {
                r: {
                    angleLines: {
                        display: false
                    },
                    suggestedMin: 40,
                    suggestedMax: 100,
                    ticks: {
                        backdropColor: 'transparent',
                        stepSize: 20
                    },
                    pointLabels: {
                        font: {
                            size: 15 // Reduced for a more professional look
                        },
                        color: '#666'
                    },
                    grid: {
                        color: 'rgba(0, 0, 0, 0.0)'
                    }
                }
            },
            plugins: {
                labels: {
                    render: 'label',
                    arc: true,
                    position: 'outside',
                    fontColor: '#666',
                    fontSize: 9,
                    outsidePadding: 4,
                    textMargin: 4,
                    fontStyle: 'normal',
                },
                legend: {
                    display: false, // Set to true for professional charts to identify datasets
                    position: 'top' // A common position for legends in professional reporting
                },
                filler: {
                    propagate: true
                },
                tooltip: {
                    usePointStyle: true, // Use point style for better readability
                    backgroundColor: 'rgba(0,0,0,0.8)' // Semi-transparent black for a sleek look
                }
            },
            maintainAspectRatio: true,
        };

        // Chart.register(ChartDataLabels);
        const config = {
            type: 'polarArea',
            data: chartData,
            options: options
        };


        const myRadarChart = new Chart(
            document.getElementById('myRadarChart'),
            config
        );
    });
</script>

Even to get the labels to curve, I had to resort to a plugin. But then again, it’s far from what I need. Is there a Chart library that helps me get this result? Or a plugin that can help me achieve this?