3D Tutorial 01 - Setting up a 3D Chart Project with SciChart.js

Creating a New SciChart.js Project

In this tutorial we will create a simple 3D Chart with SciChart.js. We'll show you how to create a new JavaScript project in VSCode and adding SciChart libraries as dependencies to it.

Source code for this tutorial can be found at our SciChart.Js.Examples Github Repository.



If you haven't done so already go ahead and download VSCode from https://code.visualstudio.com/. We will be using this for tutorials, but you can equally use WebStorm or any other IDE or text editor of your choice.

NPM / Node.js

You will also need to have npm installed. You can get npm from here: https://www.npmjs.com/get-npm

Creating the Project

Go ahead and open up VSCode and enter the terminal. Create a directory to host your tutorial, and type in the following command.

Initialising an npm project
Copy Code
> npm init

Choose defaults, I have named it tutorial1 and I want to use index.js for my package.json. SciChart.js supports both TypeScript and JavaScript ES6, however for the purposes of these tutorials we're going to be using plain JavaScript.

Installing SciChart via npm

SciChart.js is hosted on npm.org, so to install the package to your project simply use the command npm install scichart.

Initialising an npm project
Copy Code
> npm install scichart

Configuring Webpack

We're going to use webpack to make the smallest possible node.js JavaScript application for our tutorials. To install this, add the following commands.

Initialising an npm project
Copy Code
> npm install --save-dev webpack
> npm install --save-dev webpack-dev-server
> npm install --save-dev webpack-cli
> npm install --save-dev copy-webpack-plugin

Add Scripts to Package.json

By our our package.json should look something like this.

Copy Code
  "name": "tutorial1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
  "author": "",
  "license": "ISC",
  "dependencies": {
    "scichart": "^2.2.0"
  "devDependencies": {
    "copy-webpack-plugin": "^6.0.3",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"

Let's add a few more items to it so we can build the application.

Copy Code
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server"

Your package.json should look like this:

Creating webpack.config.js

Add a file to your project called webpack.config.js, and paste in the following code.

Note, the following highlighted lines are required to copy SciChart's WebAssembly files to your build directory.

Copy Code
const path = require("path");
const CopyPlugin = require("copy-webpack-plugin");
const webpack = require("webpack");
module.exports = {
    mode: "production",
    entry: "./src/index.js",
    module: {
        rules: []
    resolve: {
        extensions: [".js"]
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "build")
    plugins: [
        new CopyPlugin({
            patterns: [
                { from: "src/index.html", to: "" },
                { from: "node_modules/scichart3d/_wasm/scichart3d.data", to: "" },
                { from: "node_modules/scichart3d/_wasm/scichart3d.wasm", to: "" }
        new webpack.IgnorePlugin(/(fs)/)

Your project with webpack.config.js should look like this. In particular, notice the two lines which copy scichart3d.data and scichart3d.wasm to the output folder.

Creating Index.js / Index.html

We're going to create a simple Index.js / Index.html. Create and add these two files to the root of your project, and add this code.

Copy Code
<html lang="en-us">
        <meta charset="utf-8" />
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
        <title>SciChart.js Tutorial 1</title>
        <script async type="text/javascript" src="bundle.js"></script>
            body { font-family: 'Arial'}
        <h1>Hello SciChart.js world!</h1>
        <p>In this example we setup webpack, scichart and create a simple 3d chart with an X,Y and Z axis</p>
        <!-- the Div where the SciChartSurface will reside -->
        <div id="scichart-root" style="width: 800px; height: 600px;"></div>

SciChart.js simply needs a Div in your application to host the chart. We've added one above and given it the id=scichart-root.

Next we're going to add index.js, where we initialize and create a SciChart3DSurface.

Copy Code
import {SciChart3DSurface} from "scichart3D/charting/Visuals/SciChart3DSurface";
import {NumericAxis3D} from "scichart3D/charting/Visuals/Axis/NumericAxis3D";
async function initSciChart() {
    // Create the SciChart3DSurface in the div 'scichart-root'
    // The sciChart3DSurface, and webassembly context 'wasmContext' are paired. This wasmContext
    // instance must be passed to other types that exist on the same surface.
    const {sciChart3DSurface, wasmContext} = await SciChart3DSurface.create("scichart-root");
    // Create an X,Y Axis and add to the chart
    const xAxis = new NumericAxis3D(wasmContext);
    const yAxis = new NumericAxis3D(wasmContext);
    const zAxis = new NumericAxis3D(wasmContext);
    sciChart3DSurface.xAxis = xAxis;
    sciChart3DSurface.yAxis = yAxis;
    sciChart3DSurface.zAxis = zAxis;       
    // That's it! You just created your first SciChart3DSurface!

The SciChart.js API is pretty simple. In the code sample above we declare an instance of a SciChart3DSurface like this.

Declaring a SciChartSurface
Copy Code
// the div ID where you want to host the chart
const divId = "scichart-root";

// Create the SciChart3DSurface instance
const {sciChart3DSurface, wasmContext} = await SciChart3DSurface.create("scichart-root");

This function returns a SciChart3DSurface instance and a wasmContext (WebAssembly Context). You will need this context for all chart parts related to this chart. Don't share the wasmContext between charts!

Next, we add an X,Y,Z Axis. We do this by creating several NumericAxis3D, and setting them on the SciChartSurface.xAxis, yAxis and SciChartSurface.zAxis collections.

Declaring a SciChart3DSurface
Copy Code
// Create an X,Y Axis and add to the chart
const xAxis = new NumericAxis3D(wasmContext);
const yAxis = new NumericAxis3D(wasmContext);
const zAxis = new NumericAxis3D(wasmContext);
sciChart3DSurface.xAxis = xAxis;
sciChart3DSurface.yAxis = yAxis;
sciChart3DSurface.zAxis = zAxis;      

That's it! You have just created your first SciChart3DSurface using SciChart.js!

Building and Running the App

Ok now that we've set that all up, building and running should be pretty easy!

In the command line, simply type the following command.

Running the Tutorial
Copy Code
> npm start

Now visit http://localhost:8080 in your browser and voila! You should see a SciChart.js Chart!

A Note on Licensing SciChart.

The SciChart.js control comes with a fully-functional 30-day trial. You will need to apply a trial license to the applications that you build, including the tutorial.

A license key can be applied following the instructions at www.scichart.com/licensing-scichart-javascript.