0

Edit: Pessoal, acho que já resolvi. Em options é possível colocar esse código:

scales: {
    y: {
        min: 0,
        max: 120,
        ticks: {
            stepSize: 20
        }
    }
}

Com ele consigo predefinir o tamanho do eixo y, e também colocar os múltiplos (nesse caso optei por múltiplos de 20).


A dúvida era:

Estou fazendo um gráfico com Chart.Js e estou precisando fazer uma mini gambirra para uma das linhas da Meta aparecer bonitinha, ao invés de colocar o yMin e yMax iguais, estou colocando o yMax com 0.01 a mais que o yMin, pois percebi que quando o valor da linha é maior que um valor redondo (60, 80, 100 etc.) automaticamente sobe +20 na altura do y.

inserir a descrição da imagem aqui

Eu gostaria que por padrão o topo do y já ficasse com um valor um pouco maior que o maior valor da Meta, pois caso o topo fique igual ao valor da Meta, fica meio feio, vejam:

inserir a descrição da imagem aqui

Meu código (eu ainda vou simplificá-lo):

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: data_final, //['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: qtde_produzida, //[12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 2
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        },
        plugins: {
            annotation: {
                annotations: {
                    line1: {
                        type: 'line',
                        mode: 'horizontal',
                        scaleID: 'y-axis-0',
                        yMin: meta[0],
                        yMax: meta[0],
                        borderColor: 'rgba(255, 99, 132, 1)',
                        borderWidth: 3,
                        label: {
                            content: "Meta: " + meta[0],
                            enabled: true,
                            backgroundColor: 'rgba(255, 99, 132, 1)',
                        }
                    },
                    line2: {
                        type: 'line',
                        mode: 'horizontal',
                        scaleID: 'y-axis-0',
                        yMin: meta[1],
                        yMax: meta[1],
                        borderColor: 'rgba(54, 162, 235, 1)',
                        borderWidth: 3,
                        label: {
                            content: "Meta: " + meta[1],
                            enabled: true,
                            backgroundColor: 'rgba(54, 162, 235, 1)',
                        }
                    }
                }
            }
        }
    }
});

Obrigado.

2
  • Deixa eu ver se eu entendi - tu queres que as linhas pareçam sobrepostas, mas quando tu tenta colocar uma diferença de 0,01, ela "salta" uns 20 pontos, é isso? Eu acho que isso pode ser problema no teu código, mas não identifiquei o que pode causar isso... Commented 12/05/2022 às 18:00
  • Então Leonardo, eu quero que, automaticamente, o tamanho do eixo y seja um pouco maior que o maior valor de Meta, e não que fique no limite entendeu, pois ficando no limite acho desagradável aos olhos. Para isso, eu “resolvi” parando de deixar iguais os valores yMin e yMax da linha Meta, colocando o yMax um pouquinho maior (+0.01) que fica imperceptível aos olhos mas já faz o tamanho do eixo y ficar um pouquinho acima da linha da maior Meta, mas acho que deve ter uma solução melhor que isso, pois creio que boa prática seria deixar yMin e yMax com valores iguais.
    – Diogo
    Commented 12/05/2022 às 18:07

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .