[Chartjs]-Last value not showing in bar graph of charts.js-library

by

7👍

✅

I found this from the reference you provided..

ar myChart = new Chart(ctx, {
type: 'bar',
data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3]
    }]
},
options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero:true
            }
        }]
    }
}

try that out.

7👍

I actually came up with this: 

var options = {
  scales: {
        yAxes: [{
            display: true,
            ticks: {
                suggestedMin: 0,    // minimum will be 0, unless there is a lower value.
                // OR //
                beginAtZero: true   // minimum value will be 0.
            }
        }]
    }
};

0👍

If you will set offset:true in y axis then it will show all values in bar chart. It can be done like this:

 scales: {
    ...this.options.scales,
    yAxes: [{
      offset: true,
      ticks: {
        callback: this.getValueWith(unit),
      },
    }],
    xAxes: [{
      offset: !this.isLine(),
      ticks: {
        callback: this.getLabel(),
      },
    }],
  },

0👍

You can add extra step to min and max tick steps of each axis.

options: {
  scales: {
    y: {
      beginAtZero: false, //at yourchoice
      grace: 1
    }
  }
}

Leave a comment