SciChart.js: High Performance JavaScript Chart Library
>
SciChart.JS v5.0
>
> Find out what's new in every Major and Minor release at the
Change Log here
>
Documentation
>
> Find out our
Documentation web-site here
SciChart.js is a High Performance
JavaScript Chart library. Leveraging WebGL and WebAssembly to achieve incredible big-data and real-time performance.
Fast and able to draw millions of datapoints in realtime, our charts will never cause your app to slow down again!
Why SciChart?
- Learn why we propose SciChart as the
Best JavaScript Chart Library in 2024 for Big-Data, complex enterprise apps.
- Read performance test results showing SciChart beating Chart.js, HighCharts, Plotly by a wide margin in a
JavaScript Chart Performance Comparison
- Learn the features and key differences of SciChart.js
JS Charts library.
- Browse the demos of
JavaScript Charts and
JavaScript 3D Charts in our interactive React showcase.
> SciChart has an extremely configurable and extensible API and is
>
perfect for scientific, financial, medical, engineering and enterprise applications,
> apps with demanding performance requirements or complex and mission critical charting.

Releases
In SciChart.js v5 release we’ve focused mostly on performance. Our userbase has demanding requirements from F1 to medical dashboards, IoT telemetry in industrial, aerospace and defense applications and as a result, our team has worked hard over the past few months to make this the leanest, fastest and most feature rich version of SciChart yet.
-
Latest Changes
-
v5.0 Release notes |
Breaking Changes
-
v4.0 Release notes |
Breaking Changes
-
v3.5 Release notes
-
Older Releases
We release often and if you want to report a bug, request a feature or give general feedback
contact us!
License
> SciChart.js is commercial software which ships with a free community edition for personal, non-commercial, educational or blogger/tutorial use.
>
>
Licensing Links
>
> -
Free Community Licensing FAQs
> -
Read about our commercial license terms here
> -
Get Started by following steps here
> -
Purchase commercial licenses here
> - Academic usage, universities and schools qualify for a free non-watermarked license. Read more about this
here.
Demo Application
- We've published over 100
JavaScript Chart Demos with ~100 examples you can try in browser.
- You can clone the repo for the demo app at Github:
github.com/ABTSoftware/SciChart.JS.Examples
- Or, checkout our boilerplates for various popular Js frameworks:
-
Vanilla JS
-
React with
scichart-react which significantly simplifies wrapping scichart in a react component
-
React + Typescript
-
React + Vite
-
Vue.js
-
Angular
-
Next.js
-
Nuxt
-
Svelte + Vite
-
Svelte + Rollup
-
Electron
Getting Started
> We've prepared a short
Getting Started guide here.
>
> This will walk you through the entire process of starting in your favourite framework and show you where tutorials and documentation are and examples.
Useful Links
$3
- Learn about
features of SciChart.js here
$3
-
Tutorials
-
Getting Started Guide
-
Documentation
-
CodePen, JSFiddle support
$3
-
Community forums
-
Stackoverflow tag
-
Contact Us (Technical support or sales)
$3
-
Pricing
Quick Start with NPM and Webpack
>
Tutorial
>
> See
full npm + Webpack tutorial here
SciChart.js can be loaded as an ES6 module with Babel or TypeScript transpiler.
1.
Install SciChart.js
``
shell
npm install scichart
`
2. Create a simple chart by putting this into src/index.js
file
`
javascript
import { SciChartSurface, NumericAxis } from "scichart";
async function initSciChart() {
const { sciChartSurface, wasmContext } = await SciChartSurface.create("scichart-root");
// Create an X,Y Axis and add to the chart
const xAxis = new NumericAxis(wasmContext);
const yAxis = new NumericAxis(wasmContext);
sciChartSurface.xAxes.add(xAxis);
sciChartSurface.yAxes.add(yAxis);
}
initSciChart();
`
3. Create src/index.html file
`
html
SciChart.js Tutorial 1
Hello SciChart.js world!
In this example we setup webpack, scichart and create a simple chart with one X and Y axis
`
4. Run it npm start
. As a result you will see a simple line chart.
Quick Start with Browser Bundle (Iife bundle)

> Tutorial
>
> See the full browser bundle tutorial here
If your environment does not include a bundler like Parcel or Webpack, you can still load SciChart.js using the browser bundle module from jsDelivr
1. Include index.min.js in your webpage
`
html
`
2. Create scichart-example.js file with a simple chart
`
javascript
// Equivalent of imports when using index.min.js is to declare global variables like this
const { SciChartSurface, NumericAxis, FastLineRenderableSeries, XyDataSeries } = SciChart;
async function initSciChart() {
// Create the SciChartSurface in the div 'scichart-root'
const { sciChartSurface, wasmContext } = await SciChartSurface.create("scichart-root");
// Create an X,Y Axis and add to the chart
const xAxis = new NumericAxis(wasmContext);
const yAxis = new NumericAxis(wasmContext);
sciChartSurface.xAxes.add(xAxis);
sciChartSurface.yAxes.add(yAxis);
// Add a series
sciChartSurface.renderableSeries.add(
new FastLineRenderableSeries(wasmContext, {
dataSeries: new XyDataSeries(wasmContext, {
xValues: [0, 1, 2, 3, 4],
yValues: [2, 1, 4, 3, 2]
})
})
);
}
``