Pre loader

How to prevent chart resizing animation?

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
0
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.
  • You must to post comments
0
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
Showing 2 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