Offset not working (when align: 'center')

[alzearafat]

Hi, cool plugin

But I have an issue with offset options: https://chartjs-plugin-datalabels.netlify.com/positioning#alignment-and-offset

The label is not pulled out from the anchor point. It just stays there.

This is my code:

var datatables_plugin = [
    Chart.defaults.global.plugins.datalabels.anchor = 'end',
    Chart.defaults.global.plugins.datalabels.font.size = 11,
    Chart.defaults.global.plugins.datalabels.font.weight = 700,
    Chart.defaults.global.plugins.datalabels.padding.bottom = 81,
    Chart.defaults.global.plugins.datalabels.offset = 8,
    Chart.defaults.global.defaultFontColor = 'black'
];

function EAF() {
    var ctx = document.getElementById("chart_EAF");
    datatables_plugin;

    var chart_EAF = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ["16-Okt", "17-Okt", "18-Okt", "19-Okt", "20-Okt", "21-Okt", "22-Okt"],
            datasets: [{
                label: "% (Persen)",
                backgroundColor: ["#1fb6ff", "#1fb6ff", "#1fb6ff", "#1fb6ff", "#1fb6ff", "#1fb6ff", "#1fb6ff"],
                data: [82.99, 82.99, 82.99, 82.99, 82.99, 82.99, 82.99]
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            },
            legend: {
                display: true,
                fontColor: 'black'
            },
            title: {
                display: true,
                text: 'EAF'
            }
        }
    });
}

Any help would be greatly appreciated!
Thanks!

[simonbrunel]

The offset represents the distance (in pixels) to pull the label away from the anchor point. This option is not applicable when align is center

By default, align === 'center'

You should try align: 'end' or 'start' or ... but not 'center':

Chart.defaults.global.plugins.datalabels.align = 'end'; 

You could also use Chart.helpers.merge

Chart.helpers.merge(Chart.defaults.global.plugins.datalabels, {
  align: 'end',
  anchor: 'end',
  font: {
    size: 11,
    weight: 700
  },
  offset: 8
  // ...
});

[alzearafat]

Hi @simonbrunel

Wow, thanks! It works now. I just add :

Chart.defaults.global.plugins.datalabels.align = 'end'; 

And works like a charm. Thanks!