[Chartjs]-Add a label to a point of a bubble graph (Chart.js)

by

2👍

✅

Modify your datalabels plugin configuration this way:

   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.backgroundColor : 'white';
        },
        font: {
            weight: 'bold'
        },
        formatter: function (value, context) {
            return context.dataset.label;
        },
        offset: 2,
        padding: 0
    }

The formatter has also a context parameter which contains info about dataset like label.

Here is a fiddle: https://jsfiddle.net/beaver71/3ed8t6pe/

Leave a comment