Skip to content Skip to sidebar Skip to footer

How Ro Reduce Bar Height - Chart.js

I'm using bar-chart from chart.js with bootstrap. canvas is wrapped within a div having class col-md-8. It works fine but the height of bar is too high. I found barWIdth property t

Solution 1:

Give your chart a height?

<div class="graph-container">
     <!-- Your graph element -->
     <canvas id="graph"></canvas>
</div>

Then in your css file

.graph-container  canvas {

     height: 300px; /* Example... */
 }

Or simply

#graph {
    height: 300px;
}

Solution 2:

Ideally, set maintainAspectRatio to false

    type: 'bar',
    options: {
        maintainAspectRatio: false
    }

Then, you can play with the chart's height using CSS if you want to maintain a certain height (that will not affect the labels), or leave it as it is.


Post a Comment for "How Ro Reduce Bar Height - Chart.js"