SciChart.js: High Performance JavaScript Chart Library
SciChart.js is a High Performance JavaScript & TypeScript Charting library which WebGL and WebAssembly to achieve incredible real-time and big-data performance. Fast and able to draw millions of datapoints in realtime, our charts will never cause your app to slow down again!
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.
SciChart.JS v3 is released! Check out what's new. There should not be any breaking changes.
License
SciChart.js is commercial software with a free trial, but we are planning a free community edition soon!
Licensing Links
- Read about our license terms here
- Start a trial by following steps here
- Purchase commercial licenses here
- Academic usage, universities and schools qualify for a free for a free license. Read more about this here.
Demo Application
- We've published a live demo app at demo.scichart.com with 85 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:
Getting Started
We've prepared a short Getting Started guide here.
This will walk you through the entire process of starting a trial and show you where tutorials and documentation are and examples.
Useful Links
Features & benefits
- Learn about features of SciChart.js here
Onboarding
Support
Purchasing
Quick Start with NPM and Webpack
SciChart.js can be loaded as an ES6 module with Babel or TypeScript transpiler.
- Install SciChart.js
npm i scichart-
Create a simple chart by putting this into
src/index.jsfile
import { SciChartSurface } from "scichart/Charting/Visuals/SciChartSurface";
import { NumericAxis } from "scichart/Charting/Visuals/Axis/NumericAxis";
import { XyDataSeries } from "scichart/Charting/Model/XyDataSeries";
import { FastLineRenderableSeries } from "scichart/Charting/Visuals/RenderableSeries/FastLineRenderableSeries";
// Call useWasmFromCDN once before SciChart.js is initialised to load Wasm files from our CDN
// Alternative methods for serving wasm from webpack or offline are available on our website
SciChartSurface.useWasmFromCDN();
// Apply your licese key once before startup
SciChartSurface.setRuntimeLicenseKey("--YOUR_KEY_HERE--");
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
sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext));
// Create a line series with some data
const dataSeries = new XyDataSeries(wasmContext, {
xValues: [1, 2, 5, 8, 10],
yValues: [3, 1, 7, 5, 8]
});
const renderableSeries = new FastLineRenderableSeries(wasmContext, {
dataSeries,
stroke: "steelblue"
});
sciChartSurface.renderableSeries.add(renderableSeries);
}
initSciChart();- Create src/index.html file
<html lang="en-us">
<head>
<meta charset="utf-8" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>SciChart.js Tutorial 1</title>
<script async type="text/javascript" src="bundle.js"></script>
</head>
<body>
<!-- the Div where the SciChartSurface will reside -->
<div id="scichart-root" style="width: 800px; height: 600px;"></div>
</body>
</html>-
Run it
npm start. As a result you will see a simple line chart.
Further reading:
- See the Getting Started Page as well as our Tutorials for more information on creating your first chart
Quick Start with vanilla JS
If your environment does not include a bundler like Parcel or Webpack, you can still load SciChart.js using the browser bundle module.
1.Create scichart-example.js file with a simple chart
async function initSciChart() {
// See deployment options for WebAssembly at https://www.scichart.com/documentation/js/current/Deploying%20Wasm%20or%20WebAssembly%20and%20Data%20Files%20with%20your%20app.html
// call useWasmFromCDN once before SciChart.js is initialised to load Wasm files from our CDN
SciChart.SciChartSurface.useWasmFromCDN();
// Apply your licese key once before startup
SciChart, SciChartSurface.setRuntimeLicenseKey("--YOUR_KEY_HERE--");
// Create a chart using the json builder api
await SciChart.chartBuilder.buildChart("scichart-root", {
series: {
type: "LineSeries",
options: { stroke: "steelblue" },
xyData: {
xValues: [1, 2, 5, 8, 10],
yValues: [3, 1, 7, 5, 8]
}
}
});
}
initSciChart();See the full browser bundle tutorial here
Release notes. What's New!
Check out what's new in SciChart.js at the below pages:
- What's New in SciChart.js v2.0
- What's New in SciChart.js v2.1
- What's New in SciChart.js v2.2
- What's New in SciChart.js v3.0
We release often and if you want to report a bug, request a feature or give general feedback contact us!