JavaScript Charting Documentation - SciChart JavaScript Charts SDK v3.x
Get Started: Tutorials, Examples > Tutorials (Vanilla JS) > Tutorial 01 - Including SciChart.js in an HTML Page
Tutorial 01 - Including SciChart.js in an HTML Page

If you are using npm and webpack, then see our comprehensive list of Video Tutorials for SciChart.js with npm below

... plus several more

Including SciChart.js in an HTML Page

The following tutorial shows you how to include SciChart.js in an HTML page, without the need for setup of npm and a module bundler such as webpack.

This methods is suitable for users who have vanilla JavaScript applications but still want to use SciChart.js to show charts & graphs in their applications.

This method is also useful as a fallback in application frameworks like Blazor, which don't have Npm support but do need to interop with JavaScript charts in a webpage.

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

How to add SciChart.Browser.js to your project

  1. Choose what version of SciChart you want to use. To find out which versions are available, head over to npmjs.com/package/scichart and click on versions. For example, the latest version today is 2.1.2290
  2. Add script pointing to a specific version into the head section of your html file. For instance to add version 2.1.2290 add this script:
    Include SciChart.js Script
    Copy Code 
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/_wasm/scichart.browser.js" crossorigin="anonymous"></script>
  3. Configure SciChart.js to load the wasm and data files from CDN
    Configure SciChart.js
    Copy Code 
    // libraryVersion is a constant hard coded into the library. This ensures a match between wasm/data versions
SciChart.SciChartSurface.configure({
    dataUrl: `https://cdn.jsdelivr.net/npm/[email protected]${SciChart.libraryVersion}/_wasm/scichart2d.data`,
    wasmUrl: `https://cdn.jsdelivr.net/npm/[email protected]${SciChart.libraryVersion}/_wasm/scichart2d.wasm`
});

4. Next, add some series, axis and behaviours to the SciChartSurface (more on that below)  

NOTE: Version numbers in the call to SciChartSurface.configure() must be the same for the Script version, Wasm and Data file. SciChart will download and cache these files in your browser. Find the latest version of SciChart over at npmjs

Worked Example using SciChart.browser.js

We have a worked example over at Github of how to use this, but for the sake of ease let's include the code below.

SciChart.js Example
Copy Code 
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- Include SciChart.js -->
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/_wasm/scichart.browser.js"
      crossorigin="anonymous"
    ></script>
    <title>Hello, SciChart.js world!</title>
  </head>
  <body>
    <h1>Hello, SciChart.js world!</h1>
    <!-- Create the Div to host the SciChartSurface -->
    <div id="scichart-root" style="width: 800px; height: 600px;"></div>
    <!-- The JavaScript to create a SciChartSurface -->
    <script>

      async function initSciChart() {
        // In order to load data file from the CDN we need to set dataUrl
        SciChart.SciChartSurface.configure({
          dataUrl: `https://cdn.jsdelivr.net/npm/[email protected]${SciChart.libraryVersion}/_wasm/scichart2d.data`,
          wasmUrl: `https://cdn.jsdelivr.net/npm/[email protected]${SciChart.libraryVersion}/_wasm/scichart2d.wasm`
        });
        // Create a SciChartSurface inside the div with id 'scichart-root'
        const {
          sciChartSurface,
          wasmContext
        } = await SciChart.SciChartSurface.create("scichart-root");

        // Add an X and a Y Axis
        const xAxis = new SciChart.NumericAxis(wasmContext);
        sciChartSurface.xAxes.add(xAxis);
        const yAxis = new SciChart.NumericAxis(wasmContext);
        sciChartSurface.yAxes.add(yAxis);
      }
      initSciChart();
    </script>
  </body>
</html>

This results in the following output:

Breaking the Code Down

  1. We included the <script> tag to load SciChart.browser.js with a specific version
  2. We have an async function to setup SciChart. This is necessary because SciChart itself uses async functions to load, and we don't want to block the browser loading.
  3. Inside this async function, we call SciChart.SciChartSurface.Configure to load data & wasm files.
  4. Lastly, we can use the SciChart API to create a surface, and add an X and Y Axis
Notice every API call is prefixed by SciChart. when using the browser bundle. This is the global namespace for all SciChart apis, functions and types.

Further Learning

All of the SciChart APIs can be used in the Browser Bundle method where you include a script directly in HTML. The only difference is each type, function or class must be prefixed by the global namespace SciChart.

You can therefore use any of our examples or tutorials but prefix the type with SciChart. so that it can be loaded directly in the browser.

There is no intellisense or type discovery when using the browser bundle pure javascript method. For professional or enterprise grade apps we recommend using npm and TypeScript which provides a far superior development experience.

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-js.