Surpassing the limits of JavaScript for Charting with WebAssembly

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

打盹的板栗 · javascript 项目如何将数字转为 ...· 8 小时前 ·

不羁的上铺 · 怎么用手机玩端游-太平洋IT百科· 2 月前 ·

爱喝酒的葫芦 · Random dark ...· 2 月前 ·

暴躁的闹钟 · 神经网络复杂度_matlab神经网络的计算复 ...· 3 月前 ·

文武双全的铅笔 · python踩坑之exec变量作用域 - ...· 4 月前 ·

痴情的墨镜 · 新活广州丨这个假期就要吃最特别的文创月饼 ...· 4 月前 ·

</noscript><div id="page" class="site has-sc-notice"> <a class="skip-link screen-reader-text" href="#primary">Skip to content</a><div id="preloader" class="d-none"> <img data-src="https://www.scichart.com/wp-content/themes/scichartv6/assets/icons/loader.gif" alt="Pre loader" class="position-absolute top-50 start-50 translate-middle"/></div><header id="masthead" class="site-header"><div class="scichart-notice d-block w-100 position-relative text-md-center text-white py-1"><div class="container"><div class="row"><div class="col col-12"><div class="sci-notice"><div class="site-notice-content"><a class="text-white text-decoration-none" style="color: #fff !important;" title="Build React Charts with SciChart.js" href="https://www.scichart.com/blog/react-charts-with-scichart-js/">Introducing SciChart-React: a react wrapper for SciChart.js <span style="color: #5dc2bf;">Learn More</span></a></div></div></div></div></div></div><nav id="site-navigation" class="container-large px-md-5"><div class="row align-items-center"><div class="col col-7 col-md-3 col-xl-2 header-logo site-logo"> <a href="https://www.scichart.com/" class="text-decoration-none"><img src="https://www.scichart.com/wp-content/themes/scichartv6/assets/icons/scichart-logo.svg" alt="SciChart" width="312" height="69"/></a></div><div class="col col-5 col-md-9 col-xl-10 header-nav"> <a href="#site-navigation" data-class="menu-open" data-target="body" class="class-toggler d-block d-xl-none position-relative overflow-hidden main-menu-button ms-auto"> <i class="d-block start-0 top-0 position-absolute w-100 bg-white"/> <i class="d-block start-0 bottom-0 position-absolute w-100 bg-white"/> <span>Menu</span> </a><div class="class-toggler main-menu-shadow d-block d-xl-none position-fixed top-0 start-0 w-100 h-100" data-target="body" data-class="menu-open"/><div class="main-menu"><div class="menu-main-nav-container"><ul id="primary-menu" class="menu"><li id="menu-item-545" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-545"><a href="#">Why SciChart</a><ul class="sub-menu"><li id="menu-item-4509" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4509"><a title="Why SciChart for Developers" href="https://www.scichart.com/why-scichart-for-developers/">Why SciChart for Developers</a></li><li id="menu-item-4948" class="line menu-item menu-item-type-post_type menu-item-object-page menu-item-4948"><a title="Big Data Visualization and High Performance Charts" href="https://www.scichart.com/why-scichart-high-performance-realtime-big-data-charts/">Big Data High Performance</a></li><li id="menu-item-5033" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5033"><a title="Should you use Open Source Charts?" href="https://www.scichart.com/comparison-of-scichart-vs-open-source-chart-controls/">SciChart vs Open Source</a></li><li id="menu-item-7923" class="line menu-item menu-item-type-custom menu-item-object-custom menu-item-7923"><a title="Best WPF Charts" href="https://www.scichart.com/why-scichart-the-best-wpf-chart/">Best WPF Charts</a></li><li id="menu-item-7924" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-7924"><a title="Best JavaScript Charts" href="https://www.scichart.com/blog/the-best-javascript-chart-10-reasons/">Best JavaScript Charts</a></li><li id="menu-item-4956" class="line menu-item menu-item-type-post_type menu-item-object-page menu-item-4956"><a title="About SciChart – Our Company" href="https://www.scichart.com/about-us/">Our Company</a></li><li id="menu-item-7589" class="menu-item menu-item-type-post_type menu-item-object-blog_scichart menu-item-7589"><a title="About SciChart – Our Story" href="https://www.scichart.com/blog/from-small-beginnings-to-global-impact/">Our Story</a></li><li id="menu-item-598" class="line menu-item menu-item-type-post_type menu-item-object-page menu-item-598"><a title="SciChart Testomianals about Tech Support " href="https://www.scichart.com/why-scichart-world-class-tech-support/">World Class Tech Support</a></li><li id="menu-item-596" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-596"><a href="https://www.scichart.com/read-testimonials/">Testimonial &amp; Reviews</a></li></ul></li><li id="menu-item-3350" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-3350"><a href="#">Products</a><ul class="sub-menu"><li id="menu-item-7873" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-7873"><a title="Javascript Chart Library" href="https://www.scichart.com/javascript-chart-features/">JavaScript Charts</a></li><li id="menu-item-8501" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-8501"><a href="https://www.scichart.com/react-charts/">React Charts</a></li><li id="menu-item-547" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-547"><a title="WPF Charts" href="https://www.scichart.com/wpf-chart-features/">WPF Charts</a></li><li id="menu-item-548" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-548"><a title="WPF 3D Charts" href="https://www.scichart.com/wpf-3d-chart-features/">WPF 3D Charts</a></li><li id="menu-item-549" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-549"><a title="iOS Charts Swift Library" href="https://www.scichart.com/ios-chart-features/">iOS &amp; macOS Charts</a></li><li id="menu-item-550" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-550"><a title="Android Charts Library" href="https://www.scichart.com/android-chart-features/">Android Charts</a></li><li id="menu-item-3351" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-3351"><a title="Xamarin Charts" href="https://www.scichart.com/examples/xamarin-chart/">Xamarin Charts</a></li><li id="menu-item-5114" class="line menu-item menu-item-type-custom menu-item-object-custom menu-item-5114"><a title="Expert DataVisualization Consultancy Services" href="https://www.scichart.com/consultancy/">Consultancy Services</a></li><li id="menu-item-4949" class="line menu-item menu-item-type-custom menu-item-object-custom menu-item-4949"><a title="SciChart Store" href="https://store.scichart.com">Pricing</a></li></ul></li><li id="menu-item-566" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-566"><a title="SciChart Developer Zone" href="#">Developers</a><ul class="sub-menu"><li id="menu-item-4953" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4953"><a title="Get Started with SciChart" href="https://www.scichart.com/getting-started/">GET STARTED</a></li><li id="menu-item-579" class="line menu-item menu-item-type-post_type menu-item-object-page menu-item-579"><a title="Chart Library Examples and Demos" href="https://www.scichart.com/examples/">Examples</a></li><li id="menu-item-577" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-577"><a title="Chart Library Tutorials" href="https://www.scichart.com/read-tutorials/">Tutorials</a></li><li id="menu-item-578" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-578"><a title="Chart Library Documentation" href="https://www.scichart.com/read-documentation/">Documentation</a><ul class="sub-menu"><li id="menu-item-8029" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-8029"><a title="WPF Chart Documentation" href="https://www.scichart.com/documentation/win/current/webframe.html#SciChart_WPF_SDK_User_Manual.html">WPF Docs</a></li><li id="menu-item-8028" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-8028"><a title="JS Chart Documentation" href="https://www.scichart.com/documentation/js/current/webframe.html#SciChart_JS_User_Manual.html">JS Docs</a></li><li id="menu-item-8030" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-8030"><a title="Android Charts Documentation" href="https://scichart.com/documentation/android/current/">Android Docs</a></li><li id="menu-item-8031" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-8031"><a title="iOS Charts Documentation" href="https://www.scichart.com/documentation/ios/current/">iOS Docs</a></li></ul></li><li id="menu-item-8108" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-8108"><a title="Chart Library Changelog" href="#">Changelog</a><ul class="sub-menu"><li id="menu-item-8113" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-8113"><a title="WPF Chart Library Changelog" href="https://www.scichart.com/changelog/scichart-wpf/">SciChart WPF Changelog</a></li><li id="menu-item-8109" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-8109"><a title="JS Chart Library Changelog" href="https://scichart.com/changelog/scichart-js/">SciChart.js Changelog</a></li><li id="menu-item-8610" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-8610"><a title="iOS Android Charts Changelog" href="https://www.scichart.com/changelog/scichart-ios-android/">iOS Android Changelog</a></li></ul></li><li id="menu-item-6893" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-6893"><a title="BigData Visualization Forums" href="https://www.scichart.com/questions/">Forums</a><ul class="sub-menu"><li id="menu-item-6973" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-6973"><a title="WPF Chart Library Forums" href="https://scichart.com/questions/categories/wpf">WPF Forums</a></li><li id="menu-item-6972" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-6972"><a title="JavaScript Chart Library Forums" href="https://www.scichart.com/questions/categories/js">JS Forums</a></li><li id="menu-item-6975" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-6975"><a title="Android Charts Forums" href="https://scichart.com/questions/categories/android">Android Forums</a></li><li id="menu-item-6974" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-6974"><a title="iOS Charts Forums" href="https://scichart.com/questions/categories/ios">iOS Forums</a></li></ul></li><li id="menu-item-582" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-582"><a title="StackOverflow" target="_blank" rel="noopener" href="https://stackoverflow.com/questions/tagged/scichart">StackOverflow</a><ul class="sub-menu"><li id="menu-item-7053" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-7053"><a title="SciChart Tag on StackOverflow" href="https://stackoverflow.com/questions/tagged/scichart">SciChart tag</a></li><li id="menu-item-7054" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-7054"><a title="SciChart.js Tag on StackOverflow" href="https://stackoverflow.com/questions/tagged/scichart.js">SciChart.js tag</a></li></ul></li><li id="menu-item-581" class="line menu-item menu-item-type-custom menu-item-object-custom menu-item-581"><a title="Chart Library Technical Support" href="https://www.scichart.com/contact-us/#tech-support">Support</a></li><li id="menu-item-7080" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-7080"><a title="Chart Library Licensing" href="https://www.scichart.com/licensing-scichart/">Licensing</a></li><li id="menu-item-4952" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4952"><a title="Chart Library Downloads" target="_blank" rel="noopener" href="https://www.scichart.com/downloads/">Downloads</a></li></ul></li><li id="menu-item-3835" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-3835"><a href="#">Showcase</a><ul class="sub-menu"><li id="menu-item-4193" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4193"><a href="https://www.scichart.com/examples/javascript-chart/">JavaScript Examples</a></li><li id="menu-item-3836" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-3836"><a href="https://www.scichart.com/examples/wpf-chart/">WPF Examples</a></li><li id="menu-item-4954" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4954"><a href="https://www.scichart.com/examples/3d-charts-wpf-chart/">WPF 3D Examples</a></li><li id="menu-item-3837" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-3837"><a href="https://www.scichart.com/examples/ios-chart/">iOS &amp; macOS Examples</a></li><li id="menu-item-3838" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-3838"><a href="https://www.scichart.com/examples/android-chart/">Android Examples</a></li><li id="menu-item-5069" class="line menu-item menu-item-type-custom menu-item-object-custom menu-item-5069"><a href="https://www.scichart.com/case-studies/">Case Studies</a></li></ul></li><li id="menu-item-3358" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-3358"><a title="DataVisualization Industries and Applications" href="#">Industries</a><ul class="sub-menu"><li id="menu-item-3359" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3359"><a href="https://www.scichart.com/why-scichart-best-for-financial-stock-trading-applications/">Financial &amp; Trading</a></li><li id="menu-item-7424" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7424"><a href="https://www.scichart.com/why-scichart-medical-charts-dashboarding-for-research-and-healthcare/">Medical &amp; Research</a></li><li id="menu-item-8025" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8025"><a href="https://www.scichart.com/why-scichart-diagnostics-lifesciences/">Diagnostics &amp; Lifesciences</a></li><li id="menu-item-7320" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7320"><a href="https://www.scichart.com/why-scichart-best-for-motosport-and-automotive/">Motorsport &amp; Automotive</a></li><li id="menu-item-7331" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7331"><a href="https://www.scichart.com/why-scichart-perfect-for-datavisualization-in-the-oil-gas-industry-using-scichart/">Oil &amp; Gas</a></li><li id="menu-item-7496" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-7496"><a href="https://www.scichart.com/why-scichart-aerospace-defence/">Aerospace &amp; Defence</a></li><li id="menu-item-9663" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9663"><a href="https://www.scichart.com/design-emulation-test/">Design, Emulation &amp; Test</a></li></ul></li><li id="menu-item-4955" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-4955"><a href="#">News</a><ul class="sub-menu"><li id="menu-item-3305" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-3305"><a title="Chart Library Blog" href="https://www.scichart.com/blog/">Blogs</a></li><li id="menu-item-561" class="menu-item menu-item-type-post_type menu-item-object-page current_page_parent menu-item-561"><a href="https://www.scichart.com/news/">Releases &amp; News</a></li></ul></li><li id="menu-item-7783" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7783"><a href="https://www.scichart.com/contact-us/">Contact Us</a></li><li id="menu-item-5373" class="button menu-item menu-item-type-custom menu-item-object-custom menu-item-5373"><a href="https://www.scichart.com/shop/">Buy Now</a></li><li id="menu-item-cta-alt" class="button dark menu-item menu-item-type-custom menu-item-object-custom menu-item-cta"><a href="https://www.scichart.com/getting-started/" target="">FREE Trial</a></li><li class="menu-item-has-children children-end menu-item scichart-login-link button-icon login"><a href="#login">Log In</a><ul class="sub-menu"><li class="menu-item"><a href="https://www.scichart.com/login/">Login</a></li><li class="menu-item"><a href="https://www.scichart.com/register/">Register</a></li></ul></li></ul></div></div></div></div></nav></header><section id="top" class="bg-gradient d-block w-100 position-relative overflow-hidden"><div class="container position-relative"><div class="row justify-content-center align-items-end py-4"><div class="col col-12 col-xl-8 text-white py-4"><h1 class="my-3 sc-hero-banner-heading">Reaching and surpassing the limits of JavaScript BigData with WebAssembly</h1></div></div></div></section><section id="breadcrumbs" class="bg-light py-2"><div class="container"><div class="row justify-content-center"><div class="col col-12 col-xl-8"><nav class="breadcrumb dark mx-auto mb-0"><span><span><a href="https://www.scichart.com/">Home</a></span> <span class="sep"/> <span><a href="https://www.scichart.com/blog/">Blogs</a></span> <span class="sep"/> <span class="breadcrumb_last" aria-current="page">Reaching and surpassing the limits of JavaScript BigData with WebAssembly</span></span></nav></div></div></div></section><main id="primary" class="site-main"><div class="container content-space"><div class="row justify-content-center"><div class="col col-12 col-xl-10 wysiwyg-post wysiwyg overflow-images"><div class="term-list-slide-wrapper text-center mb-5 position-relative overflow-hidden"><p class="h5 fw-bold mt-0 mb-4">Categories</p><div class="swiper-faded position-absolute top-50 translate-middle-y start-0 h-100"/><div class="swiper-faded position-absolute top-50 translate-middle-y end-0 h-100"/><div class="swiper auto-init" data-options="{&quot;slidesPerView&quot;:&quot;auto&quot;,&quot;spaceBetween&quot;:10}"><div class="swiper-wrapper justify-content-center"><div class="swiper-slide w-auto"> <a href="https://www.scichart.com/tag/javascript/" class="button outline" data-title="JavaScript">JavaScript</a></div><div class="swiper-slide w-auto"> <a href="https://www.scichart.com/tag/performance/" class="button outline" data-title="Performance">Performance</a></div><div class="swiper-slide w-auto"> <a href="https://www.scichart.com/tag/scichart-js/" class="button outline" data-title="SciChart.js">SciChart.js</a></div><div class="swiper-slide w-auto"> <a href="https://www.scichart.com/tag/webassembly/" class="button outline" data-title="WebAssembly">WebAssembly</a></div></div></div></div></div><div class="col-12 col-xl-10"><img src="https://www.scichart.com/wp-content/uploads/2021/12/javascript-code-feature.png" alt="Reaching and surpassing the limits of JavaScript BigData with WebAssembly" class="w-100 mb-5 shadow-sm rounded"/></div><div class="col col-12 col-xl-8 wysiwyg-post wysiwyg overflow-images"> <span class="card-post-date">2nd December, 2021</span><p>We’re working on an enhancement to SciChart.js – our WebAssembly &amp; WebGL Big Data <a href="https://www.scichart.com/javascript-chart-features/">JavaScript Chart library</a> to push the boundaries of performance. Recently we blogged that an internal build of SciChart.js can now <a href="/javascript-chart-performance-plotting-10-million-datapoints/">plot 10 Million Datapoints</a> in under 25ms. That’s pretty astonishing for a JavaScript chart control! 👉</p><p>We wanted to see if SciChart could go any further and plot even bigger data (100 Million Datapoints in a Line Chart), but we hit a browser limit…</p><p>If you allocate an array of size 100,000,000 (100 Million) in JavaScript, you get a strange error: <a href="https://stackoverflow.com/questions/70198991/javascript-pre-allocated-array-uncaught-rangeerror-invalid-array-length">Uncaught RangeError: Invalid Array Length</a>. Here’s the code to reproduce it. Try it out, in the developer console in Chrome:</p><div class="wp-block-scichart-code-snippet"><pre class="line-numbers code-toolbar language-js">const COUNT = 100_000_000; const xValues = new Array(COUNT); const yValues = new Array(COUNT); for (let i = 0; i &lt; COUNT; i++) { xValues[i] = i; yValues[i] = Math.sin(i * 0.000001); console.log(`count: ${yValues.length}`);</pre></div><p>This will throw an exception in JavaScript pretty consistently.</p><figure class="wp-block-image size-full"><img decoding="async" src="https://www.scichart.com/wp-content/uploads/2022/05/image-8.png" alt="" class="wp-image-33170"/></figure><p>This puzzled me as I expected this to work easily, so I turned to StackOverflow to see if the JavaScript development community had an explanation. <a href="https://stackoverflow.com/q/70198991/303612">Here’s the Question &amp; Answer</a>.</p><h2 class="wp-block-heading" id="the-limits-of-javascript-memory-numerics-in-browser">The Limits of JavaScript Memory &amp; Numerics in Browser</h2><p>It turns out, according to <a href="https://stackoverflow.com/a/70202993/303612">this answer</a>, JavaScript stores numbers as objects instead of double-precision (8-bytes per value). So an array of numbers is an array of objects on the heap. An <a href="https://stackoverflow.com/a/70202993/303612">object takes 50 bytes or more</a> on the JS heap, so 100M numbers requires ~5GB of memory. The browser heap limit is 4GB so with just 100 Million numbers in an array we’re running out of memory in the browser.</p><p>We’ll never know if SciChart.js can plot 100 Million datapoints 😢 Or will we?</p><h2 class="wp-block-heading" id="how-webassembly-manages-memory">How WebAssembly manages memory</h2><p>We’ve built our <a href="https://www.scichart.com/javascript-chart-features/">High Performance JavaScript Charts</a> on a tried &amp; tested C++ codebase that we also use in our <a href="https://www.scichart.com/wpf-chart-features">WPF Charts</a>, <a href="https://www.scichart.com/ios-chart-features/">iOS Charts</a> &amp; <a href="https://www.scichart.com/android-chart-features/">Android Charts</a>. This code-sharing allowed us to become truly cross-platform, truly native, and truly high performance for our 2D &amp; 3D chart controls.</p><p>With <a href="https://webassembly.org/">WebAssembly</a> we can compile our C++ codebase into a wasm module for the browser. So when you look at a SciChart.js chart you’re actually seeing our C++ graphics engine wrapped for JavaScript.</p><p>Let’s see if we can work around this memory limit in JavaScript using SciChart.js DataSeries, which uses WebAssembly.</p><p>First up the boilerplate code for setting up a SciChartSurface in SciChart.js:</p><div class="wp-block-scichart-code-snippet"><pre class="line-numbers code-toolbar language-js">// Setup the SciChartSurface // Create a SciChartSurface with X,Y Axis const { wasmContext, sciChartSurface } = await SciChartSurface.create(divElementId); sciChartSurface.xAxes.add(new NumericAxis(wasmContext)); sciChartSurface.yAxes.add(new NumericAxis(wasmContext)); // Create a Line RenderableSeries / DataSeries pair const dataSeries = new XyDataSeries(wasmContext); sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, { dataSeries </pre></div><p>Now appending the data. If we try 100 Million points in JavaScript arrays it fails for reasons mentioned before</p><div class="wp-block-scichart-code-snippet"><pre class="line-numbers code-toolbar language-js">// Create some x &amp; y values in JavaScript Arrays const COUNT = 100_000_000; const xValues = new Array(COUNT); const yValues = new Array(COUNT); let prevYValue = 0; for (let i = 0; i &lt; COUNT; i++) { const curYValue = Math.random() - .5; xValues[i] = i; // CRASH here with Uncaught RangeError: Invalid Array Length yValues[i] = prevYValue + curYValue; prevYValue += curYValue; // Append Js Arrays to the SciChart DataSeries. // SciChart will draw the series dataSeries.appendRange(xValues, yValues);</pre></div><p>Instead of creating a 100 Million element JavaScript array, let’s create 10 blocks of 10 Million datapoints and append them to a SciChart.js DataSeries, which uses the WebAssembly heap to hold double-precision numbers:</p><div class="wp-block-scichart-code-snippet"><pre class="line-numbers code-toolbar language-js">// Using SciChart's DataSeries, reserve memory for 100 Million elements dataSeries.getNativeXValues().reserve(100_000_000); dataSeries.getNativeYValues().reserve(100_000_000); let prevYValue = 0; let x = 0; for (let i = 0; i &lt; 10; i++) { console.log(`${i}: Building block. Total ${10_000_000 * (i + 1)}`); const xValues = new Array(10_000_000); const yValues = new Array(10_000_000); for (let j = 0; j &lt; BlockSize; j++) { const curYValue = Math.random() - .5; xValues[j] = x++; yValues[j] = prevYValue + curYValue;