Mizrain Phelipe Sá

@Marcelo Calazans
 
Resolvi o problema assim: 
 

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)

RESOLVIDO:
 
foreach (var tipoPenal in item.TipoPenalList) { if (tipoPenal == item.TipoPenalList[item.TipoPenalList.Count - 1]) { <span>@listaString[0] - @listaCodigo[0] <strong> @listaCodigo[1] <span id="barraLista" style="margin-left: 0.3em;margin-right: 0.3em;"></span></strong></span> } }  

Encontrei a solução!
 
Como o container Pai é flex, basta colocar um margin-top: auto na última div que é o rodapé.
 
.box-rodapeGrafico { margin-top: auto; }