Chart.min.js - sometimes the chart is displayed and sometimes not - chart.js

Question

hello I have the following problem I use the plugin Chart.js to display statistics now I have the following problem sometimes the chart is displayed and sometimes not see screenshot
I have asked in a Discord Chat but that did not help, i hope i can get help here
Chart.js Version:2.1.4
The Code:
function LoadProviderChart() {
$(document).ready(function() {
var providercount = JSON.parse(window.localStorage.getItem('providercount_' + window.location.pathname.split('/')[4]));
console.log(providercount);
providercount = Object.keys(providercount).map(function (key) {
return [key, providercount[key]];
})
providercount.sort(function (a, b) {
return b[1].count - a[1].count;
})
var cutProviderCount = providercount.slice(0, 6);
if(window.ProviderChart != null) {
window.ProviderChart.destroy();
console.log("ProviderChart destroyed");
}
Chart.defaults.global.defaultFontFamily = 'Rubik';
Chart.defaults.global.defaultFontColor = '#fff';
var ctxB = document.getElementById("barChart").getContext('2d');
var config = {
type: 'bar',
data: {
labels: cutProviderCount.map(function(x) { return x[0] }),
datasets: [{
label: 'Games of Providers',
data: cutProviderCount.map(function(x) { return x[1].count }),
backgroundColor: "" + getComputedStyle(document.body).getPropertyValue('--highlight_color').toString().replace(' ', '') + "",
}],
},
options: {
scales: {
yAxes: [{
gridLines:{
display: false,
},
ticks: {
beginAtZero: true
}
}],
xAxes: [{
gridLines:{
display:false,
},
}]
}
}
}
window.ProviderChart = new Chart(ctxB, config);
});
}