0
379
Viewscómo manipular con los valores del eje y en chartjs
Hola a todos ustedes,
¿Cómo puedo controlar los valores del eje Y en la biblioteca Chart.js? Los datos se muestran de forma diferente en cada gráfico, aunque el código es el mismo para cada gráfico.
Los datos en el primer gráfico se muestran así 
mientras que en el segundo gráfico los datos son así 
¿Cómo puedo hacer de esa manera que cada gráfico tenga valores +5, como 5, 10, 20, 25 porque nunca tengo valores con tipo flotante?
El código se ve así:
const ctx = document.getElementById('myChart').getContext('2d'); const myChart = new Chart(ctx, { type: 'bar', data: { labels: data.map(x => moment(x.date).format("MMM Do")), datasets: [{ data: data.map(x => x.premium), backgroundColor: '#ffec87', borderColor: "#ffec87", borderWidth: 2, borderStyle: 'dotted' }] }, options: { scales: { xAxis: { grid: { display: false } }, yAxis: { grid: { borderDash: [3, 5] } } } } });Muchas gracias.
2 answers
Answer question0
en las escalas de opciones, yAxis agrega un tamaño de paso
options: { scales: { xAxis: { grid: { display: false } }, yAxis: { grid: { borderDash: [3, 5] }, ticks: {stepSize: 5} } } }0
Alternativamente, puede establecer el mínimo/máximo de la escala del eje y como se muestra en este ejemplo
https://www.chartjs.org/docs/latest/samples/scales/linear-min-max.html
scales: { y: { min: 0, max: 25, } }Acabo de encontrar el lugar en la documentación donde se discute la solución de Amin, creo que pondría una referencia aquí por conveniencia.
https://www.chartjs.org/docs/latest/samples/scales/linear-step-size.html
y: { title: { display: true, text: 'Value' }, min: 0, max: 100, ticks: { // forces step size to be 50 units stepSize: 5 } }