SciChart.React - Official React Component Wrapper for SciChart.js: High Performance JavaScript Chart Library

SciChart.React requires core SciChart.js package to work and uses it as a peer dependency.

The SciChartReact itself is MIT licensed, find the core library licensing info at https://www.scichart.com/licensing-scichart-js/.

What does SciChart.React do?

• Neatly wraps up the lifecycle of SciChart.js into a React component to ensure proper initialisation and memory cleanup.
• Provides a number of ways to configure a chart (via JSON config or initialization function)
• Can be used to create complex dashboards linking multiple charts (demos are coming soon!)

Getting Started

Prerequisites

• react 16.8+
• scichart 3.2.516+

Installing

npm install scichart scichart-react

Loading required WASM dependencies

SciChart.js requires additional WASM modules to work (scichart2d.wasm + scichart2d.data for instantiating SciChartSurface and scichart3d.wasm + scichart3d.data for SciChart3DSurface).
The library will try to fetch the appropriate files asynchronously during runtime. Find detailed info at Deploying Wasm Docs

By default SciChartReact applies the following configuration:

SciChartSurface.configure({
    wasmUrl: "/scichart2d.wasm",
    dataUrl: "/scichart2d.data"
});

SciChart3DSurface.configure({
    wasmUrl: "/scichart3d.wasm",
    dataUrl: "/scichart3d.data"
});

Using

There are two ways to setup SciChartReact. The component requires one of config or initChart properties to create a chart.

With Config

Pass a config object that will be used to generate a chart via the Builder API.

import { EAxisType, EChart2DModifierType, ESeriesType, SciChartSurface } from "scichart";
import { SciChartReact } from "scichart-react";

// Call loadWasmFromCDN once before SciChart.js is initialised to load Wasm files from our CDN
// Alternative methods for serving and resolving wasm are available on our website
SciChartSurface.loadWasmFromCDN();

function App() {
    return (
        <SciChartReact
            style={{ width: 800, height: 600 }}
            config={{
                xAxes: [{ type: EAxisType.NumericAxis }],
                yAxes: [{ type: EAxisType.NumericAxis }],
                series: [
                    {
                        type: ESeriesType.SplineMountainSeries,
                        options: {
                            fill: "#3ca832",
                            stroke: "#eb911c",
                            strokeThickness: 4,
                            opacity: 0.4
                        },
                        xyData: { xValues: [1, 2, 3, 4], yValues: [1, 4, 7, 3] }
                    }
                ],
                modifiers: [
                    { type: EChart2DModifierType.ZoomPan, options: { enableZoom: true } },
                    { type: EChart2DModifierType.MouseWheelZoom },
                    { type: EChart2DModifierType.ZoomExtents }
                ]
            }}
        />
    );
}

With Initialization Function

Alternatively you can pass a function which should create a surface on the provided root element.

import {
    MouseWheelZoomModifier,
    NumericAxis,
    SciChartSurface,
    SplineMountainRenderableSeries,
    XyDataSeries,
    ZoomExtentsModifier,
    ZoomPanModifier
} from "scichart";
import { SciChartReact } from "scichart-react";

// Call loadWasmFromCDN once before SciChart.js is initialised to load Wasm files from our CDN
// Alternative methods for serving and resolving wasm are available on our website
SciChartSurface.loadWasmFromCDN();

function App() {
    return (
        <SciChartReact
            style={{ width: 800, height: 600 }}
            initChart={async function (rootElement) {
                const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement);

                const xAxis = new NumericAxis(wasmContext);
                const yAxis = new NumericAxis(wasmContext);

                sciChartSurface.xAxes.add(xAxis);
                sciChartSurface.yAxes.add(yAxis);

                sciChartSurface.renderableSeries.add(
                    new SplineMountainRenderableSeries(wasmContext, {
                        dataSeries: new XyDataSeries(wasmContext, {
                            xValues: [1, 2, 3, 4],
                            yValues: [1, 4, 7, 3]
                        }),
                        fill: "#3ca832",
                        stroke: "#eb911c",
                        strokeThickness: 4,
                        opacity: 0.4
                    })
                );

                sciChartSurface.chartModifiers.add(
                    new ZoomPanModifier({ enableZoom: true }),
                    new MouseWheelZoomModifier(),
                    new ZoomExtentsModifier()
                );

                return { sciChartSurface };
            }}
        />
    );
}

NOTE Make sure that in both cases initChart and config props do not change, as they should be only used for initial chart render.

Useful Links

Features & benefits

• Learn about features of SciChart.js here

Onboarding

• Tutorials
• Getting Started Guide
• Documentation
• CodePen, JSFiddle support

Support

• Community forums
• Stackoverflow tag
• Contact Us (Technical support or sales)