JavaScript Chart Title

A Chart Title can be placed above, below, or either side of the chart, and be left, center or right aligned.

Fullscreen

Edit

 Edit

Docs

index.tsx

RandomWalkGenerator.ts

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

See Also: Styling and Theming (10 Demos)

Background Image with Transparency | SciChart.js Demo

Background Image with Transparency

Demonstrates how to create a JavaScript Chart with background image using transparency in SciChart.js

Styling a JavaScript Chart in Code | SciChart.js Demo

Styling a JavaScript Chart in Code

Demonstrates how to style a JavaScript Chart entirely in code with SciChart.js themeing API

Using Theme Manager in JavaScript Chart | SciChart.js Demo

Using Theme Manager in JavaScript Chart

Demonstrates our Light and Dark Themes for JavaScript Charts with SciChart.js ThemeManager API

Create a Custom Theme for JavaScript Chart | SciChart.js Demo

Create a Custom Theme for JavaScript Chart

Demonstrates how to create a Custom Theme for a SciChart.js JavaScript Chart using our Theming API

Coloring Series per-point using the PaletteProvider | SciChart.js Demo

Coloring Series per-point using the PaletteProvider

Demonstrates per-point coloring in JavaScript chart types with SciChart.js PaletteProvider API

JavaScript Point-Markers Chart | SciChart.js Demo

JavaScript Point-Markers Chart

Demonstrates the different point-marker types for JavaScript Scatter charts (Square, Circle, Triangle and Custom image point-marker)

Dashed Line Styling | SciChart.js Demo

Dashed Line Styling

Demonstrates dashed line series in JavaScript Charts with SciChart.js

Data Labels | SciChart.js Demo

Data Labels

Show data labels on JavaScript Chart. Get your free demo now.

JavaScript Chart with Multi-Style Series | SciChart.js Demo

JavaScript Chart with Multi-Style Series

Demonstrates how to apply multiple different styles to a single series using RenderDataTransform

JavaScript Chart with lines split by thresholds | SciChart.js Demo

JavaScript Chart with lines split by thresholds

Demonstrates how to use a RenderDataTransform to split lines into multiple segments so they can be individually colored according to thresholds

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