SciChart.js JavaScript Chart Examples Suite
Getting Started / Licensing and Trials
With the full release of SciChart.js we've created a getting-started guide which shows you how to start a trial and compile the examples, tutorials, where to find documentation and more. Find out more below:
Examples, showcase applications and tutorials for SciChart.js: Ultra High Performance Realtime JavaScript Chart Library.
SciChart has the only viable solution for mission-critical charting applications, with our ultra-fast 2D/3D graphics technology codenamed Visual Xccelerator® now ported to JavaScript/TypeScript using WebGL and WebAssembly. We have cross-platform technology and provide solutions to enterprise around the world for Windows, Mobile, macOS and now JavaScript apps.
Insane performance
SciChart's Ultra High performance JavaScript Charts can draw many millions of data-points, allowing you to zoom, pan, or browse big-data sets with ease. SciChart enables next-generation JavaScript & TypeScript chart applications by allowing previously impossible datarates and update-rates. After all, we make 'Impossible projects possible'!
Online Demo
An online demo version of scichart.js.examples can be seen at https://demo.scichart.com.
Check out the demos below:
JavaScript Chart - Load 500 Series x 500 Points Performance Demo
Click Load in the demo to create 500 series, each with 500 points (250,000 points total) and watch the JavaScript Chart draw instantly!
Realtime JavaScript Chart Performance Demo
Click Start in the demo to create three series and append 100k points per second to each, with a total point count in the millions.
Realtime Ghosted Traces
Click Start to watch 10 series with thousands of points animating, while applying a glow WebGL Shader effect.
JavaScript Chart Types
The demo includes many JavaScript Chart Types including JavaScript Bubble Chart, a real-time JavaScript heatmap chart, a JavaScript Candlestick Chart and many more!
SciChart.js also includes 3D Charts, and has a JavaScript UAV LiDAR 3D Point-Cloud demo, a JavaScript 3D Bubble Chart and a JavaScript 3D Surface Mesh Chart.
Documentation
We've taken the time to create hundreds of documentation pages for our JavaScript Charts, which you can find over at https://www.scichart.com/javascript-chart-documentation. Take a look here for tutorials, getting-started guides, API Docs (TypeDoc) and more.
.
Developer Quick-Start
Getting Started Guide
We've prepared a Getting-Started guide at www.scichart.com/getting-started-scichart-js. Start here if you wish to know how to get started with our JavaScript Chart Library.
Licensing the application
- Get a trial license key from www.scichart.com/licensing-scichart-js/ by installing and running the licensing wizard.
- Purchased license keys can be viewed at www.scichart.com/profile and activated by following the steps at licensing scichart JS
Licensing a host for production
In order to deploy an app to a public host
- Set the full hostname for you license on the website www.scichart.com/profile
- Copy runtime key from the licensing wizard
- Set the runtime key in your app before calling SciChartSurface.create. The runtime key should be set once!
import {SciChartSurface} from "scichart/charting/Visuals/SciChartSurface";
SciChartSurface.setRuntimeLicenseKey("YOUR_RUNTIME_KEY");
Run application in dev mode
To start the application locally you will need to npm install and npm run dev and also to have the licensing wizard running. This will run a development server locally and you should be able to view the examples in browser at http://localhost:8080
Note: Make sure the licensing wizard is running!
cd Examples
npm install
npm run dev
Run application in production mode
To start the application in production mode, run the following scripts. Note in production mode google analytics will be enabled.
cd Examples
npm run build
npm start
Simple Code Examples
Creating a SciChartSurface with X,Y Axis
A SciChartSurface can be created by calling the function SciChartSurface.create(). You will need to add an X/Y axis to see the chart.
// Create the SciChartSurface in the div 'scichart-root'
// The SciChartSurface, and webassembly context 'wasmContext' are paired. This wasmContext
// instance must be passed to other types that exist on the same surface.
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);Adding Series and Data
SciChart has multiple chart-types out of the box. To add a series and some data, use code like this:
// Create the SciChartSurface in the div 'scichart-root'
// The SciChartSurface, and webassembly context 'wasmContext' are paired. This wasmContext
// instance must be passed to other types that exist on the same surface.
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);
// Create 100 dataseries, each with 10k points
for (let seriesCount = 0; seriesCount < 100; seriesCount++) {
const xyDataSeries = new XyDataSeries(wasmContext);
const opacity = (1 - ((seriesCount / 120))).toFixed(2);
// Populate with some data
for(let i = 0; i < 10000; i++) {
xyDataSeries.append(i, Math.sin(i* 0.01) * Math.exp(i*(0.00001*(seriesCount+1))));
}
// Add and create a line series with this data to the chart
// Create a line series
const lineSeries = new FastLineRenderableSeries(wasmContext, {
dataSeries: xyDataSeries,
stroke: `rgba(176,196,222,${opacity})`,
strokeThickness:2
});
sciChartSurface.renderableSeries.add(lineSeries);
}Zooming and Panning
Zooming and Panning is really easy in SciChart.js. We have a number of ChartModifiers out of the box which will add zoom, pan behaviors and more.
Try some code like this:
// Add zoom, pan behaviours to the chart. Mousewheel zoom, panning and double-click to
// zoom to fit
const mouseWheelZoomModifier = new MouseWheelZoomModifier();
const zoomPanModifier = new ZoomPanModifier();
const rubberBandZoomModifier = new RubberBandXyZoomModifier();
const zoomExtentsModifier = new ZoomExtentsModifier();
sciChartSurface.chartModifiers.add(zoomExtentsModifier);
sciChartSurface.chartModifiers.add(zoomPanModifier);
sciChartSurface.chartModifiers.add(rubberBandZoomModifier);
sciChartSurface.chartModifiers.add(mouseWheelZoomModifier); Tooltips and Legends
SciChart supports Tooltips and Legends via our ChartModifier API. Check out documentation on our website here.
Adding Annotations
SciChart supports Annotations and Labels. Check out documentation on our website here
Adding Multiple Axis
SciChart supports multiple axis, you can check out an example here: https://demo.scichart.com/javascript-chart-with-multiple-x-axis
Linking Multiple Charts
SciChart allows linking multiple charts together to create composite applications. Check out this example: https://demo.scichart.com/javascript-multi-pane-stock-charts
Further resources to Get Started with SciChart
Further resources which you may find useful!
