Angular Wafer Analysis Chart

Creates an Angular Wafer Analysis Chart using SciChart.js, by leveraging the FastRectangleRenderableSeries, and crossfilter to enable live filtering.

Fullscreen

Edit

 Edit

Docs

index.tsx

theme.ts

measureCharts.ts

scatterPlot.ts

store.ts

styles.css

waferChart.ts

waferData.ts

Copy to clipboard
Minimise
Fullscreen
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

angular Chart Examples & Demos

See Also: Scientific & Medical Charts (10 Demos)

Angular Vital Signs ECG/EKG Medical Demo | SciChart.js

Angular Vital Signs ECG/EKG Medical Demo

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.

Angular Chart with Logarithmic Axis Example | SciChart.js

Angular Chart with Logarithmic Axis Example

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

LiDAR 3D Point Cloud of Geospatial Data | SciChart.js

LiDAR 3D Point Cloud of Geospatial Data

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

Angular Chart with Vertically Stacked Axes | SciChart.js

Angular Chart with Vertically Stacked Axes

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

Realtime Audio Spectrum Analyzer Chart | SciChart.js Demo

Realtime Audio Spectrum Analyzer Chart Example

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

Realtime Audio Analyzer Bars Demo | SciChart.js Demo

Realtime Audio Analyzer Bars Demo

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

Interactive Waterfall Chart | Angular Charts | SciChart.js

Interactive Waterfall Spectral Chart

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

Interactive Phasor Diagram chart | Angular Charts | SciChart.js

Phasor Diagram Chart Example

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

NEW!
Angular Correlation Plot | Angular Charts | SciChart.js Demo

Angular Correlation Plot

Create Angular Correlation Plot with high performance SciChart.js. Easily render pre-defined point types. Supports custom shapes. Get your free trial now.

NEW!
Angular Semiconductors Dashboard | JavaScript Charts | SciChart.js

Angular Semiconductors Dashboard

Angular **Semiconductors Dashboard** using SciChart.js, by leveraging the **FastRectangleRenderableSeries**, and its `customTextureOptions` property to have a custom tiling texture fill.

SciChart Ltd, 16 Beaufort Court, Admirals Way, Docklands, London, E14 9XL.