React 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 React Chart with background image using transparency in SciChart.js

Styling a React Chart in Code | SciChart.js Demo

Styling a React Chart in Code

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

Using Theme Manager in React Chart | SciChart.js Demo

Using Theme Manager in React Chart

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

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

Create a Custom Theme for React Chart

Demonstrates how to create a Custom Theme for a SciChart.js React 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

React Point-Markers Chart | SciChart.js Demo

React Point-Markers Chart

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

Dashed Line Styling | SciChart.js Demo

Dashed Line Styling

Demonstrates dashed line series in React Charts with SciChart.js

Data Labels | SciChart.js Demo

Data Labels

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

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

React Chart with Multi-Style Series

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

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

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