SciChart.JS v4.0 is released!
Find out what's new in every Major and Minor release at the Change Log here
[NEW] Documentation
Find out our New 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!
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 v4 is our biggest release for years, including polar charts, triangle and rectangle series for unlimited visualization potential, and much more.
We release often and if you want to report a bug, request a feature or give general feedback contact us!
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.
Tutorial
SciChart.js can be loaded as an ES6 module with Babel or TypeScript transpiler.
npm install scichart
src/index.js fileimport { 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();
<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>
<h1>Hello SciChart.js world!</h1>
<p>In this example we setup webpack, scichart and create a simple chart with one X and Y axis</p>
<!-- 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.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
<!-- Include specific version into index.html -->
<script src="https://cdn.jsdelivr.net/npm/scichart@4.0.0-beta.734/index.min.js" crossorigin="anonymous"></script>
// 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]
})
})
);
}
FAQs
Fast WebGL JavaScript Charting Library and Framework
The npm package scichart receives a total of 4,866 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.
Research
Four npm packages disguised as cryptographic tools steal developer credentials and send them to attacker-controlled Telegram infrastructure.
Security News
Ruby maintainers from Bundler and rbenv teams are building rv to bring Python uv's speed and unified tooling approach to Ruby development.
Security News
Following last week’s supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.