Instantiating a new SciChart3DSurface (a new Chart) is accomplished with the SciChart3DSurface.create() function. We have some variations on this function which can be used in different scenarios. We'll go through these as well as WebAssembly (wasm) file loading below.

SciChart3DSurface.create()

The first function to create a 3D chart in SciChart.js is simply SciChart3DSurface.create(). This is an asynchronous static function which places a SciChart3DSurface (a single chart with X, Y, Z axis and one to many series) into the HTML Dom. It will also load WebAssembly files and initialise our 3D WebGL engine for the first chart load.

import {SciChart3DSurface} from "scichart";
async function initSciChart1() {
    // Assumes a div in your HTML <div id="scichart-div-1"></div>
    const { sciChart3DSurface, wasmContext } = await SciChart3DSurface.create("scichart-div-id");
    // Now manipulate the SciChart3DSurface, adding axis, series and more

    // When you exit the page and no longer want the chart to draw, call .delete() to free memory
    sciChart3DSurface.delete();
}

SciChart3DSurface.createSingle()

SciChart3DSurface.createSingle() is also an asynchronous static function which places a SciChart3DSurface into the DOM. However, this variation forces one WebGL context per chart. This can improve performance in multi-chart scenarios but you must obey the WebGL Context Limits per browser. More on this in our Performance Tips article.

import {SciChartSurface} from "scichart";
async function initSciChart1() {
    // Assumes a div in your HTML <div id="scichart-div-1"></div>
    const { sciChart3DSurface, wasmContext } = await SciChart3DSurface.createSingle("scichart-div-id");
    // Now manipulate the SciChart3DSurface, adding axis, series and more

    // When you exit the page and no longer want the chart to draw, call .delete() to free memory
    sciChart3DSurface.delete();
} 

Resolving Wasm errors on load

If you get an error when loading a SciChart3DSurface as follows:

If so, find out how to resolve this at the page Deploying Wasm and Data files.