scichart-react

SciChart.React - React 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/.

:ledger: Documentation and examples

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

Notice that by default SciChartReact applies the following configuration:

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

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

which is different from the core library configuration:

SciChartSurface.configure({
    wasmUrl: undefined,
    dataUrl: undefined
});

SciChart3DSurface.configure({
    wasmUrl: undefined,
    dataUrl: undefined
});

Using

For detailed examples of all provided components check out Docs.

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

• SciChartReact Documentation and examples

Onboarding

• Tutorials
• Getting Started Guide
• SciChart.JS Documentation
• SciChart.React Documentation
• CodePen, JSFiddle support

Support

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