NEW! ChangeLog
Find out what's new in every Major and Minor release at the Change Log 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!
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.4 is released! Check out
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.
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.
SciChart.js can be loaded as an ES6 module with Babel or TypeScript transpiler.
npm i scichart
src/index.js file// New syntax from v3.0.284! import { all, the, things } from "scichart"
import { SciChartSurface, NumericAxis, NumericAxis, FastLineRenderableSeries } from "scichart";
// 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();
<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>
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
If your environment does not include a bundler like Parcel or Webpack, you can still load SciChart.js using the browser bundle module from JSDlvr
<!-- Always include latest scichart.js version -->
<script src="https://cdn.jsdelivr.net/npm/scichart/index.min.js" crossorigin="anonymous"></script>
<!-- or, choose specific version -->
<script src="https://cdn.jsdelivr.net/npm/scichart@3.3.592/index.min.js" crossorigin="anonymous"></script>
<!-- or, choosing latest version from 3.x -->
<script src="https://cdn.jsdelivr.net/npm/scichart@3/index.min.js" crossorigin="anonymous"></script>
2.Create scichart-example.js file with a simple chart
// Imports when using Browser Bundle
const {
SciChartSurface,
SciChartDefaults,
chartBuilder,
SciChartJsNavyTheme,
XyDataSeries,
FastLineRenderableSeries,
NumericAxis
} = SciChart;
// Option 1: Create chart with Builder API
async function initSciChartBuilderApi() {
// Create a chart using the json builder api
await chartBuilder.buildChart("chart0", {
series: {
type: "LineSeries",
options: { stroke: "steelblue", strokeThickness: 5 },
xyData: {
xValues: [1, 2, 5, 8, 10],
yValues: [3, 1, 7, 5, 8]
}
}
});
}
// Option 2: Create chart with the programmatic API
async function initSciChartProgrammaticApi() {
const { sciChartSurface, wasmContext } = await SciChartSurface.create("chart1", {
theme: new SciChartJsNavyTheme()
});
sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext));
sciChartSurface.renderableSeries.add(
new FastLineRenderableSeries(wasmContext, {
stroke: "#FF6600",
strokeThickness: 3,
dataSeries: new XyDataSeries(wasmContext, {
xValues: [1, 2, 5, 8, 10],
yValues: [3, 1, 7, 5, 8]
})
})
);
}
// 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
SciChartSurface.useWasmFromCDN();
// Also, call & set runtime license key here once before scichart shown
SciChartSurface.setRuntimeLicenseKey("-- Your license key here --");
initSciChartBuilderApi();
initSciChartProgrammaticApi();
See the full browser bundle tutorial here
Check out what's new in SciChart.js at the below pages:
We release often and if you want to report a bug, request a feature or give general feedback contact us!
FAQs
Fast WebGL JavaScript Charting Library and Framework
The npm package scichart receives a total of 9,086 weekly downloads. As such, scichart popularity was classified as popular.
We found that scichart demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Application Security
/Security News
Socket CEO Feross Aboukhadijeh and a16z partner Joel de la Garza discuss vibe coding, AI-driven software development, and how the rise of LLMs, despite their risks, still points toward a more secure and innovative future.
Research
/Security News
Threat actors hijacked Toptal’s GitHub org, publishing npm packages with malicious payloads that steal tokens and attempt to wipe victim systems.
Research
/Security News
Socket researchers investigate 4 malicious npm and PyPI packages with 56,000+ downloads that install surveillance malware.