I have a chart in the center of the page and the chart will resize according to the browser window size. When I expand the browser window, the chart will expand to fit the browser size. In this case, the chart grows downward gradually (with animation). How can I remove this animation effect when resizing the chart?
In case it’s related to my style. Here are my markup and style for reference:
//Markup
//Style
.contentPanel {
flex: 1 1 auto;
width: calc(100% – 335px);
max-height: calc(100vh – 108px);
display: flex;
flex-direction: column;
}
.chartContainer {
position: relative;
margin: 10px 0;
display: flex;
flex-direction: column;
flex: 1;
}
.scichart-root {
width: 100%;
height: 100%;
}
- Kelly Chan asked 2 years ago
- last edited 2 years ago
- You must login to post comments
Sorry for the delayed response Kelly, I genuinely didn’t see it because the question when it has been answered, if it doesn’t contain enough info to reproduce, gets lost in a sea of emails.
Anyway I tried to reproduce with the steps you provided and created this codepen
I don’t see a problem here, perhaps you can fork the codepen and modify it until the problem can be seen?
Note I am using version 3.0.269 of SciChart.js, the SciChart.browser.js script is included in the settings for the codepen.
Best regards,
Andrew
- Andrew Burnett-Thompson answered 2 years ago
- last edited 2 years ago
- You must login to post comments
Hi Kelly,
We have made some improvements in the internal build of SciChart.js as there was a resizing bug that we discovered.
To test if this is fixed for you – can you send us some code to reproduce the above issue? If you can send that, we can test against the latest official release (v2.2) as well as the next release (v3.0-alpha)
Best regards,
Andrew
- Andrew Burnett-Thompson answered 2 years ago
The problem seems gone after I switched to the paid license. Is it because of the different versions?- I just found the reason why the problem is gone. In my page layout, there are left column, middle column containing the chart and right column. By default, only the middle column with chart will stretch to fit the whole height of the browser window. I got the resize animation issue at that time. When I expand the modules in right column, it will stretch to fit the whole height of the browser window as well. Then the resize animation seems “gone”. However, if I collapse all the modules in right column, the resize animation issue appears again.
Hi Kelly, I tried to reproduce this recently, please log back into the forums and check my answer
- You must login to post comments
Below are some codes for reproducing the issue. Hope it can help.
Markup:
<div className="wrapper">
<div id="leftPanel">
<!-- child components here -->
</div>
<div id="contentPanel">
<div id="topPanel">
<!-- child components here -->
</div>
<div id="specChartContainer" className="chartContainer">
<div id="scichart-root"></div>
<div className="freqDisplay">
<!-- child components here -->
</div>
</div>
</div>
<div id="rightPanel">
<!-- child components here -->
</div>
</div>
CSS:
.wrapper {
display: flex;
width: 100%;
align-items: stretch;
padding: 0 0 10px;
}
#leftPanel {
position: relative;
min-width: 150px;
max-width: 150px;
margin-left: 0;
border: 1px solid #eee;
border-radius: 5px;
display: flex;
flex-direction: column;
padding: 0;
transition: all 0.3s;
}
#rightPanel {
min-width: 185px;
max-width: 185px;
margin-right: 0;
transition: all 0.3s;
}
#contentPanel {
flex: 1 1 auto;
width: calc(100% - 335px);
max-height: calc(100vh - 108px);
display: flex;
flex-direction: column;
}
#topPanel {
border: 1px solid #eee;
border-radius: 5px;
margin: 0 10px;
font-size: 1.1rem;
display: flex;
flex-direction: column;
gap: 5px;
}
.chartContainer {
position: relative;
margin: 10px 0;
display: flex;
flex-direction: column;
flex: 1;
}
#scichart-root {
width: 100%;
height: 100%;
}
.freqDisplay {
font-size: 1.1rem;
padding: 0 12px 0 55px;
}
- Kelly Chan answered 2 years ago
- last edited 2 years ago
- You must login to post comments
Please login first to submit.
