Chart.JS: Как я могу отображать метки данных только тогда, когда ширина полосы достаточно велика для текста?

Question

Я использую Chart.JS с плагином Chart.JS datalabel . Можно ли отображать метки данных только тогда, когда ширина полосы достаточно велика для текста?

У меня есть следующий пример:

https://jsfiddle.net/f5p3twcg/2/

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    plugins: [ChartDataLabels],
    type: 'bar',
    options: {
        plugins: {
            datalabels: {
                color: '#000000',
                display: true,
                formatter: function(value, ctx) {
                    return value + "kWh";
                }
            }
        }
    },
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Red1", "Blue1", "Yellow1", "Green1", "Purple1", "Orange1", "Red2", "Blue2", "Yellow2", "Green2", "Purple2", "Orange2", "Red3", "Blue3", "Yellow3", "Green3", "Purple3", "Orange3", "Red4", "Blue4", "Yellow4", "Green4", "Purple4", "Orange4"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)',
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)',
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)',
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)',
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)',
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ]
        }]
    }
});

Я знаю, этот пример не имеет никакого смысла, но вы можете увидеть проблему.

Если данных много, метки данных переполняют ширину полосы следующим образом:

Можно ли указать Chart.JS показывать эти метки только тогда, когда текст помещается на панель? (В противном случае просто покажите подсказки).

Answer 1

Если график не меняет размер динамически, вы можете получить ширину полосы после создания экземпляра диаграммы с помощью

var width = myChart.getDatasetMeta(0).data[0]._model.width;

и переписать свой форматер, чтобы проверить, не превышает ли ширина текста ширину полосы

formatter: function (value, ctx) {
    function getTextWidth(text, font) {
        // re-use canvas object for better performance
        var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
        var context = canvas.getContext("2d");
        context.font = font;
        var metrics = context.measureText(text);
        return metrics.width;
    }
    return getTextWidth(value + "kWh") > width ? "" : value + "kWh";
}

Пожалуйста, обратите внимание на тот факт, что я проигнорировал шрифт в предыдущем примере, поэтому вам придется извлечь его вручную, если были внесены какие-либо изменения.

Возможно, вы даже можете написатьплагин, который записывает в переменную var width перед рендерингом

plugins: [
    ChartDataLabels,
    {
        beforeRender: (myChart) => { width = myChart.getDatasetMeta(0).data[1]._model.width;}
    }
],

Answer 2

Решение от Кшиштоф Кшешевский работает. Однако мне пришлось немного откорректировать его и добавить несколько проверок для 'undefined' в моем случае:

if (typeof chart !== 'undefined') {
    let datasetData = chart.getDatasetMeta(0);

    if (datasetData !== 'undefined') {
        if (datasetData.data.length > 0) {
            barWidth = chart.getDatasetMeta(0).data[0]._model.width;
        }
    }
}