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?

<divclass="graph-container"><!-- Your graph element --><canvasid="graph"></canvas></div>

Then in your css file

.graph-containercanvas {

     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"