Angular Chart Title
A Chart Title can be placed above, below, or either side of the chart, and be left, center or right aligned.
index.tsx
RandomWalkGenerator.ts
theme.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();
73ChartTitle - Angular
Overview
This example demonstrates the integration of SciChart.js within an Angular application to dynamically manage and update a chart title. The chart title is highly configurable, allowing placement above, below, or to either side of the chart, with flexible alignment options such as left, center, or right. By leveraging Angular’s modular architecture, this example ensures a responsive and maintainable charting solution.
Technical Implementation
The implementation encapsulates the SciChart.js initialization logic within Angular services, employing dependency injection as outlined in the Introduction to services and dependency injection documentation. Angular lifecycle hooks, such as ngOnInit, are used to initialize the chart and manage real-time updates using JSON-driven configuration, in line with the guidelines provided by Getting Started with SciChart JS.
Features and Capabilities
This example offers several advanced features including dynamic updates that reflect immediate changes in the chart title; advanced customization of title properties such as alignment, position, and multiline configurations; and efficient handling of WebGL rendering for optimal performance. These capabilities ensure that dynamic data binding and event handling are integrated seamlessly into the Angular framework.
Integration and Best Practices
The solution follows Angular best practices for third-party library integration. It makes extensive use of dependency injection to encapsulate SciChart.js logic and lifecycle hooks to manage component initialization and updates, as documented in Component Lifecycle - Angular. Performance optimizations are achieved by integrating Angular change detection techniques along with efficient WebGL canvas management, reflecting insights from Angular Performance Optimization - Dave Bush. This structured approach facilitates scalable and maintainable charting applications within the Angular ecosystem.
angular Chart Examples & Demos
See Also: Styling and Theming (11 Demos)
Chart 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
Demonstrates how to style a Angular Chart entirely in code with SciChart.js themeing API
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
Demonstrates how to create a Custom Theme for a SciChart.js Angular Chart using our Theming API
Coloring Series per-point using the PaletteProvider
Demonstrates per-point coloring in JavaScript chart types with SciChart.js PaletteProvider API
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
Demonstrates dashed line series in Angular Charts with SciChart.js
Data Labels
Show data labels on Angular Chart. Get your free demo now.
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
Demonstrates how to use a RenderDataTransform to split lines into multiple segments so they can be individually colored according to thresholds
Angular Order of Rendering Example
The Angular Order of Rendering example gives you full control of the draw order of series and annotations for charts. Try SciChart's advanced customizations.