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.
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:
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.