-
Notifications
You must be signed in to change notification settings - Fork 3.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Flex container doesn't resize charts properly, if you have several charts inside one flex container. #6427
Comments
In your demo, I added a snippet to run Also, adding Does this resolve your problem? http://jsfiddle.net/xLz8tcrc/2/ |
Thanks for your reply. I've posted just an example, in real use case we want charts to resize on window resize or parent element resize, so it's not so easy to implement logic where you can call chart.reflow(). For Window resize it's more a less straightforward, just using window resize event. Can you please not close the ticket for now, I'll try to implement your approach or maybe someone has other ideas. |
What you're describing is basically the same problem we have internally in Highcharts. We currently do automatic reflows on window resize. Ideally we would like to do automatic reflows on containing element resize too, but there is currently no effective way to listen to DOM element size changes. See http://stackoverflow.com/questions/6492683/how-to-detect-divs-dimension-changed for a discussion, and the same topic has been discussed previously in this forum too. As mentioned in the thread, the only possible way currently seems to be using |
Did you have a look at the ResizeSensor mentioned in the StackOverflow post you linked to (https://github.com/marcj/css-element-queries)? It uses a couple of extra DOM elements and a There is also http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/ which describes how to accomplish this using an In the future, there will be |
In my opinion Highcharts shouldn't implement tricks like this in the core. The window resize listener covers most cases, then we have the |
This fixes problem with charts resize. highcharts/highcharts#6427
+1 We just hit this issue, took forever to realize the problem was flexbox. |
one of the reasons why I stop using flex ... resizing never works as expected , same shit for display grid display inline block is far better |
this is just another workaround. Is there any updates on this? Is there any plans on fixing this @TorsteinHonsi ? |
Hi @GeorgeKnap Could you provide a live demo with Highcharts and a non-Highcharts SVG to show what do you have in mind? How will this influence scaling and pixel precision of sharp rendering? |
@KacperMadej I managed to override the inner
It works reasonably well now. |
Thank you for sharing the solution. The problem with scaling SVG is that this could cause blurry rendering as pixel precision could be lost. Another issue for a general Highcharts solution is support for legacy browsers (it's not a blocker, we'll just need to be sure that we have a proper polyfill). |
I've done a deep dive in this issue and found three issues:
|
My CSS override solution above caused major problems with mouse over (tooltip) position. To fix it, I removed the CSS override completely and implemented This is the Angular solution so there is used
|
Thanks for sharing! Here's a general plugin that responds to the // Generic plugin that adds support for listening to container resize rather than
// window resize. As of 2018 only Chrome supports ResizeObserver.
Highcharts.wrap(Highcharts.Chart.prototype, 'setReflow', function(proceed, reflow) {
var chart = this;
proceed.call(this, reflow);
if (reflow !== false && typeof ResizeObserver === 'function') {
// Unbind window.onresize handler so we don't do double redraws
if (this.unbindReflow) {
this.unbindReflow();
}
var ro = new ResizeObserver(function () {
chart.reflow();
});
ro.observe(this.renderTo);
}
}); View it live on jsFiddle. |
I am new to using highcharts, in those attached screen shots, you could clearly see that the chart is exceeding the width of the container. i have many charts in the same page which open when i click on the accordion. On every initial load, the chart width is exceeding it's container width. below is the code regarding the accordion. function initsectionclicks(container) {
|
Please add live demo for the problem, so we could recreate the problem, debug it and test possible solutions and workarounds. Also, please check the suggested workaround in this comment: #6427 (comment) |
Neither calling reflow() on window resize nor using the plugin solved the problem for me; however this answer from SO did. I'm using highcharts in a bootstrap 4 flex container. The chart resizes up (wider) but doesn't resize down unless I make the container absolute:
with the CSS:
I've attached the chart to #chart with |
None of the solution here worked for me, I use basic flex box and chrome. |
@kopax Working demos are listed in this thread - please contact support with a live demo showing your problem if you would like us to look into your problem. https://www.highcharts.com/blog/support/ |
If you are using React (therefore |
Omg what a nightmare — spent all day on this, and this answer was the one that works! |
Hello @chrysb, thanks for your input. This is solely a highcharts repository. if you want this to be implemented, please contact us via https://github.com/highcharts/highcharts-react |
After trying various solutions for the past 30 minutes, this is the only solution that worked for me. Thanks @chrysb |
Thank-you! This worked a treat! |
Fantastic solution! This is worth adding to the highcharts documentation, specifically for a flex container that grows. |
@rynz Thanks for writing! Are you sure this is relevant with the latest release of Highcharts? In the OP demo, if we click the buttons, the charts now correctly adjust to the greater width: https://jsfiddle.net/xLz8tcrc/1/ This was not the case with v10: https://jsfiddle.net/highcharts/x8zf5gbj/ It was fixed in v11.0
|
Expected behaviour
If you have a flex container with css
display: flex;
flex-direction: row;
and 4 children with
flex-grow: 1;
flex-basis:25%;
You expect to have one row with 4 charts, each size of 25% of the parent.
Actual behaviour
Actual behaviour depends on the size of the parent it might be
4 items in one row with 25% (expected behaviour)
3 items of small size in one row and 100% item on the next row.
4 rows with 100% items inside it.
Live demo with steps to reproduce
http://jsfiddle.net/xLz8tcrc/1/
Affected browser(s)
Chrome
Firefox
The text was updated successfully, but these errors were encountered: