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.

Responsive property doesn't work

See original GitHub issue

I 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

image

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:2
  • Comments:8 (3 by maintainers)

github_iconTop GitHub Comments

9reactions
dan24678commented, Dec 9, 2019

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:

node-app____src_node-app__-_____ui_src_components_pages_CoachHistory_vue
2reactions
tombraulcommented, Oct 24, 2019

I can confirm this.

I am using vue 2.6.10, vue-chartjs 3.4.2 and chart.js 2.8.0

Read more comments on GitHub >

github_iconTop 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 >

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