Fix the height of Y-Axis of Bar chart in chart.js?

pro.animator picture pro.animator · Jan 17, 2017 · Viewed 7.3k times · Source

Requirement: I am working with chart.js. In Bar chart, I want to fix the height of Y-Axis. Is there any attribute or hack to do this?

Answer

Nuwan Dammika picture Nuwan Dammika · Jan 18, 2017

If you want to control the height of the chart you can change the height of the canvas

<canvas id="statement" height="100px"></canvas>

or if you want to change the height of y-axis values try below. Below will make sure the maximum size of the bar is at 25000,and each step to be at 5000 and the callback will label each as 5k,10k,15k,20k,25k

 var chartConfig = {
         type: 'bar',
         data: data,
         options: {
             scales: {
                 yAxes: [{
                     display: true,
                     gridLines: {
                         color: "rgb(210,210,211)"
                     },
                     ticks: {
                         max: 25000,
                         min: 0,
                         stepSize: 5000,
                         beginAtZero: true,
                         padding: 20,
                         callback: function(value, index, values) {
                             return value / 1000 + "k";
                         }
                     }
                 }]
             }
         }