SciChart.js High Performance JavaScript Chart Library

Common errors

• Sorry! This version of SciChart is too old to be used for the community edition. Please update to the latest version

  cause Using a version of SciChart.js (specifically 3.2.446-3.2.555) with a known licensing bug, or a version released after your support expiry date with an outdated license.
  fix Upgrade SciChart.js to version 3.3.560 or later. If using a commercial license, ensure your developer subscription is active and your SciChart.js version was released within your support period.

• Runtime license is invalid: License is not valid for this domain.

  cause The runtime license key provided for SciChart.js is not valid for the domain where the application is being hosted. This often happens in deployed environments.
  fix Register the exact production domain(s) in your SciChart profile to generate a valid runtime key, then ensure that key is correctly applied in your application's `SciChartJSInitializer.initSciChart` call.

• WebGL is not supported on this browser or device.

  cause SciChart.js v5+ explicitly requires WebGL 2. The client's browser or hardware may not support WebGL 2, or WebGL is disabled.
  fix Ensure the client is using a modern browser with WebGL 2 support (e.g., Chrome 56+, Edge 79+, Safari 15+, Firefox 51+). Check browser settings to confirm WebGL is enabled. Consider that older hardware might not support WebGL2.

Warnings

• breaking SciChart.js v5.x removed fallback support for WebGL 1. Applications now require WebGL 2 compatible browsers/hardware. This was done for performance reasons and to support future graphics APIs.
  Fix: Ensure target environments support WebGL 2. Most modern browsers (Chrome 56+, Edge 79+, Safari 15+, Firefox 51+) support WebGL 2. For systems without a dedicated GPU, Chromium-based browsers may use SwiftShader.
• breaking With the introduction of SIMD support in v5, projects using Webpack need to update their configuration to correctly include fallback WebAssembly (`scichart2d-nosimd.wasm` and `scichart3d-nosimd.wasm`) files if `SciChartDefaults.useWasmSimd` is set to `Auto` (the default).
  Fix: Refer to SciChart.js documentation for updating your Webpack configuration to ensure both SIMD and non-SIMD `.wasm` binaries are correctly served or configured according to your `SciChartDefaults.useWasmSimd` setting.
• breaking The default native font for charts changed from Arial to Arimo in v5. If your application relies on the default font appearance, you may notice subtle visual changes.
  Fix: To revert to Arial, set `SciChartDefaults.autoFontName = 'Arial'`. Alternatively, load Arial font from a file or disable native text rendering if specific font control is needed.
• gotcha SciChart.js is commercial software. While a free community edition is available for personal, non-commercial, and educational use, commercial applications require a purchased license. Unlicensed commercial use will result in a 'Powered by SciChart' watermark and potential runtime limitations.
  Fix: For commercial applications, purchase a license from scichart.com and apply the runtime license key using `SciChartJSInitializer.initSciChart({ licenseKey: 'YOUR_LICENSE_KEY' });`.
• deprecated Versions 3.2.446 through 3.2.555 contained a critical licensing bug that caused applications to display a 'license expired' error, even with a valid license, and have been marked as deprecated on npm.
  Fix: Immediately update to SciChart.js v3.3.560 or newer (preferably to the latest v5.x) to resolve the licensing issue. If unable to update, contact SciChart support for a potential code workaround.

Install

• npm install scichart npm
• yarn add scichart yarn
• pnpm add scichart pnpm

Imports

• SciChartSurface
  wrong:

  const SciChartSurface = require('scichart').SciChartSurface;

  correct:

  import { SciChartSurface } from 'scichart';

  Primary class for creating 2D charts. SciChart.js primarily uses ES modules since v3; CommonJS `require` is generally not supported for direct module imports in modern usage.
• SciChartJSInitializer
  wrong:

  import { initSciChart } from 'scichart';

  correct:

  import { SciChartJSInitializer } from 'scichart';

  Used for global initialization, including applying license keys and configuring WebAssembly settings. Introduced in v5, replacing earlier initialization patterns.
• NumericAxis
  wrong:

  import { Axis } from 'scichart';

  correct:

  import { NumericAxis } from 'scichart';

  Represents a numeric X or Y axis. Specific axis types like `NumericAxis` or `CategoryAxis` must be imported and instantiated, not a generic `Axis`.
• FastLineRenderableSeries
  wrong:

  import { LineSeries } from 'scichart';

  correct:

  import { FastLineRenderableSeries } from 'scichart';

  One of many optimized renderable series types. Always use the `Fast...RenderableSeries` variants for high performance, e.g., `FastLineRenderableSeries`, `FastColumnRenderableSeries`.
• XyDataSeries
  wrong:

  import { DataSeries } from 'scichart';

  correct:

  import { XyDataSeries } from 'scichart';

  Data series are instantiated with a `WasmContext`. `XyDataSeries` is for general X-Y plotting. Other types exist for specific chart requirements, e.g., `OhlcDataSeries`.

Quickstart

This quickstart initializes SciChart.js, creates a 2D chart surface within a specified HTML element, adds numeric X and Y axes, and then plots a simple FastLineRenderableSeries with generated sine wave data. It demonstrates the core setup for a basic chart.

import { 
  SciChartSurface, 
  SciChartJSInitializer, 
  NumericAxis, 
  FastLineRenderableSeries, 
  XyDataSeries, 
  ENumericFormat, 
  EAutoRange, 
  EAxisAlignment
} from 'scichart';

// Ensure you have a div with id 'scichart-root' in your HTML
// <div id="scichart-root" style="width: 800px; height: 600px;"></div>

async function drawChart() {
  // SciChart.js is commercial software. A free community edition is available.
  // For commercial use, acquire a license key from scichart.com/licensing-scichart-js
  // SciChartJSInitializer.initSciChart({ licenseKey: process.env.SCICHART_LICENSE_KEY ?? '' });

  // Initialize SciChart.js - required once per application
  await SciChartJSInitializer.initSciChart();

  const { sciChartSurface, wasmContext } = await SciChartSurface.create('scichart-root');

  // Create X and Y Axes
  const xAxis = new NumericAxis(wasmContext, {
    axisTitle: 'X-Axis Title',
    labelFormat: ENumericFormat.Decimal,
    labelPrecision: 1,
    autoRange: EAutoRange.Always,
    axisAlignment: EAxisAlignment.Bottom
  });
  const yAxis = new NumericAxis(wasmContext, {
    axisTitle: 'Y-Axis Title',
    labelFormat: ENumericFormat.Decimal,
    labelPrecision: 2,
    autoRange: EAutoRange.Always,
    axisAlignment: EAxisAlignment.Left
  });

  sciChartSurface.xAxes.add(xAxis);
  sciChartSurface.yAxes.add(yAxis);

  // Create a DataSeries
  const dataSeries = new XyDataSeries(wasmContext);
  for (let i = 0; i < 100; i++) {
    dataSeries.append(i, Math.sin(i * 0.1) * 10 + Math.random() * 2);
  }

  // Create a RenderableSeries and add the DataSeries
  const renderableSeries = new FastLineRenderableSeries(wasmContext, {
    dataSeries: dataSeries,
    strokeThickness: 3,
    stroke: 'steelblue'
  });

  sciChartSurface.renderableSeries.add(renderableSeries);
}

drawChart();