столбчатая диаграмма с накоплением js упорядочение столбцов с накоплением от высокого значения к низкому

Question

У меня есть столбчатая диаграмма с накоплением, использующая диаграмму js. Мне интересно, как упорядочить сложенный столбец от высокого значения к низкому. Например, как показано на рисунке ниже:

My current stacked bar chart is looked like this введите описание изображения здесь

Я попытался осмотреться и нашел пример с небольшим массивом, но не работал. Я не уверен, как переупорядочить уложенную полосу, и метка будет соответствовать уложенной после перестановки. Я использую Chart. js v2.9.3 Вот мой сценарий. массив в основном источник из mysqli json.

var numberWithCommas = function(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    };
    var bar_ctx = $("#mycanvas");

    var bar_chart = new Chart(bar_ctx, {
        type: 'bar',
        data: {
            labels: dates,
            datasets: [
            {
                label: labelel[0],
                data: dataProcessCnt1,
                            backgroundColor: color[0],
                            hoverBackgroundColor: color[0],
                            hoverBorderWidth: 0
            },
            {
                label: labelel[1],
                data: dataProcessCnt2,
                            backgroundColor: color[1],
                            hoverBackgroundColor: color[1],
                            hoverBorderWidth: 0
            },
            {
                label: labelel[2],
                data: dataProcessCnt3,
                            backgroundColor: color[2],
                            hoverBackgroundColor: color[2],
                            hoverBorderWidth: 0
            },
            {
                label: labelel[3],
                data: dataProcessCnt4,
                            backgroundColor: color[3],
                            hoverBackgroundColor: color[3],
                            hoverBorderWidth: 0
            },
            {
                label: labelel[4],
                data: dataProcessCnt5,
                            backgroundColor: color[4],
                            hoverBackgroundColor: color[4],
                            hoverBorderWidth: 0
            },
            {
                label: labelel[5],
                data: dataProcessCnt6,
                            backgroundColor: color[5],
                            hoverBackgroundColor: color[5],
                            hoverBorderWidth: 0
            },
            {
                label: labelel[6],
                data: dataProcessCnt7,
                            backgroundColor: color[6],
                            hoverBackgroundColor: color[6],
                            hoverBorderWidth: 0
            },
            {
                label: labelel[7],
                data: dataProcessCnt8,
                            backgroundColor: color[7],
                            hoverBackgroundColor: color[7],
                            hoverBorderWidth: 0
            },
            {
                label: labelel[8],
                data: dataProcessCnt9,
                            backgroundColor: color[8],
                            hoverBackgroundColor: color[8],
                            hoverBorderWidth: 0
            },
            {
                label: labelel[9],
                data: dataProcessCnt10,
                            backgroundColor: color[9],
                            hoverBackgroundColor: color[9],
                            hoverBorderWidth: 0
            },
            {
                label: labelel[10],
                data: dataProcessCnt11,
                            backgroundColor: color[10],
                            hoverBackgroundColor: color[10],
                            hoverBorderWidth: 0
            },
            {
                label: labelel[11],
                data: dataProcessCnt12,
                            backgroundColor: color[11],
                            hoverBackgroundColor: color[11],
                            hoverBorderWidth: 0
            },
            ]
        },
        options: {
                animation: {
                duration: 10,
            },

            scales: {
                xAxes: [{
                    stacked: true,
                    beginAtZero: true,
                    scaleLabel: {
                        labelString: 'Month'
                    },
                    ticks: {
                        autoSkip: false
                    }
                }],
              yAxes: [{ 
                stacked: true, 
                beginAtZero:true,
                userCallback: function(label, index, labels) {
                     if (Math.floor(label) === label) {
                         return label;
                     }

                 },
                ticks: {
                        callback: function(value) { return numberWithCommas(value); },
                        }, 
                }],
            },
            legend: {display: true}
        } // options
       }
    );