React 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();
73React Chart Title Example
Overview
This example demonstrates how to integrate SciChart.js within a React application using the <SciChartReact/> component. It focuses on dynamic chart title management where users can update the title text, alignment, position, and multiline configuration through interactive controls integrated with Material UI.
Technical Implementation
The chart is asynchronously initialized via the SciChartSurface.create() method, establishing the WebGL rendering context and setting up the SciChartSurface with custom title properties. React hooks such as useState and useRef are employed to manage and update the chart title state efficiently within the component lifecycle. For a detailed guide on creating and managing such components, see Creating a SciChart React Component from the Ground Up. The example also integrates event handling for dynamic updates, reflecting changes immediately on the rendered chart.
Features and Capabilities
The example offers several advanced features including immediate propagation of title changes, dynamic customization of visual elements such as text alignment and positioning, and efficient resource management through proper asynchronous initialization and cleanup. These aspects are crucial when working with high-performance WebGL rendering, as outlined in the Performance Tips & Tricks documentation.
Integration and Best Practices
This implementation adheres to modern React integration best practices by leveraging component lifecycle management and state handling for dynamic customization. The use of Material UI components for user input demonstrates effective event handling within a React context. Developers can explore further insights on React integration with SciChart.js in React Charts with SciChart.js: Introducing “SciChart React” which provides additional context on managing and optimizing these interactive charting solutions.
react Chart Examples & Demos
See Also: Styling and Theming (11 Demos)
Chart 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
Demonstrates how to style a React Chart entirely in code with SciChart.js themeing API
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
Demonstrates how to create a Custom Theme for a SciChart.js React 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
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
Demonstrates dashed line series in React Charts with SciChart.js
Data Labels
Show data labels on React Chart. Get your free demo now.
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
Demonstrates how to use a RenderDataTransform to split lines into multiple segments so they can be individually colored according to thresholds
React Order of Rendering Example
The React Order of Rendering example gives you full control of the draw order of series and annotations for charts. Try SciChart's advanced customizations.