ользую API chart.js для рендеринга нескольких вертикальных столбчатых диаграмм, но производительность низкая. Я даже сделал некоторые изменения, так что всеcontent объект уже был обработан сервером, а не браузером, но я понял, что большая часть времени приходится на конечную функциюnew Chart(overallStatsChart, content);.

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

Есть идеи, как улучшить производительность, то есть начальную загрузку?

var countryList = {"AR":"Argentina","AU":"Australia","BO":"Bolivia","BR":"Brasil","CA":"Canada","CL":"Chile","CN":"中国","CO":"Colombia","CR":"Costa Rica","CU":"Cuba","CZ":"Česká","DE":"Deutschland","DK":"Danmark","DO":"Rep. Dominicana","EC":"Ecuador","ES":"España","FI":"Suomessa","FR":"France","GR":"Ελλάδα","GT":"Guatemala","HU":"Magyarország","IE":"Ireland","IN":"India","IT":"Italia","JP":"日本","MX":"México","NI":"Nicaragua","NL":"Nederland","NO":"Norge","PA":"Panamá","PE":"Perú","PL":"Polska","PR":"Puerto Rico","PT":"Portugal","PY":"Paraguay","RO":"România","RU":"Россия","SE":"Sverige","SV":"El Salvador","TR":"Türkiye","UA":"Україна","UK":"United Kingdom","US":"USA","UY":"Uruguay","VE":"Venezuela"};

//populates country labels
var labels = [], size = 0;
for (var key in countryList){
    labels.push(key);
    size++;
}

var _data = function(i){
    var arr = [];
    for (var n=0; n<size; n++){
        arr.push(n==i ? 1 : 0);
    }            
    return arr;
};

var dataset = [], i=0;
for (var key in countryList){

    dataset.push(
        {
            label: "depreciation",
            data: _data(i),
            backgroundColor: 'navy'
        }, {
            label: "insurance",
            data: _data(i),
            backgroundColor: 'blue'
        }, {
            label: "credit",
            data: _data(i),
            backgroundColor: 'aqua'
        }, {
            label: "inspection",
            data: _data(i),
            backgroundColor: 'teal'
        }, {
            label: "road taxes",
            data: _data(i),
            backgroundColor: 'olive'
        }, {
            label: "maintenance",
            data: _data(i),
            backgroundColor: 'green'
        }, {
            label: "repairs",
            data: _data(i),
            backgroundColor: 'lime'
        }, {
            label: "fuel",
            data: _data(i),
            backgroundColor: 'maroon'
        }, {
            label: "parking",
            data: _data(i),
            backgroundColor: 'yellow'
        }, {
            label: "tolls",
            data: _data(i),
            backgroundColor: 'orange'
        }, {
            label: "fines",
            data: _data(i),
            backgroundColor: 'red'
        }, {
            label: "washing",
            data: _data(i),
            backgroundColor: 'purple'
        }, {
            label: "maintenance",
            data: _data(i),
            backgroundColor: 'green'
        }
    );

    i++;
}                          

var options = {
    maintainAspectRatio: false,
    legend: {
        position: 'bottom', // place legend on the right side of chart
        display: false, //do not display
        labels : {
            fontSize: 9,
            fontColor: 'black'
        }
    },
    scales: {
        xAxes: [{
            stacked: true, // this should be set to make the bars stacked
            beginAtZero: true
        }],
        yAxes: [{
            stacked: true, // this also..
            beginAtZero: true
        }]
    },
    animation: {
        duration : 1000,
        easing : 'linear'
    }
};

var content = {
    type: 'bar',
    data: {
        labels: labels,
        datasets: dataset
    },
    options: options
}; 

//I made tests with timestamps and here it takes the biggest part of the time
new Chart(overallStatsChart, content);

.chart {
    position: relative;
    margin: auto;
}
#overallStatsChartDiv{
    min-height: 500px;
} 

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<div class="chart" id="overallStatsChartDiv">
    <canvas id="overallStatsChart"></canvas>
</div>