Chart.js Too Slow Rendering Vertical Stacked Bars Chart

I'm using chart.js API to render a several stacked vertical bars chart, but the performance is slow. I even made some changes such that all the content object was already processed

Solution 1:

Now I get it :) I was wrongly duplicating the data attributes, based on this answer.

Solution is quite simple, every data attribute can have directly all the values, without the need of introduction of zeros.

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 labelsvar labels = [], size = 0;
for (var key in countryList){
    labels.push(key);
    size++;
}

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


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

var options = {
    maintainAspectRatio: false,
    legend: {
        position: 'bottom', // place legend on the right side of chartdisplay: false, //do not display
        labels : {
            fontSize: 9,
            fontColor: 'black'
        }
    },
    scales: {
        xAxes: [{
            stacked: true, // this should be set to make the bars stackedbeginAtZero: 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 timenewChart(overallStatsChart, content);

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

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