Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Chart.js compress vertical axis on barchart

I have a dataset in which the last value is always very high. This causes an issue with my bar chart; almost all the other values are hard to get a feeling for without hovering over them.

Here is a screenshot:

Example Chart

This is what I am trying to achieve;

Desired Solution

So my question; is this possible within vanilla Chart.js or do I need a plugin? And if so; is there an existing plugin or do I need to write one myself?

I am also open for alternative solutions to the initial problem.

I've looked all over the internet for something like this but unfortunately without much luck.

like image 673
Trevi Awater Avatar asked Jan 20 '20 12:01

Trevi Awater


1 Answers

You can use logarithmic type yAxis

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

Optimized ticks

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

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/[email protected]"></script>
<canvas id="myChart" width="400" height="200"></canvas>
like image 94
User863 Avatar answered Oct 31 '22 11:10

User863