Creates an Angular Wafer Analysis Chart using SciChart.js, by leveraging the FastRectangleRenderableSeries, and crossfilter to enable live filtering.
index.tsx
theme.ts
measureCharts.ts
scatterPlot.ts
store.ts
styles.css
waferChart.ts
waferData.ts
1import { IThemeProvider, SciChartJsNavyTheme } from "scichart";
2
3export interface AppThemeBase {
4 SciChartJsTheme: IThemeProvider;
5
6 // general colors
7 ForegroundColor: string;
8 Background: string;
9
10 // Series colors
11 VividSkyBlue: string;
12 VividPink: string;
13 VividTeal: string;
14 VividOrange: string;
15 VividBlue: string;
16 VividPurple: string;
17 VividGreen: string;
18 VividRed: string;
19
20 MutedSkyBlue: string;
21 MutedPink: string;
22 MutedTeal: string;
23 MutedOrange: string;
24 MutedBlue: string;
25 MutedPurple: string;
26 MutedRed: string;
27
28 PaleSkyBlue: string;
29 PalePink: string;
30 PaleTeal: string;
31 PaleOrange: string;
32 PaleBlue: string;
33 PalePurple: string;
34}
35
36export class SciChart2022AppTheme implements AppThemeBase {
37 SciChartJsTheme = new SciChartJsNavyTheme();
38
39 // General colors
40 ForegroundColor = "#FFFFFF";
41 Background = this.SciChartJsTheme.sciChartBackground;
42
43 // Series colors
44 VividSkyBlue = "#50C7E0";
45 VividPink = "#EC0F6C";
46 VividTeal = "#30BC9A";
47 VividOrange = "#F48420";
48 VividBlue = "#364BA0";
49 VividPurple = "#882B91";
50 VividGreen = "#67BDAF";
51 VividRed = "#C52E60";
52
53 DarkIndigo = "#14233C";
54 Indigo = "#264B93";
55
56 MutedSkyBlue = "#83D2F5";
57 MutedPink = "#DF69A8";
58 MutedTeal = "#7BCAAB";
59 MutedOrange = "#E7C565";
60 MutedBlue = "#537ABD";
61 MutedPurple = "#A16DAE";
62 MutedRed = "#DC7969";
63
64 PaleSkyBlue = "#E4F5FC";
65 PalePink = "#EEB3D2";
66 PaleTeal = "#B9E0D4";
67 PaleOrange = "#F1CFB5";
68 PaleBlue = "#B5BEDF";
69 PalePurple = "#CFB4D5";
70}
71
72export const appTheme = new SciChart2022AppTheme();
73
In this example we are simulating four channels of data showing that SciChart.js can be used to draw real-time ECG/EKG charts and graphs to monitor heart reate, body temperature, blood pressure, pulse rate, SPO2 blood oxygen, volumetric flow and more.

Demonstrates Logarithmic Axis on a Angular Chart using SciChart.js. SciChart supports logarithmic axis with scientific or engineering notation and positive and negative values

Demonstrating the capability of SciChart.js to create JavaScript 3D Point Cloud charts and visualize LiDAR data from the UK Defra Survey.

Demonstrates Vertically Stacked Axes on a Angular Chart using SciChart.js, allowing data to overlap

See the frequency of recordings with the Angular audio spectrum analyzer example from SciChart. This real-time audio visualizer demo uses a Fourier Transform.

Demonstrating the capability of SciChart.js to create a JavaScript Audio Analyzer Bars and visualize the Fourier-Transform of an audio waveform in realtime.

Demonstrates how to create a Waterfall chart in SciChart.js, showing chromotragraphy data with interactive selection of points.

See the Angular Phasor Diagram example to combine a Cartesian surface with a Polar subsurface. Get seamless Angular integration with SciChart. View demo now.

Create Angular Correlation Plot with high performance SciChart.js. Easily render pre-defined point types. Supports custom shapes. Get your free trial now.
Angular **Semiconductors Dashboard** using SciChart.js, by leveraging the **FastRectangleRenderableSeries**, and its `customTextureOptions` property to have a custom tiling texture fill.