Chart.js comprime el eje vertical en el gráfico de barras

8

Tengo un conjunto de datos en el que el último valor siempre es muy alto. Esto causa un problema con mi gráfico de barras; Casi todos los demás valores son difíciles de percibir sin pasar por encima de ellos.

Aquí hay una captura de pantalla:

Gráfico de ejemplo

Esto es lo que estoy tratando de lograr;

Solución deseada

Entonces mi pregunta; ¿Es esto posible dentro de Vanilla Chart.js o necesito un complemento? Y de ser así; ¿Existe un complemento o necesito escribir uno yo mismo?

También estoy abierto a soluciones alternativas al problema inicial.

He buscado en Internet algo como esto, pero desafortunadamente sin mucha suerte.

javascript charts chart.js Trevi Awater
fuente
No se una respuesta. Busqué una solución por un tiempo también y no pude encontrar ninguna. Estoy bastante seguro de que no hay un complemento para eso. Vi esa pregunta muy a menudo y nunca una respuesta. Tal vez una solicitud de función sería una buena idea, especialmente porque los desarrolladores se están preparando para la v3.0.
HeadhunterKev
1
¿podría compartir el código utilizado para dibujar el gráfico existente?
WhiteHat

Respuestas:

3

Puedes usar logarithmictypeyAxis

Predeterminado: lineal

https://www.chartjs.org/docs/latest/axes/cartesian/logarithmic.html

var ctx = document.getElementById('myChart');

var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["January", "February", "March", "April", "May", "June"],
    datasets: [{
      label: "Series 1",
      backgroundColor: "rgba(255,99,132,0.2)",
      borderColor: "rgba(255,99,132,1)",
      borderWidth: 2,
      hoverBackgroundColor: "rgba(255,99,132,0.4)",
      hoverBorderColor: "rgba(255,99,132,1)",
      data: [65, 59, 43, 81, 56, 950],
    }]
  },
  options: {
    scales: {
      yAxes: [{
        type: 'logarithmic',
        ticks: {
          callback: function(tick, index, ticks) {
            return tick.toLocaleString();
          }
        }
      }]
    }
  }
});
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<canvas id="myChart" width="400" height="200"></canvas>
Expandir fragmento

Garrapatas optimizadas

50 * (Math.floor(i / 50)), // lower 50
50 * (Math.ceil(i / 50)) // higer 50

Mostrar fragmento de código

Usuario863
fuente