Pre loader

How to prevent chart resizing animation?

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums

1
0

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%;
}

Version
2.2.2415
  • You must to post comments
1
0

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

  • Kelly Chan
    The problem seems gone after I switched to the paid license. Is it because of the different versions?
  • Kelly Chan
    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.
  • Andrew Burnett-Thompson
    Hi Kelly, I tried to reproduce this recently, please log back into the forums and check my answer
  • You must to post comments
1
0

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;
}
  • You must to post comments
1
0

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

  • You must to post comments
Showing 3 results
Your Answer

Please first to submit.

Try SciChart Today

Start a trial and discover why we are the choice
of demanding developers worldwide

Start TrialCase Studies