Wafer Analysis Chart

Creates a 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

javascript Chart Examples & Demos

See Also: Scientific & Medical Charts (10 Demos)

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

JavaScript 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.

JavaScript Chart with Logarithmic Axis Example | SciChart

JavaScript Chart with Logarithmic Axis Example

Demonstrates Logarithmic Axis on a JavaScript 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.

JavaScript Chart with Vertically Stacked Axes | SciChart

JavaScript Chart with Vertically Stacked Axes

Demonstrates Vertically Stacked Axes on a JavaScript 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 JavaScript audio spectrum analyzer example from SciChart. This real-time 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 | Javascript 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 | Javascript Charts | SciChart.js

Phasor Diagram Chart Example

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

NEW!
JavaScript Correlation Plot | Javascript Charts | SciChart.js

JavaScript Correlation Plot

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

NEW!
Semiconductors Dashboard | JavaScript Charts | SciChart.js

Semiconductors Dashboard

JavaScript **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.