[Chartjs]-Align a data label below a point on a bubble graph (Chart.JS)

by

3👍

✅

I figured this out by applying ‘textAlign’ within the charts parameters and set it to centre.

You can see this in the code below:

plugins: {
    datalabels: {
        anchor: function (context) {
            var value = context.dataset.data[context.dataIndex];
            return value.x < 1000 ? 'end' : 'center';
        },
        align: function (context) {
            var value = context.dataset.data[context.dataIndex];
            return value.x < 1000 ? 'end' : 'center';
        },
        color: function (context) {
            var value = context.dataset.data[context.dataIndex];
            return value.x < 1000 ? context.dataset.borderColor : 'white';
        },
        textAlign: 'center',
        font: {
            weight: 'bold',
            alignment: 'right' // Is this the place to be doing this?
        },
        formatter: function (value, context) {
            return context.dataset.label + '\n' + Math.round(value.x);
        },
        offset: 2,
        padding: 0
    }
},

Hope this helps ^^

Leave a comment