Nutritious Pancake Mountain

    scichart
    TypeScript icon, indicating that this package has built-in type declarations

    3.0.284 • Public • Published

    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 2D 3D chart types

    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

    Demo Application

    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

    Onboarding

    Support

    Purchasing

    Quick Start with NPM and Webpack

    SciChart.js can be loaded as an ES6 module with Babel or TypeScript transpiler.

    1. Install SciChart.js
    npm i scichart
    1. Create a simple chart by putting this into src/index.js file
    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();
    1. 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>
    1. Run it npm start. As a result you will see a simple line chart.

    Further reading:

    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

    1. Include SciChart.browser.js in your webpage
    <!-- Always include latest scichart.js version -->
    <script src="https://cdn.jsdelivr.net/npm/scichart/_wasm/scichart.browser.js" crossorigin="anonymous"></script>
    <!-- or, choose specific version -->
    <script src="https://cdn.jsdelivr.net/npm/scichart@3.0.280/_wasm/scichart.browser.js" crossorigin="anonymous"></script>
    <!-- or, choosing latest version from 3.x -->
    <script src="https://cdn.jsdelivr.net/npm/scichart@3/_wasm/scichart.browser.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!

    Install

    npm i scichart

    DownloadsWeekly Downloads

    1,824

    Version

    3.0.284

    License

    ISC

    Unpacked Size

    14.1 MB

    Total Files

    1062

    Last publish

    Collaborators

    • klishevich
    • scichart