{"id":11987,"library":"scichart","title":"SciChart.js High Performance JavaScript Chart Library","description":"SciChart.js is a high-performance JavaScript chart library (current stable version 5.1.4) engineered for demanding real-time and big-data visualization applications. It leverages WebGL2 and WebAssembly to render millions of data points smoothly, differentiating itself through exceptional speed and efficiency compared to alternatives like Chart.js, HighCharts, and Plotly. The library is actively maintained with frequent releases, including major versions like v5 that focus on significant performance improvements, smaller bundle sizes, and faster initialization. It is particularly suited for scientific, financial, medical, engineering, and enterprise applications requiring robust, feature-rich, and highly interactive charts.","status":"active","version":"5.1.4","language":"javascript","source_language":"en","source_url":"https://github.com/abtsoftware/scichart.js.examples","tags":["javascript","Chart","Charts","Data","Graph","Graphs","Plot","Plotting","DataVisualization","typescript"],"install":[{"cmd":"npm install scichart","lang":"bash","label":"npm"},{"cmd":"yarn add scichart","lang":"bash","label":"yarn"},{"cmd":"pnpm add scichart","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"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.","wrong":"const SciChartSurface = require('scichart').SciChartSurface;","symbol":"SciChartSurface","correct":"import { SciChartSurface } from 'scichart';"},{"note":"Used for global initialization, including applying license keys and configuring WebAssembly settings. Introduced in v5, replacing earlier initialization patterns.","wrong":"import { initSciChart } from 'scichart';","symbol":"SciChartJSInitializer","correct":"import { SciChartJSInitializer } from 'scichart';"},{"note":"Represents a numeric X or Y axis. Specific axis types like `NumericAxis` or `CategoryAxis` must be imported and instantiated, not a generic `Axis`.","wrong":"import { Axis } from 'scichart';","symbol":"NumericAxis","correct":"import { NumericAxis } from 'scichart';"},{"note":"One of many optimized renderable series types. Always use the `Fast...RenderableSeries` variants for high performance, e.g., `FastLineRenderableSeries`, `FastColumnRenderableSeries`.","wrong":"import { LineSeries } from 'scichart';","symbol":"FastLineRenderableSeries","correct":"import { FastLineRenderableSeries } from 'scichart';"},{"note":"Data series are instantiated with a `WasmContext`. `XyDataSeries` is for general X-Y plotting. Other types exist for specific chart requirements, e.g., `OhlcDataSeries`.","wrong":"import { DataSeries } from 'scichart';","symbol":"XyDataSeries","correct":"import { XyDataSeries } from 'scichart';"}],"quickstart":{"code":"import { \n  SciChartSurface, \n  SciChartJSInitializer, \n  NumericAxis, \n  FastLineRenderableSeries, \n  XyDataSeries, \n  ENumericFormat, \n  EAutoRange, \n  EAxisAlignment\n} from 'scichart';\n\n// Ensure you have a div with id 'scichart-root' in your HTML\n// <div id=\"scichart-root\" style=\"width: 800px; height: 600px;\"></div>\n\nasync function drawChart() {\n  // SciChart.js is commercial software. A free community edition is available.\n  // For commercial use, acquire a license key from scichart.com/licensing-scichart-js\n  // SciChartJSInitializer.initSciChart({ licenseKey: process.env.SCICHART_LICENSE_KEY ?? '' });\n\n  // Initialize SciChart.js - required once per application\n  await SciChartJSInitializer.initSciChart();\n\n  const { sciChartSurface, wasmContext } = await SciChartSurface.create('scichart-root');\n\n  // Create X and Y Axes\n  const xAxis = new NumericAxis(wasmContext, {\n    axisTitle: 'X-Axis Title',\n    labelFormat: ENumericFormat.Decimal,\n    labelPrecision: 1,\n    autoRange: EAutoRange.Always,\n    axisAlignment: EAxisAlignment.Bottom\n  });\n  const yAxis = new NumericAxis(wasmContext, {\n    axisTitle: 'Y-Axis Title',\n    labelFormat: ENumericFormat.Decimal,\n    labelPrecision: 2,\n    autoRange: EAutoRange.Always,\n    axisAlignment: EAxisAlignment.Left\n  });\n\n  sciChartSurface.xAxes.add(xAxis);\n  sciChartSurface.yAxes.add(yAxis);\n\n  // Create a DataSeries\n  const dataSeries = new XyDataSeries(wasmContext);\n  for (let i = 0; i < 100; i++) {\n    dataSeries.append(i, Math.sin(i * 0.1) * 10 + Math.random() * 2);\n  }\n\n  // Create a RenderableSeries and add the DataSeries\n  const renderableSeries = new FastLineRenderableSeries(wasmContext, {\n    dataSeries: dataSeries,\n    strokeThickness: 3,\n    stroke: 'steelblue'\n  });\n\n  sciChartSurface.renderableSeries.add(renderableSeries);\n}\n\ndrawChart();","lang":"typescript","description":"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."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":">=5.0.0"},{"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.","message":"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).","severity":"breaking","affected_versions":">=5.0.0"},{"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.","message":"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.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"For commercial applications, purchase a license from scichart.com and apply the runtime license key using `SciChartJSInitializer.initSciChart({ licenseKey: 'YOUR_LICENSE_KEY' });`.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"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.","severity":"deprecated","affected_versions":"3.2.446 - 3.2.555"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","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.","error":"Sorry! This version of SciChart is too old to be used for the community edition. Please update to the latest version"},{"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.","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.","error":"Runtime license is invalid: License is not valid for this domain."},{"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.","cause":"SciChart.js v5+ explicitly requires WebGL 2. The client's browser or hardware may not support WebGL 2, or WebGL is disabled.","error":"WebGL is not supported on this browser or device."}],"ecosystem":"npm"}