Demonstrates handling realtime big data with different chart types using SciChart.js, High Performance JavaScript Charts
index.tsx
ChartGroupLoader.tsx
containerSizeHooks.ts
theme.ts
after-all-charts-init.ts
chart-configurations.ts
chart-types.ts
data-generation.ts
GridLayoutModifier.ts
main-chart-config.ts
ModifierGroup.ts
Overview.tsx
page-statistics-chart-config.ts
region-statistic-charts.ts
server-load-chart-config.ts
ThresholdSlider.tsx
VisibleRangeSynchronizationManager.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
This demo showcases the incredible realtime performance of our Angular charts by updating the series with millions of data-points!
This demo showcases the incredible performance of our Angular Chart by loading 500 series with 500 points (250k points) instantly!
This demo showcases the incredible performance of our JavaScript Chart by loading a million points instantly.
This demo showcases the realtime performance of our Angular Chart by animating several series with thousands of data-points at 60 FPS
Demonstrating the capability of SciChart.js to create a JavaScript Audio Analyzer and visualize the Fourier-Transform of an audio waveform in realtime.
Demonstrates how to create Oil and Gas Dashboard
This demo showcases the incredible realtime performance of our JavaScript charts by updating the series with millions of data-points!
This demo showcases the incredible realtime performance of our Angular charts by updating the series with millions of data-points!
Demonstrates a custom modifier which can convert from single chart to grid layout and back.
Demonstrates how to repurpose a Candlestick Series into dragabble, labled, event markers
Population Pyramid of Europe and Africa