Getting Started
with SciChart JS v4

To use SciChart.js in a pure JavaScript environment (no npm, no webpack, no typescript), carry out the following steps.

Note: We recommend using npm & webpack. Check out the other examples on the left tab.

Step 1: Reference index.min.js in your app

Add a script to include scichart.js to your HTML page, for example:

<!-- Reference the latest version. Not recommended for production! -->
<script src="https://cdn.jsdelivr.net/npm/scichart/index.min.js" crossorigin="anonymous"></script>

Or,

<!-- Reference a specific version. Recommended for prod -->
<script src="https://cdn.jsdelivr.net/npm/scichart@4.0/index.min.js" crossorigin="anonymous">
</script>

Step 2: Import SciChart.js types

All exported types are stored in the variable SciChart. To import types that you will need, use this code:

// Import the types you will need. You can add more later
const { 
    SciChartSurface,
    NumericAxis,
    FastLineRenderableSeries,
    XyDataSeries,
    EllipsePointMarker,
    SweepAnimation,
    SciChartJsNavyTheme,
    NumberRange,
    MouseWheelZoomModifier,
    ZoomPanModifier,
    ZoomExtentsModifier
} = SciChart;

Step 3: Create a chart

You should be ready to use SciChart! Create your first chart with some code like this:

const initSciChart = async () => {

  // Initialize SciChartSurface. Don't forget to await!
  const { sciChartSurface, wasmContext } = await SciChartSurface.create("scichart-root", {
    theme: new SciChartJsNavyTheme(),
    title: "SciChart.js First Chart",
    titleStyle: { fontSize: 22 }
  });

  // Create an XAxis and YAxis with growBy padding
  const growBy = new NumberRange(0.1, 0.1);
  sciChartSurface.xAxes.add(new NumericAxis(wasmContext, { axisTitle: "X Axis", growBy }));
  sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { axisTitle: "Y Axis", growBy }));

  // Create a line series with some initial data
  sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {
    stroke: "steelblue",
    strokeThickness: 3,
    dataSeries: new XyDataSeries(wasmContext, {
      xValues: [0,1,2,3,4,5,6,7,8,9],
      yValues: [0, 0.0998, 0.1986, 0.2955, 0.3894, 0.4794, 0.5646, 0.6442, 0.7173, 0.7833]
    }),
    pointMarker: new EllipsePointMarker(wasmContext, { width: 11, height: 11, fill: "#fff" }),
    animation: new SweepAnimation({ duration: 300, fadeEffect: true })
  }));

  // Add some interaction modifiers to show zooming and panning
  sciChartSurface.chartModifiers.add(
    new MouseWheelZoomModifier(), 
    new ZoomPanModifier(), 
    new ZoomExtentsModifier()
  );
};

initSciChart();

Here’s how it should look!

By default when index.min.js is included, SciChart loads WebAssembly files from CDN by calling SciChartSurface.useWasmFromCDN(). Other options including local deployment can be found here.

Edit this on CodepenGot Questions?

To use SciChart.js in a React app with npm & webpack, we recommend using the official scichart-react library.

Step 1: Install SciChart.js & scichart-react

If you haven’t already, add SciChart.js & scichart-react to your React application.

npm install scichart
npm install scichart-react

Step 2: Wasm file deployment

SciChart.js uses WebAssembly files which must be served. The easiest way to do this is to copy the wasm files from the node_modules/scichart/_wasm folder to your output folder.

e.g. with webpack.config.js:

 plugins: [
    new CopyPlugin({
      patterns: [
        { from: "src/index.html", to: "" },
        { from: "node_modules/scichart/_wasm/scichart2d.wasm", to: "" },
        // Optional, if using 3D charts
        { from: "node_modules/scichart/_wasm/scichart3d.wasm", to: "" },
      ],
    })
  ],

Note: other methods to load wasm from CDN are available to simplify getting started

Step 3: Creating the Chart

After that, you can create a function to create a SciChartSurface like this.

import {
  SciChartSurface,
  NumericAxis,
  FastLineRenderableSeries,
  XyDataSeries,
  EllipsePointMarker,
  SweepAnimation,
  SciChartJsNavyTheme,
  NumberRange
} from "scichart";

async function initSciChart() {
  // Initialize SciChartSurface. Don't forget to await!
  const { sciChartSurface, wasmContext } = await SciChartSurface.create("scichart-root", {
    theme: new SciChartJsNavyTheme(),
    title: "SciChart.js First Chart",
    titleStyle: { fontSize: 22 }
  });

  // Create an XAxis and YAxis with growBy padding
  const growBy = new NumberRange(0.1, 0.1);
  sciChartSurface.xAxes.add(new NumericAxis(wasmContext, { axisTitle: "X Axis", growBy }));
  sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { axisTitle: "Y Axis", growBy }));

  // Create a line series with some initial data
  sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {
    stroke: "steelblue",
    strokeThickness: 3,
    dataSeries: new XyDataSeries(wasmContext, {
      xValues: [0,1,2,3,4,5,6,7,8,9],
      yValues: [0, 0.0998, 0.1986, 0.2955, 0.3894, 0.4794, 0.5646, 0.6442, 0.7173, 0.7833]
    }),
    pointMarker: new EllipsePointMarker(wasmContext, { width: 11, height: 11, fill: "#fff" }),
    animation: new SweepAnimation({ duration: 300, fadeEffect: true })
  }));

  return { sciChartSurface };
}

Step 4: Create a React Component

Charts can be initialized with the SciChartReact component. This handles full component lifecycle including delete on unmount.

function App() {
  return (
    <div className="App">
      <SciChartReact initChart={initSciChart} 
          onInit={(initResult) => console.log(initResult.sciChartSurface.id + ` was created`);
          onDelete={(initResult) => console.log(initResult.sciChartSurface.id + ` was deleted`);
          style={{ maxWidth: 900 }} />
    </div>
  );
}

Running the example

Get the full example on Github to explore further.

Other examples of usage can be found here:

• Blog Post: Introducing SciChart-React
• Tutorial: Setting up a project with scichart-react and config object
• SciChart-React github repository.

npm install
npm start

Open On Github

To use SciChart.js in an Angular app with npm, you can use an official wrapper – SciChart.Angular.

Carry out the following steps:

Step 1: Install SciChart.js and SciChart.Angular

If you haven’t already, add SciChart.js and SciChart.Angular to your Angular application.

npm install scichart scichart-angular

Step 2: Wasm file deployment

import { SciChartSurface, SciChart3DSurface } from "scichart";
// ...
SciChartSurface.loadWasmFromCDN();
SciChart3DSurface.loadWasmFromCDN();

In Angular, do this: copy the wasm files from the node_modules/scichart/_wasm folder to your output folder. For Angular version 20 this can be done by modifying angular.json file

"assets": [
  // ...
  {
    "glob": "scichart2d.wasm",
    "input": "node_modules/scichart/_wasm",
    "output": "/"
  },
  {
    "glob": "scichart3d.wasm",
    "input": "node_modules/scichart/_wasm",
    "output": "/"
  }
],

Note: other methods to load wasm from CDN are available to simplify getting started

Step 3: Initialising the Chart

Config Approach

HTML:

  <div class="chart-wrapper" style="width: 600px; height: 300px;">
    <scichart-angular [config]="config"></scichart-angular>
  </div> TS:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { ScichartAngularComponent } from 'scichart-angular';

@Component({
  selector: 'app-basic-chart-config',
  standalone: true,
  imports: [CommonModule, FormsModule, ScichartAngularComponent],
  templateUrl: './basic-chart-config.component.html',
  styleUrl: './basic-chart-config.component.css'
})
export class BasicChartConfigComponent {
  config = {
    // ...
  };
}

InitChart Function Approach

Create a function which initialises a SciChartSurface like this:

HTML:

  <div class="chart-wrapper" style="width: 600px; height: 300px;">
    <scichart-angular [initChart]="drawBasicChart"></scichart-angular>
  </div> TS:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { ScichartAngularComponent } from 'scichart-angular';
import { NumericAxis, SciChartSurface } from 'scichart';

@Component({
  selector: 'app-basic-chart-init',
  standalone: true,
  imports: [CommonModule, FormsModule, ScichartAngularComponent],
  templateUrl: './basic-chart-init.component.html',
  styleUrl: './basic-chart-init.component.css',
})
export class BasicChartInitComponent {
  public drawBasicChart = async (rootElement: string | HTMLDivElement) => {
    const { wasmContext, sciChartSurface } = await SciChartSurface.create(rootElement);

    sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
    sciChartSurface.yAxes.add(new NumericAxis(wasmContext));

    // ...

    return { sciChartSurface };
  };
}

Running the example

Get the full example on GitHub to explore further and find examples of 3D charts setup.

npm install
npm start

Open On GitHub

Using SciChart.js without SciChart.Angular

Suppose you want to avoid using SciChart.Angular, consider creating your own wrapper.
Here are some tips:

• Check out the implementation of the scichart-angular
• Here is our guide for creating a reusable React wrapper component . Most of the points there are still applicable to Angular
• Refer to the boilerplate example that avoids the usage of SciChart.Angular

To use SciChart.js in Electron with npm & webpack, carry out the following steps:

Step 1: Install SciChart.js

If you haven’t already, add SciChart.js to your React application.

npm install scichart

Step 2: Wasm file deployment

SciChart.js uses WebAssembly files which must be served. The easiest way to do this is to copy the wasm files from the node_modules/scichart/_wasm folder to your output folder.

e.g. with webpack.config.js:

 plugins: [
    new CopyPlugin({
      patterns: [
        { from: "src/index.html", to: "" },
        { from: "node_modules/scichart/_wasm/scichart2d.wasm", to: "" },
      ],
    })
  ],

Note: other methods to load wasm from CDN are available to simplify getting started

Step 3: Creating the Chart

After that, you can create a function to create a SciChartSurface like this.

import {
  SciChartSurface,
  NumericAxis,
  FastLineRenderableSeries,
  XyDataSeries,
  EllipsePointMarker,
  SweepAnimation,
  SciChartJsNavyTheme,
  NumberRange
} from "scichart";

async function initSciChart() {
  // Initialize SciChartSurface. Don't forget to await!
  const { sciChartSurface, wasmContext } = await SciChartSurface.create("scichart-root", {
    theme: new SciChartJsNavyTheme(),
    title: "SciChart.js First Chart",
    titleStyle: { fontSize: 22 }
  });

  // Create an XAxis and YAxis with growBy padding
  const growBy = new NumberRange(0.1, 0.1);
  sciChartSurface.xAxes.add(new NumericAxis(wasmContext, { axisTitle: "X Axis", growBy }));
  sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { axisTitle: "Y Axis", growBy }));

  // Create a line series with some initial data
  sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {
    stroke: "steelblue",
    strokeThickness: 3,
    dataSeries: new XyDataSeries(wasmContext, {
      xValues: [0,1,2,3,4,5,6,7,8,9],
      yValues: [0, 0.0998, 0.1986, 0.2955, 0.3894, 0.4794, 0.5646, 0.6442, 0.7173, 0.7833]
    }),
    pointMarker: new EllipsePointMarker(wasmContext, { width: 11, height: 11, fill: "#fff" }),
    animation: new SweepAnimation({ duration: 300, fadeEffect: true })
  }));

  return sciChartSurface;
}

initSciChart(); 

Running the example

Get the full example on GitHub to explore further.

npm install
npm start

Open On GitHub