Responsive property doesn't work
See original GitHub issueI used Line chart with options:
responsive: true,
maintainAspectRatio: false,
And use wrappers for chart:
<div class="main">
<div class="chart">
<chart
:chart-data="datacollection"
:options="chartoptions"
/>
</div>
</div>
.chart {
max-width: 80%;
max-height: 30%;
position: relative;
}
.main {
height: 250px;
width: 250px;
position: absolute;
}
but chart doesn’t scale by height
Issue Analytics
- State:
- Created 4 years ago
- Reactions:2
- Comments:8 (3 by maintainers)
Top Results From Across the Web
Display:none Property not working on responsive website
But when i scale up to anything larger than 575px, The display:none property on card-4 DOESNT work, and I think it wont work....
Read more >Responsive state properties doesn't work · Issue #1850 - GitHub
I'm working on charts responsivities using this tutorial. But state.properties.paddingTop don't work, so i go in deep trying some other ...
Read more >Responsive design - Learn web development | MDN
Responsive design refers to a site or application design that responds to the environment in which it is viewed. It encompasses a number...
Read more >Responsive iframes with the CSS aspect-ratio property
Today, I want to show you can use a few lines of CSS to make your embedded iframes fully responsive. Let's dig in!...
Read more >Element will not responsive - HTML & CSS - SitePoint Forums
You are using width property for every element, that's why you are getting the responsive issue. What I will suggest is use 100%...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Yay! I found a workaround with the current code. If you pass in null for height and width, it will respect those values and aspectRatio will still work. I do still think this is a pretty critical bug, but at least I don’t need to wait on a fix now.
Here’s what this looks like:
I can confirm this.
I am using vue 2.6.10, vue-chartjs 3.4.2 and chart.js 2.8.0