Javascript Chartjs! Exibir valores na ordem Decrescente no gráfico

[Mizrain Phelipe Sá]

Estou usando um código no meu script que peguei na net e funciona, mas esta exibindo os valores ao contrário, os valores com zero aparecem no topo e depois os valores vêm em ordem crescente (1,2,3 ...). Queria que a ordem ficasse assim (4,3,1,0) e que a ordem fosse decrescente no gráfico também, da mais alta para a mais baixa.

 

async function grMeioEmpregado() {

    let agressaoFisica = 0;
    let armaBranca = 0;
    let armaFogo = 0;
    let asfixia = 0;
    let fogo = 0;
    let objetoContundente = 0;
    let veneno = 0;
    let outro = 0;
    let nCI = 0;

    const url = `/Crime/AjaxAgressaoFisica`
    const url2 = `/Crime/AjaxArmaBranca`
    const url3 = `/Crime/AjaxArmaFogo`
    const url4 = `/Crime/AjaxAsfixia`
    const url5 = `/Crime/AjaxFogo`
    const url6 = `/Crime/AjaxObjetoContundente`
    const url7 = `/Crime/AjaxVeneno`
    const url8 = `/Crime/AjaxOutroMeioEmpregado`
    const url9 = `/Crime/AjaxNCIMeioEmpregado`

    try {
        const resposta = await fetch(url);
        const resposta2 = await fetch(url2);
        const resposta3 = await fetch(url3);
        const resposta4 = await fetch(url4);
        const resposta5 = await fetch(url5);
        const resposta6 = await fetch(url6);
        const resposta7 = await fetch(url7);
        const resposta8 = await fetch(url8);
        const resposta9 = await fetch(url9);        

        const resultado = await resposta.json();
        const resultado2 = await resposta2.json();
        const resultado3 = await resposta3.json();
        const resultado4 = await resposta4.json();
        const resultado5 = await resposta5.json();
        const resultado6 = await resposta6.json();
        const resultado7 = await resposta7.json();
        const resultado8 = await resposta8.json();
        const resultado9 = await resposta9.json();        

        agressaoFisica = resultado;
        armaBranca = resultado2;
        armaFogo = resultado3;
        asfixia = resultado4;
        fogo = resultado5;
        objetoContundente = resultado6;
        veneno = resultado7;
        outro = resultado8;
        nCI = resultado9;
        

    } catch (e) {
        console.error(e);
    }

    const countries = ['Agressão Física', 'Arma Branca', 'Arma de Fogo', 'Asfixia', 'Fogo',
        'Objeto Contundente', 'Veneno', 'Outro', 'NCI - Não Consta Informação'];
    const mortalityRates = [agressaoFisica, armaBranca, armaFogo, asfixia, fogo, objetoContundente, veneno, outro, nCI];

    const sortedData = mortalityRates.map((v, i) => ({
        rate: v,
        country: countries[i]
    })).sort((o1, o2) => o1.rate - o2.rate);

    var ctx = document.getElementById('grMeioEmpregado').getContext('2d');
    var chart = new Chart(ctx, {
        type: 'horizontalBar',
        data: {
            labels: sortedData.map(o => o.country),
            datasets: [{
                label: 'Nº de Meios empregado',
                backgroundColor: [
                    'RGBA(178,235,242,0.56)',
                    'RGBA(178,235,242,0.56)',
                    'RGBA(178,235,242,0.56)',
                    'RGBA(178,235,242,0.56)',
                    'RGBA(178,235,242,0.56)',
                    'RGBA(178,235,242,0.56)',
                    
                ],
                borderWidth: 1,
                borderColor: 'RGBA(0,172,193,0.48)',
                hoverBackgroundColor: 'RGBA(0,172,193,0.22)',
                hoverBorderColor: 'RGBA(0,172,193,0.48)',
                data: sortedData.map(o => o.rate),
            }]
        },
        options: {
            scales: {
                xAxes: [{
                    ticks: {    
                        autoSkip: false,
                        min: 0,
                        max: 10,
                        callback: function (value) {
                            return value + "%"
                        }
                    },
                    scaleLabel: {
                        display: true,
                        labelString: "Porcentagem"
                    }
                }],
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }],
            },
            responsive: true,
            legend: {
                labels: {
                    fontSize: 15,
                }
            },
            animation: {
                animateScale: true,
                duration: 2000,
            },
            plugins: {
                datalabels: {
                    color: '#616161',
                }
            }
        }
    });
}

grMeioEmpregado();

 

Assim fica o gráfico com a ordem errada:

 

 

Resolvido, basicamente era só trocar a posição 

 

.sort((o1, o2) para .sort((o2, o1)