[Chartjs]-Add Data Labels onto a bubble chart on chart.js

I’ve managed to find the answer to this question, basically by taking apart the bubble chart example from the chartjs-plugin-datalabels plugin.

Below is a working example. Pay attention to the section in options that says ‘plugin’.

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.js"></script>

<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>

<div class="container" >
    <h2>Chart.js — Line Chart Demo</h2>
    <div>
        <canvas id="myChart"></canvas>
    </div>
</div>

<script>

    var ctx = document.getElementById('myChart').getContext('2d');
    ctx.height = 1000;
    var myChart = new Chart(ctx, {

        type: 'bubble',
        data: {
            datasets: [
                {
                    label: 'Your Data',
                    data: [
                        {x: 78.7, y: 0, r: 10, name: "Performance"}
                    ],
                    backgroundColor: "rgba(153,255,51,0.6)"
                },
                {
                    label: 'Average',
                    data: [
                        {x: 100.7, y: 0, r: 10, name: "Performance"} // The labe needs to be
                    ],
                    backgroundColor: "rgba(255,0,128,0.6)"
                }
            ]
        },
        options: {
            plugins: { // Look at this bit
                datalabels: {
                    anchor: function(context) {
                        var value = context.dataset.data[context.dataIndex];
                        return value.x < 50 ? 'end' : 'center';
                    },
                    align: function(context) {
                        var value = context.dataset.data[context.dataIndex];
                        return value.x < 50 ? 'end' : 'center';
                    },
                    color: function(context) {
                        var value = context.dataset.data[context.dataIndex];
                        return value.x < 50 ? context.dataset.backgroundColor : 'white';
                    },
                    font: {
                        weight: 'bold'
                    },
                    formatter: function(value) {
                        return Math.round(value.x);
                    },
                    offset: 2,
                    padding: 0
                }
            },
            maintainAspectRatio: false,
            scales: {
                yAxes: [{
                    id: 'first-y-axis',
                    type: 'linear',
                    ticks: {
                        min: 0,
                        max: 1,
                        stepSize: 1,
                        display: false
                    },
                    gridLines: {
                        display: false,
                        drawBorder: false
                    }
                }],
                xAxes: [{
                    ticks: {
                        min: 50, // Controls where axis starts
                        max: 120 // Controls where axis finishes
                    },
                    gridLines: {
                        display: false,
                        lineWidth: 3 // Width of bottom line
                    }
                }]
            }
        }



    });

</script>