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

$3

- react 16.8+
- scichart 3.2.516+

$3

``
npm install scichart scichart-react
`

$3

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:

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

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

which is different from the core library configuration:

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

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

$3

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.

`tsx
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 (
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.

`tsx
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 (
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

$3

- Learn about features of SciChart.js here

- SciChartReact Documentation and examples

$3

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

$3

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