ChartJS is slow

Question

So I get all my data from my SQL database (mariaDB), and when I create my Pie chart with 100 data rows or somthing like that everything is fine. BUT when I load 5000 results into it, it starts lagging or being really slow, and I was wondering if this is due to my JS code or just ChartJS itself?

<div id="canvas-holder" style="width:100%"><div class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand"><div class=""></div></div><div class="chartjs-size-monitor-shrink"><div class=""></div></div></div>
    <canvas id="chart-area" style="display: block; width: 762px; height: 381px;" width="762" height="381" class="chartjs-render-monitor"></canvas>
</div>

/**
 * Creates a PieChart overview of results
 *
 * @param {number} pass                 Amount of passed results
 * @param {number} fail                 Amount of failed results
 * @param {number} notRun               Amount of not run results
 * @param {number} err                  Amount of error results
 * @param {number} nA                   Amount of not applicable results
 * @param {number} percentagePassed     Percentage of passed amount
 * @param {number} percentageFailed     Percentage of failed amount
 * @param {number} percentageNotRun     Percentage of not run amount
 * @param {number} percentageError      Percentage of error amount
 * @param {number} percentageNA         Percentage of not applicable amount
 */
function PieChart(pass, fail, notRun, err, nA, percentagePassed, percentageFailed, percentageNotRun, percentageError, percentageNA) {

    window.chartColors = {
        red: '#dc3545',
        green: '#1cc88a',
        blue: '#4e73df',
        yellow: '#f6c23e',
        black: '#5a5c69'
    };

    var config = {
        type: 'pie',
        data: {
            datasets: [{
                data: [
                    nA,
                    err,
                    notRun,
                    fail,
                    pass
                ],
                backgroundColor: [
                    window.chartColors.black,
                    window.chartColors.yellow,
                    window.chartColors.blue,
                    window.chartColors.red,
                    window.chartColors.green,
                ],
                label: 'Dataset 1'
            }],
            labels: [
                percentageNA + "% NA",
                percentageError + "% Error",
                percentageNotRun + "% Not Run",
                percentageFailed + "% Failed",
                percentagePassed + "% Passed"
            ]
        },
        options: {
            responsive: true
        }

    };
    window.onload = function() {
        var ctx = document.getElementById('chart-area').getContext('2d');
        window.myPie = new Chart(ctx, config);
    };
}

SUGEGESTIONS FROM COMMENT

The user @scx suggested to look at this page: https://www.chartjs.org/docs/latest/general/performance.html

and I might think the animation was too consumable for large amount of data, so by setting the option animation: false, this was performing better.

function PieChart(pass, fail, notRun, err, nA, percentagePassed, percentageFailed, percentageNotRun, percentageError, percentageNA) {

    window.chartColors = {
        red: '#dc3545',
        green: '#1cc88a',
        blue: '#4e73df',
        yellow: '#f6c23e',
        black: '#5a5c69'
    };

    var config = {
        type: 'pie',
        data: {
            datasets: [{
                data: [
                    nA,
                    err,
                    notRun,
                    fail,
                    pass
                ],
                backgroundColor: [
                    window.chartColors.black,
                    window.chartColors.yellow,
                    window.chartColors.blue,
                    window.chartColors.red,
                    window.chartColors.green,
                ],
                label: 'Dataset 1'
            }],
            labels: [
                percentageNA + "% NA",
                percentageError + "% Error",
                percentageNotRun + "% Not Run",
                percentageFailed + "% Failed",
                percentagePassed + "% Passed"
            ]
        },
        options: {
            parsing: false,
            normalized: true,
            animation: false
        }

    };
    window.onload = function() {
        var ctx = document.getElementById('chart-area').getContext('2d');
        window.myPie = new Chart(ctx, config);
    };
}

Answer 1

The user @scx suggested to look at this page: https://www.chartjs.org/docs/latest/general/performance.html

and I might think the animation was too consumable for large amount of data, so by setting the option animation: false, this was performing better.

function PieChart(pass, fail, notRun, err, nA, percentagePassed, percentageFailed, percentageNotRun, percentageError, percentageNA) {

    window.chartColors = {
        red: '#dc3545',
        green: '#1cc88a',
        blue: '#4e73df',
        yellow: '#f6c23e',
        black: '#5a5c69'
    };

    var config = {
        type: 'pie',
        data: {
            datasets: [{
                data: [
                    nA,
                    err,
                    notRun,
                    fail,
                    pass
                ],
                backgroundColor: [
                    window.chartColors.black,
                    window.chartColors.yellow,
                    window.chartColors.blue,
                    window.chartColors.red,
                    window.chartColors.green,
                ],
                label: 'Dataset 1'
            }],
            labels: [
                percentageNA + "% NA",
                percentageError + "% Error",
                percentageNotRun + "% Not Run",
                percentageFailed + "% Failed",
                percentagePassed + "% Passed"
            ]
        },
        options: {
            parsing: false,
            normalized: true,
            animation: false
        }

    };
    window.onload = function() {
        var ctx = document.getElementById('chart-area').getContext('2d');
        window.myPie = new Chart(ctx, config);
    };
}