Add Data Labels onto a bubble chart on chart.js

Question

I have used a Bubble Chart on Chart.js to create sliders to show comparable performance and they currently look a bit like this:

What am I trying to do

I want to add data labels just above / in my 'bubbles' with my values in. Much like the '10' you can see on each bubble here.

What have I done to achieve this

This is not standard Chart.js functionality but I found this post which was discussing a similar issue for bar / line charts.

I've installed the plugin that post suggested but the data label it shows is for the radius of the bubble and I want to it to be the x-axis of the bubble.

I've also tried to use the code from some of the answers on that post, but with absolutely no luck.

My Code

<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 X. not R.
                    ],
                    backgroundColor: "rgba(255,0,128,0.6)"
                }
            ]
        },
        options: {
            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>

Thanks in advance

Answer 1

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>

Answer 2

If all you want to do is changing the label, there is an easier solution. From the docs of chartjs-plugin-datalabels:

Data values are converted to string ('' + value). If value is an object, the following rules apply first:

value = value.label if defined and not null

else value = value.r if defined and not null

else value = 'key[0]: value[key[0]], key[1]: value[key[1]], ...'

Therefore, it is sufficient to specify a label in your data points:

 data: [{ x: 78.7, y: 0, r: 10, name: "Performance", label: `${Math.round(x)}` }],