The root 3D chart view is called the SciChart3DSurface. This is the JavaScript chart control you will be adding to your applications wherever you need a 3D chart. You can add more than one SciChart3DSurface to an HTML page, you can configure them independently.
Let's start by declaring one:
This results in the following output:
<div class="wrapper">
<div id="scichart-root" ></div>
<div class="titleWrapper">
<p class="title">SciChart.js 3D Chart Example</p>
<p class="subTitle">Drag the mouse to rotate, use MouseWheel to zoom</p>
<p class="subTitle">Double-click to reset zoom</p>
</div>
</div>
body { margin: 0; font-family: Arial; }
.wrapper { width: 100%; height: 100vh; position: relative; }
#scichart-root { width: 100%; height: 100%; position: relative; }
.titleWrapper { position: absolute; width: 100%; top: 35%; text-align: center; pointer-events: none; color: #ffffff77 }
.title { font-size: 20px; }
.subTitle { font-size: 16px; }
async function simple3DChart(divElementId) {
// #region ExampleA
// Demonstrates how to create a 3D chart with X,Y,Z axis in SciChart.js
const {
SciChart3DSurface,
NumericAxis3D,
Vector3,
SciChartJsNavyTheme,
MouseWheelZoomModifier3D,
OrbitModifier3D,
ResetCamera3DModifier,
} = SciChart;
// or, for npm, import { SciChart3DSurface, ... } from "scichart"
// Create a SciChart3DSurface in the host <div id=".." />
const { wasmContext, sciChart3DSurface } = await SciChart3DSurface.create(divElementId, {
// Optional theme
theme: new SciChartJsNavyTheme(),
// Optional dimensions of the axis cube (X,Y,Z) in World coordinates
worldDimensions: new Vector3(300, 200, 300),
// Optional initial camera position and target
cameraOptions: {
position: new Vector3(300, 300, 300),
target: new Vector3(0, 50, 0),
}
});
// SciChart.js 3D supports only a single x,y,z axis. Declare your axis like this
sciChart3DSurface.xAxis = new NumericAxis3D(wasmContext, { axisTitle: "X Axis" });
sciChart3DSurface.yAxis = new NumericAxis3D(wasmContext, { axisTitle: "Y Axis" })
sciChart3DSurface.zAxis = new NumericAxis3D(wasmContext, { axisTitle: "Z Axis" });
// Optional: add zooming, panning for the example
sciChart3DSurface.chartModifiers.add(
new MouseWheelZoomModifier3D(), // provides camera zoom on mouse wheel
new OrbitModifier3D(), // provides 3d rotation on left mouse drag
new ResetCamera3DModifier()); // resets camera position on double-click
// #endregion
};
simple3DChart("scichart-root");
Breaking the example down
Referencing SciChart library & Imports
First need to have the correct scripts and imports. When loading SciChart.js in pure javascript (no npm), this is done by including index.min.js from jsdelivr.com/package/npm/scichart and declaring constants as follows:
| Imports for SciChart3D.js |
Copy Code
|
|---|---|
<script src="https://cdn.jsdelivr.net/npm/scichart/index.min.js"></script> const { SciChart3DSurface, NumericAxis3D, Vector3, SciChartJsNavyTheme, MouseWheelZoomModifier3D, OrbitModifier3D, ResetCamera3DModifier, } = SciChart; |
|
If using npm, instead you can import types from "scichart":
| Imports for SciChart3D.js |
Copy Code
|
|---|---|
// npm install scichart import { SciChart3DSurface, NumericAxis3D, Vector3, SciChartJsNavyTheme, MouseWheelZoomModifier3D, OrbitModifier3D, ResetCamera3DModifier, } from "scichart"; |
|
Creating the 3D SciChartSurface
Once you have referenced the library and have the correct imports or constants, you can now use SciChart's API to create a 3D chart surface.
| Imports for SciChart3D.js |
Copy Code
|
|---|---|
// Create a SciChart3DSurface in the host <div id=".." /> const { wasmContext, sciChart3DSurface } = await SciChart3DSurface.create(divElementId, { // Optional theme theme: new SciChartJsNavyTheme(), // Optional dimensions of the axis cube (X,Y,Z) in World coordinates worldDimensions: new Vector3(300, 200, 300), // Optional initial camera position and target cameraOptions: { position: new Vector3(300, 300, 300), target: new Vector3(0, 50, 0), } }); // SciChart.js 3D supports only a single x,y,z axis. Declare your axis like this sciChart3DSurface.xAxis = new NumericAxis3D(wasmContext, { axisTitle: "X Axis" }); sciChart3DSurface.yAxis = new NumericAxis3D(wasmContext, { axisTitle: "Y Axis" }) sciChart3DSurface.zAxis = new NumericAxis3D(wasmContext, { axisTitle: "Z Axis" }); |
|
This will now show a 3D chart on the screen with default sizing of the X,Y,Z axis and position of the 3D camera.
Serving Wasm (WebAssembly) and Data Files
At this point you may get an error in the console depending on your environment:
If so, find out how to resolve this at the page Deploying Wasm and Data files.
Adding Optional Zoom & Pan Behaviour
The last step, In SciChart.js interactivity is provided by ChartModifiers. These are classes which inherit ChartModifierBase which receive events such as mouseDown, mouseMove, mouseUp. All the zooming, panning, tooltip and interaction behaviour in SciChart.js comes from the modifier API which is shared between 2D and 3D SciChart.
You can declare and add some built-in modifiers to add zooming, panning behaviour to the chart. Find these below:
| Imports for SciChart3D.js |
Copy Code
|
|---|---|
// Optional: add zooming, panning for the example sciChart3DSurface.chartModifiers.add( new MouseWheelZoomModifier3D(), // provides camera zoom on mouse wheel new OrbitModifier3D(), // provides 3d rotation on left mouse drag new ResetCamera3DModifier()); // resets camera position on double-click |
|
Congratulations! You have just created your first SciChart3DSurface!