Zooming and Panning a Chart in SciChart.js is achieved by moving the SciChart3DSurface.camera to a new location.
The article "The SciChart3DSurface Camera" goes into detail how this camera class works and how to manipulate it programatically to achieve various views.
If you want to add simple zooming in/out of the camera to the chart then you can do so using our ChartModifiers API. The MouseWheelZoomModifier3D performs movement of the camera by adjusting the radius proprerty, giving the appearance of the chart zooming.
Declaring an MouseWheelZoomModifier3D
Declaring a MouseWheelZoomModifier3D is as simple as adding one to the SciChart3DSurface.chartModifiers property. This can be done as a single modifier, or as part of a group.
This results in the following behaviour added to the chart.
<div class="wrapper"> <div id="scichart-root" ></div> <div class="titleWrapper"> <p class="title">SciChart.js 3D Chart Example</p> <p class="subTitle">Use the Mouse Wheel to Zoom the 3D chart</p> </div> <div id="debug-camera"> <!-- Debug output from camera will be put here --> </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; } #debug-camera { pointer-events: none; position: absolute; left: 10px; top: 10px; color: #FFFFFF; background: #00000077; padding: 10px; font-size: 13px }
async function mouseWheelZoom3D(divElementId) { const { SciChart3DSurface, NumericAxis3D, Vector3, SciChartJsNavyTheme, } = 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" }); const camera = sciChart3DSurface.camera; // propertyChanged is raised each time any property changes on the camera camera.propertyChanged.subscribe((args) => { // Log current properties to console. debugOutput returns array of strings const cameraDebug = camera.debugOutput(); // Output the same information to a div on the page document.getElementById("debug-camera").innerHTML = cameraDebug.map(line => `<p>${line}</p>`).join(""); }); camera.target = new Vector3(0, 60, 0); // #region ExampleA const { MouseWheelZoomModifier3D } = SciChart; // or for npm: import { MouseWheelZoomModifier3D } from "scichart" sciChart3DSurface.chartModifiers.add( new MouseWheelZoomModifier3D(), ); // #endregion }; mouseWheelZoom3D("scichart-root");