Pre loader

Getting Started
with SciChart JavaScript

Everything you need to get started for free with SciChart’s JavaScript Charts can be found below.

  • Where to get SciChart.js
  • How to use SciChart.js
  • Learn more about SciChart.js
Plaltoform icon
Plaltoform icon
Plaltoform icon
Plaltoform icon

New User?

Get start with SciChart.js for FREE

With the FREE community edition of SciChart.js you get:

  • Unlimited non-commercial use
  • Watermarked charts with no feature-restrictions
  • Free commercial use for 30 days
  • Upgrade to a paid plan to access tech-support & remove watermark

For full terms & permissions see T&Cs below

Community Edition Terms

GETTING STARTED RESOURCES

On this page are some resources to help you get started. Below we have:

  • Links to the SciChart Demo at demo.scichart.com
  • Access to documentation, tutorials
  • Boilerplates on how to use the library in your preferred framework (Pure JS, React, Vue, Angular, etc)
  • Where to get help on the Forums or via Contact form

Where to get SciChart.js

Get SciChart.js from CDN

You can get the scichart library from jsdelivr.com/package/npm/scichart.

Just insert the following script into your HTML page:

<script src="https://cdn.jsdelivr.net/npm/scichart@3/index.min.js" crossorigin="anonymous"></script>

Further instructions on usage included below.

Get SciChart.js from NPM

We also host SciChart.js at NPM

npm install scichart

After, we suggest reading our tutorials or the boilerplates below to get started using SciChart.js

Visit NPM

Sign up for the SciChart.js Newsletter

Get the most out of your date with insights and inspiration from the experts with our monthly email.

Get the release updates, tips & tricks, and what’s new, straight to your inbox!

How to use SciChart.js

We’ve prepared a number of boilerplate to help you get started quickly in React, Vue, Angular, Electron and more. Try our boilerplates below, or npm install scichart to create your own.

Just JavaScript

React

Vue

Angular

Electron

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/[email protected]/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.data", to: "" },
        { from: "node_modules/scichart/_wasm/scichart2d.wasm", to: "" },
        // Optional, if using 3D charts
        { from: "node_modules/scichart/_wasm/scichart3d.data", to: "" },
        { 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() {
  // LICENSING
  // Commercial licenses set your license code here
  // Purchased license keys can be viewed at https://www.scichart.com/profile
  // How-to steps at https://www.scichart.com/licensing-scichart-js/
  // SciChartSurface.setRuntimeLicenseKey("YOUR_RUNTIME_KEY");

  return (
    <div className="App">
      <SciChartReact initChart={initSciChart} style={{ maxWidth: 900 }} />
    </div>
  );
}

Running the example

Get the full example on Github to explore further.

Other examples of usage can be found in the Blog Post: Introducing SciChart-React and also the SciChart-React github repository.

npm install
npm start

Open On Github

To use SciChart.js in a Vue.js app with npm, carry out the following steps:

Step 1: Install SciChart.js

If you haven’t already, add SciChart.js to your Vue.js 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.

Vue.js requires *.data file to be in the /public output folder, and *.wasm files to be in the /public/js folder. This is done using the copy-files-from-to npm package:

 // copy-files-from-to.json
 {
  "copyFilesSettings": {
    "whenFileExists": "overwrite"
  },
  "copyFiles": [
    {
      "from": "./node_modules/scichart/_wasm/scichart2d.data",
      "to": "./public/scichart2d.data"
    },
    {
      "from": "./node_modules/scichart/_wasm/scichart2d.wasm",
      "to": "./public/js/scichart2d.wasm"
    },
    {
      "from": "./node_modules/scichart/_wasm/scichart3d.data",
      "to": "./public/scichart3d.data"
    },
    {
      "from": "./node_modules/scichart/_wasm/scichart3d.wasm",
      "to": "./public/js/scichart3d.wasm"
    }
  ]
}

 // package.json
 {
  // ...
  "scripts": {
    "copyWasm": "copy-files-from-to --config copy-files-from-to.json",
    "dev": "npm run copyWasm && vue-cli-service serve",
    "build": "npm run copyWasm && vue-cli-service build",
    // ... 
  },
  // ... 
  "devDependencies": {
    "copy-files-from-to": "^3.2.1",
  }

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

Step 3: Initialising the Chart

Create a function which initialises a SciChartSurface like this:


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

async function initSciChart() {
  // LICENSING
  // Commercial licenses set your license code here
  // Purchased license keys can be viewed at https://www.scichart.com/profile
  // How-to steps at https://www.scichart.com/licensing-scichart-js/
  // SciChartSurface.setRuntimeLicenseKey("YOUR_RUNTIME_KEY");

  // 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: Creating a Vue Component

Next, create a vue component:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <div id="scichart-root" style="width: 600px; height: 400px; margin: auto;"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

async function initSciChart() {
  // defined above
}

export default defineComponent({
  // Best practise in Vue.js is to ensure that sciChartSurface is deleted on component unmount.
  // Here's one way to do this
  data() {
    return {
      chartInitializationPromise: undefined,
    };
  },
  mounted() {
    console.log("SciChart2d.vue onMounted");
    this.chartInitializationPromise = initSciChart();
  },
  beforeUnmount() {
    console.log("SciChart2d.vue beforeUnmount");
    this.chartInitializationPromise.then((sciChartSurface) => {
      console.log("..deleting sciChartSurface");
      sciChartSurface.delete();
    });
  },
  name: "scichart2d",
  props: {
    msg: String
  }
});
</script>

Step 5: Include Components in your App

Finally, include Vue components in your app:

<template>
  <Scichart2d msg="2D Charts" />
</template>

<script lang="ts">
import { defineComponent } from "vue";
import Scichart2d from "./components/Scichart2d.vue";

export default defineComponent({
  name: "App",
  components: {
    Scichart2d
  }
});
</script>

Running the example

Get the full example on Github to explore further.

npm install
npm start

Open On Github

To use SciChart.js in an Angular app with npm, carry out the following steps:

Step 1: Install SciChart.js

If you haven’t already, add SciChart.js to your Angular 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.

Angular requires *.data file and wasm file to be in output folder /src/*. This is done using the copy-files-from-to npm package:

{
  "copyFilesSettings": {
    "whenFileExists": "overwrite"
  },
  "copyFiles": [
    {
      "from": "./node_modules/scichart/_wasm/scichart2d.data",
      "to": "./src/scichart2d.data"
    },
    {
      "from": "./node_modules/scichart/_wasm/scichart2d.wasm",
      "to": "./src/scichart2d.wasm"
    }
  ]
}

// in package.json
  "scripts": {
    "copyWasm": "copy-files-from-to --config copy-files-from-to.json",
    "start": "npm run copyWasm && ng serve",
    "build": "npm run copyWasm && ng build",
  },

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

Step 3: Initialising the Chart

Create a function which initialises a SciChartSurface like this:

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

async function initSciChart() {
  // LICENSING
  // Commercial licenses set your license code here
  // Purchased license keys can be viewed at https://www.scichart.com/profile
  // How-to steps at https://www.scichart.com/licensing-scichart-js/
  // SciChartSurface.setRuntimeLicenseKey("YOUR_RUNTIME_KEY");

  // 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());

  return sciChartSurface;
}

Step 4: Create an Angular Component

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})

// Best practise in Angular is to ensure that sciChartSurface is deleted on component ngOnDestroy.
// Here's one way to do this
export class AppComponent implements OnInit, OnDestroy {
  title = "angular-scichart-demo";
  chartInitializationPromise: Promise<SciChartSurface>;

  ngOnInit(): void {
    console.log("Angular: ngOnInit");
    this.cleanupSciChart();
    this.chartInitializationPromise = initSciChart(); // defined above
  }

  ngOnDestroy() {
    console.log("Angular: ngOnDestroy");
    this.cleanupSciChart();
  }

  cleanupSciChart() {
    if (this.chartInitializationPromise) {
      // Delete the chart from the DOM, and dispose of SciChart
      this.chartInitializationPromise.then((sciChartSurface) => {
        console.log("... Deleting SciChartSurface");
        sciChartSurface.delete();
      });
      this.chartInitializationPromise = undefined;
    }
  }
}

Running the example

Get the full example on Github to explore further.

npm install
npm start

Open On Github

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.data", 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() {
  // LICENSING
  // Commercial licenses set your license code here
  // Purchased license keys can be viewed at https://www.scichart.com/profile
  // How-to steps at https://www.scichart.com/licensing-scichart-js/
  // SciChartSurface.setRuntimeLicenseKey("YOUR_RUNTIME_KEY");

  // 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;
}

// Note: When using SciChart.js in React, Angular, Vue use component lifecycle to delete the chart on unmount
// for examples see the Vue/React/Angular boilerplates at https://www.scichart.com/getting-started/scichart-javascript/
initSciChart(); 

Recommendation: use React, Vue or Angular

In this example to keep it simple we just use a single JS file and Electron. The JS file is included in renderer.ts. In practice, we recommend using React or similar and obeying component lifecycle to delete the chart on unmount. For more info, see the React, Vue or Angular boilerplate demos on the left

Running the example

Get the full example on Github to explore further.

npm install
npm start

Open On Github

Learn more about SciChart.js

Extra Resources to help you Get Started

Take a look at the resources below, from the SciChart Demo, our extensive Documentation, Forums and more.

DOCUMENTATION

SciChart.js has extensive docs with 100s of handwritten pages.

All Documentation

FORUMS

Ask a question at the SciChart Forums, or Stackoverflow

SciChart Forums

STORE

Buy licenses to remove the watermark and time-restrictions.

Buy Licenses

SUPPORT

Need pre-sales technical support? We can help on a sales-qualified basis.

Contact Sales

MY ACCOUNT

If you’ve purchased commercial licenses and want to know how to activate:

My Account

Need Tech Support?

Need technical support or have a query? Contact our technical sales team, and we’ll be happy to help.

Contact Technical Sales

Already have a commercial licence?

If you’ve already purchased a commercial licence, but want to know how to activate them, follow the steps below:

1. Activate your developer licence to remove the watermark
2. Open a support ticket on the support desk
3. Add domains to your licence key and deploy

Activate your licence Buy Now