Chart.js comprime o eixo vertical no gráfico de barras

8

Eu tenho um conjunto de dados em que o último valor é sempre muito alto. Isso causa um problema no meu gráfico de barras; quase todos os outros valores são difíceis de entender sem pairar sobre eles.

Aqui está uma captura de tela:

Exemplo de gráfico

É isso que estou tentando alcançar;

Solução desejada

Então minha pergunta; isso é possível no vanilla Chart.js ou preciso de um plugin? E se; existe um plugin existente ou eu preciso escrever um?

Também estou aberto a soluções alternativas para o problema inicial.

Procurei por toda a Internet algo assim, mas infelizmente sem muita sorte.

javascript charts chart.js Trevi Awater
fonte
Eu não sei uma resposta. Procurei uma solução por um tempo também e não consegui encontrar nenhuma. Tenho certeza de que não há nenhum plugin para isso. Vi essa pergunta com muita frequência e nunca uma resposta. Talvez uma solicitação de recurso seja uma boa ideia, principalmente porque os desenvolvedores estão se preparando para a v3.0.
HeadhunterKev
1
Por favor, compartilhe o código usado para desenhar o gráfico existente?
WhiteHat

Respostas:

3

Você pode usar o logarithmictipoyAxis

Padrão: linear

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 snippet

Carrapatos otimizados

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

Mostrar snippet de código

Usuário863
fonte