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

Styling a Angular Chart in Code | SciChart.js Demo

Styling a Angular Chart in Code

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

Using Theme Manager in Angular Chart | SciChart.js Demo

Using Theme Manager in Angular Chart

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

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

Create a Custom Theme for Angular Chart

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

Angular Point-Markers Chart | SciChart.js Demo

Angular Point-Markers Chart

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

Dashed Line Styling | SciChart.js Demo

Dashed Line Styling

Demonstrates dashed line series in Angular Charts with SciChart.js

Data Labels | SciChart.js Demo

Data Labels

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

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

Angular Chart with Multi-Style Series

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

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

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