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

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:

Esto es lo que estoy tratando de lograr;

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

¿podría compartir el código utilizado para dibujar el gráfico existente?

— WhiteHat

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/chart.js@2.8.0"></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

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();
          }
        },
        afterBuildTicks: function(pckBarChart) {
          pckBarChart.ticks = pckBarChart.chart.data.datasets[0].data.flatMap(i => [
            50 * (Math.floor(i / 50)), // lower 50
            50 * (Math.ceil(i / 50)) // higer 50
          ])
        }
      }]
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<canvas id="myChart" width="400" height="200"></canvas>

Expandir fragmento

— Usuario863
fuente