Chart.js not showing all labels on pie chart

Question

I recently updated Chart.js and got the following bug afterwards.

Some of the labels under my pie chart are not showing anymore, until I click on one of the visible ones. Then everything shows as it should.

Here you can see how it looks before clicking on something: before clicking

and here you can see the chart after clicking on a visible label: after clicking

Here you can see the options section of my chart code:

options: {
                    maintainAspectRatio : false,
                    animation: {
                        duration: 0
                    },
                    elements: {
                        center: center
                    },
                    legend: {
                        position: 'bottom',
                        //fullWidth: 'true',
                        labels: {
                            generateLabels: (chart) => {
                                chart.legend.afterFit = function () {
                                    var width = this.width;

                                    this.lineWidths = this.lineWidths.map( () => this.width - 12 );

                                    this.options.labels.padding = 30;
                                    this.options.labels.boxWidth = 15;
                                };

                                var data = chart.data;
                                if (data.labels.length && data.datasets.length) {
                                    return data.labels.map((label, i) => {
                                        var meta = chart.getDatasetMeta(0);
                                        var ds = data.datasets[0];
                                        var arc = meta.data[i];
                                        var custom = arc && arc.custom || {};
                                        var getValueAtIndexOrDefault = this.getValueAtIndexOrDefault;
                                        var arcOpts = chart.options.elements.arc;
                                        var fill = custom.backgroundColor ? custom.backgroundColor : getValueAtIndexOrDefault(ds.backgroundColor, i, arcOpts.backgroundColor);
                                        var stroke = custom.borderColor ? custom.borderColor : getValueAtIndexOrDefault(ds.borderColor, i, arcOpts.borderColor);
                                        var bw = custom.borderWidth ? custom.borderWidth : getValueAtIndexOrDefault(ds.borderWidth, i, arcOpts.borderWidth);

                                        return {
                                            text: label,
                                            fillStyle: fill,
                                            strokeStyle: stroke,
                                            lineWidth: bw,
                                            hidden: isNaN(ds.data[i]) || meta.data[i].hidden,

                                            // Extra data used for toggling the correct item
                                            index: i
                                        };
                                    });
                                }
                                return [];
                            }
                        },
                    },
                    cutoutPercentage: 85, 
                    plugins: {
                        datalabels: {
                            anchor: 'end',
                            align: 'end',
                            display: function(context) {
                                var index = context.dataIndex;
                                var value = context.dataset.data[index];
                                return value > 0; // display labels with a value greater than 0
                            },
                            font: {
                                weight: 'bold',
                                size: 16,
                            },
                        }
                    }
                }

Kruki Kruki · Accepted Answer · 2020-06-03T07:35:04

chart.legend.afterFit = function () {
    if (keys.length > 4) {
        this.options.labels.padding = 15;
        this.height = this.height + 25;
    }
    else {
        this.options.labels.padding = 20;
        this.height = this.height + 18;
    }
    var width = this.width; // guess you can play with this value to achieve needed layout
    this.lineWidths = this.lineWidths.map(function () { return width; });
};

I changed the part at afterFit to this, so it is formatting right, the problem is, the padding settings are set back when i click on a label.

Chart.js not showing all labels on pie chart

1 Answers