Chart.js: Canvas height will not stretch for horizontalBar chart with a large dataset

[lvsof]

I'm unable to configure my horizontalBar chart to stretch vertically with a large data set. I've played around with the canvas height, the barThickness, canvasPercentage, and barPercentage options.

The expected behaviour is that if I set a static barThickness and leave the canvas height blank, that the canvas will stretch vertically as much as it needs to in order to accommodate the bars, but instead this happens:

[etimberg]

@lvsof unfortunately at the moment there is no way to have the chart resize this way. One solution would be to detect when you add items to the chart and then resize the chart's container at a new height that is programmatically determined by your application

[lvsof]

Thanks @etimberg! I tried this workaround but am having an issue with it as well, with some unexpected behaviour.

I assume you mean do something like this:

$(chartCtx).attr("height", dataSet.length * 20);

but this doesn't actually set the appropriate height on the first instantiation of the chart. The height that is sets seems proportional, but not equal to the number that I set it to and what's interesting is that on subsequent instantiations after calling chart.destroy() it does set the chart to the specified height. I need the ability to re-render the chart with different parameters so even though I could adjust my multiplier to make it look good initially, it'll be off on subsequent attempts.

Perhaps this is another bug? I appreciate any help around this issue.

[etimberg]

@lvsof I think you're setting the height directly on the canvas (based on using chartCtx as input to $). Try the div that contains it instead. I think that will give better behaviour.

[lvsof]

The container stretches but the chart stays the same height.

[lvsof]

maintainAspectRatio:false did the trick.

Thanks for your help @etimberg!

[etimberg]

awesome, glad it works :)

[sorie]

thank you i had same problem and resolved. :)

var ctx = document.getElementById(me); ctx.height = (DST.length * 30); ctx2 = ctx.getContext('2d'); var myChart = new Chart(ctx2, config);