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

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

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

What does SciChart.Angular do?

• Neatly wraps up the lifecycle of SciChart.js into a Angular 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

• angular 17.1+
• scichart 4.0.868+

Installing

npm install scichart scichart-angular

Loading required WASM dependencies

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

• our new Documentation website Deploying WASM
• legacy Docs (v3) Deploying Wasm Docs

NOTE ".data" files dependency was removed since v4.

By default SciChartAngular applies the following configuration:

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

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

Using

There are two ways to setup SciChartAngular. 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.

app.component.html

<scichart-angular [config]="config"></scichart-angular>

app.component.ts

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { ScichartAngularComponent } from 'scichart-angular';

import {
  SciChartSurface,
  NumericAxis,
  XyDataSeries,
  MouseWheelZoomModifier,
  ZoomPanModifier,
  ZoomExtentsModifier,
  EChart2DModifierType,
  ESeriesType,
} from "scichart";

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, ScichartAngularComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'scichart-angular-app';
  
  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.

app.component.html

<scichart-angular [initChart]="drawExample"></scichart-angular>

app.component.ts

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { ScichartAngularComponent } from 'scichart-angular';

import {
  SciChartSurface,
  NumericAxis,
  XyDataSeries,
  MouseWheelZoomModifier,
  ZoomPanModifier,
  ZoomExtentsModifier,
} from "scichart";

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, ScichartAngularComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'scichart-angular-app';

  drawExample = 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
• Legacy Documentation
• CodePen, JSFiddle support

Support

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