question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

horizontal bar chart increases row height on resize when maintainAspectRatio is set to false

See original GitHub issue

Steps to reproduce:

  • new Chart(ctx, {type: 'horizontalBar', data})
  • maintainAspectRatio: false
  • resize your window

https://jsfiddle.net/pzx1LtqL/3/

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:1
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

3reactions
etimbergcommented, Jun 21, 2016

Fixed in 2.1.6 we default to a block style if one is not set on the canvas. See https://jsfiddle.net/pxzzo24p/1/

2reactions
Jiiacommented, Oct 7, 2016

I ran into this issue on 2.3.0. It occurred because the container had other items in it besides from the canvas. By putting the canvas inside its own container and setting container position:relative everything works beautifully. Example how to break it: https://jsfiddle.net/pxzzo24p/14/

Read more comments on GitHub >

github_iconTop Results From Across the Web

horizontal bar chart increases row height on resize when ...
Steps to reproduce: new Chart(ctx, {type: 'horizontalBar', data}); maintainAspectRatio: false; resize your window.
Read more >
Set height of chart in Chart.js - javascript - Stack Overflow
If you disable the maintain aspect ratio in options then it uses the available height: var chart = new Chart('blabla', { type: 'bar',...
Read more >
How to Resize the Chart and maintainAspectRatio in Chart JS
The canvas tag, javascript, arrays and Chart JS all need to be combined to draw an eye catching bar chart or line chart....
Read more >
How to Set Dynamic Height for Bar Chart in Chart js - YouTube
How to Set Dynamic Height for Bar Chart in Chart jsIn this video we will cover how to set dynamic height for bar...
Read more >
Responsive Charts - Chart.js
Note that in order for the above code to correctly resize the chart height, the maintainAspectRatio option must also be set to false...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found