scichart

v3.3.586

Published

10 days ago

Fast WebGL JavaScript Charting Library and Framework

Downloads

9,702

SciChart.js: High Performance JavaScript Chart Library

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!

Useful Links

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.

SciChart.JS v3.2 is released! Check out

Latest Changes
v3.2 Release notes
v3.1 Release notes
v3.0 Release notes There should not be any breaking changes from v2.

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:
- React + SciChart boilerplate
- Vue.js
- Angular
- NextJs
- Nuxt.js
- 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

Features & benefits

Learn about features of SciChart.js here

Onboarding

Support

Purchasing

Pricing

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.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();

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 Browser Bundle (Iife bundle)

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

Include index.min.js in your webpage

<!-- 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/[email protected]/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();

View above in CodePen

See the full browser bundle tutorial here

Release notes. What's New!

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!

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

SciChart.js: High Performance JavaScript Chart Library

Useful Links

License

Demo Application

Getting Started

Useful Links

Features & benefits

Onboarding

Support

Purchasing

Quick Start with NPM and Webpack

Quick Start with Browser Bundle (Iife bundle)

Release notes. What's New!