Inconsistent legend overflow in Chart.js 3.7

I have a line chart built in chart.js 3.7. The legend items at most screen widths need to overflow into a second line. However, this only happens about 50% of the time the chart loads.

The first image is what I expect: four legend items with the final item in a second line of the legend. A screenshot of a line chart with four legend items

The second image is what loads about half the time. Clicking on any legend item repairs the legend and four items appear. A screenshot of a line chart with three legend items

This is how the legend is configured:

const config={
    data: data,
    options:{
        plugins:{
            legend:{
                reverse: true,
                title:{
                    text: 'Click the legend to show or hide',
                    display: true,

                    font:{
                        weight: 'bold',
                        size: 14,
                    },
                    padding:{
                        top: 10,
                    },
                },
                labels:{
                    boxHeight: 20,
                    boxWidth: 20,
                    usePointStyle: false,
                },
            },   
        }
    }

This seems to happen regardless of the character length or the boxwidth of the legend labels.