Create a Custom Theme for Angular Chart
Demonstrates how to create a Custom Theme for SciChart.js, High Performance JavaScript Charts
drawExample.ts
angular.ts
data.ts
1import { closeValues, dateValues, highValues, lowValues, openValues } from "./data";
2
3import {
4 FastCandlestickRenderableSeries,
5 FastColumnRenderableSeries,
6 FastLineRenderableSeries,
7 NumericAxis,
8 NumberRange,
9 OhlcDataSeries,
10 RolloverModifier,
11 SciChartSurface,
12 XyDataSeries,
13} from "scichart";
14
15export const drawExample = async (rootElement: string | HTMLDivElement) => {
16 // Create a SciChartSurface
17 const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement);
18
19 // Create and apply your custom theme
20 sciChartSurface.applyTheme({
21 annotationsGripsBackgroundBrush: "white",
22 annotationsGripsBorderBrush: "white",
23 axis3DBandsFill: "#1F3D6833",
24 axisBandsFill: "#1F3D6833",
25 axisBorder: "#1F3D68",
26 axisPlaneBackgroundFill: "Transparent",
27 columnFillBrush: "white",
28 columnLineColor: "white",
29 cursorLineBrush: "#6495ED99",
30 defaultColorMapBrush: [
31 { offset: 0, color: "DarkBlue" },
32 { offset: 0.5, color: "CornflowerBlue" },
33 { offset: 1, color: "#FF22AA" },
34 ],
35 downBandSeriesFillColor: "#52CC5490",
36 downBandSeriesLineColor: "#E26565FF",
37 downBodyBrush: "white",
38 downWickColor: "white",
39 gridBackgroundBrush: "white",
40 gridBorderBrush: "white",
41 labelBackgroundBrush: "#6495EDAA",
42 labelBorderBrush: "#6495ED",
43 labelForegroundBrush: "#EEEEEE",
44 legendBackgroundBrush: "#1D2C35",
45 lineSeriesColor: "white",
46 loadingAnimationForeground: "#6495ED",
47 loadingAnimationBackground: "#0D213A",
48 majorGridLineBrush: "#1F3D68",
49 minorGridLineBrush: "#102A47",
50 mountainAreaBrush: "white",
51 mountainLineColor: "white",
52 overviewFillBrush: "white",
53 planeBorderColor: "white",
54 rolloverLineBrush: "#FD9F2533",
55 rubberBandFillBrush: "#99999933",
56 rubberBandStrokeBrush: "#99999977",
57 sciChartBackground: "#0D213A",
58 scrollbarBackgroundBrush: "white",
59 scrollbarBorderBrush: "white",
60 scrollbarGripsBackgroundBrush: "white",
61 scrollbarViewportBackgroundBrush: "white",
62 scrollbarViewportBorderBrush: "white",
63 shadowEffectColor: "#000000FF",
64 textAnnotationBackground: "#6495EDAA",
65 textAnnotationForeground: "#333333",
66 tickTextBrush: "#6495ED",
67 upBandSeriesFillColor: "white",
68 upBandSeriesLineColor: "white",
69 upBodyBrush: "#6495EDA0",
70 upWickColor: "#6495ED",
71 axisTitleColor: "#EEEEEE",
72 chartTitleColor: "#EEEEEE",
73 });
74
75 // Create the XAxis, YAxis
76 const xAxis = new NumericAxis(wasmContext);
77 xAxis.visibleRange = new NumberRange(0, 31);
78 xAxis.axisTitle = "X Axis";
79 sciChartSurface.xAxes.add(xAxis);
80 const yAxis = new NumericAxis(wasmContext);
81 yAxis.visibleRange = new NumberRange(1, 1.2);
82 yAxis.labelProvider.formatLabel = (dataValue: number) => dataValue.toFixed(3);
83 yAxis.labelProvider.formatCursorLabel = (dataValue: number) => dataValue.toFixed(3);
84 sciChartSurface.yAxes.add(yAxis);
85
86 // Create some series with data
87 const series1 = new FastLineRenderableSeries(wasmContext);
88 series1.strokeThickness = 3;
89 series1.stroke = "#16a085";
90 sciChartSurface.renderableSeries.add(series1);
91
92 series1.dataSeries = new XyDataSeries(wasmContext, {
93 xValues: [1, 5, 10, 15, 20, 25, 30],
94 yValues: [1.12, 1.121, 1.119, 1.11, 1.115, 1.112, 1.1],
95 });
96
97 const series2 = new FastCandlestickRenderableSeries(wasmContext, {
98 strokeThickness: 2,
99 dataSeries: new OhlcDataSeries(wasmContext, {
100 xValues: dateValues,
101 openValues,
102 highValues,
103 lowValues,
104 closeValues,
105 }),
106 dataPointWidth: 0.5,
107 });
108 series2.rolloverModifierProps.tooltipColor = "#d0d3d4";
109 series2.rolloverModifierProps.markerColor = "#d0d3d4";
110 sciChartSurface.renderableSeries.add(series2);
111
112 const series3 = new FastColumnRenderableSeries(wasmContext, {
113 fill: "rgba(176, 196, 222, 0.7)",
114 stroke: "#4682b4",
115 strokeThickness: 2,
116 dataPointWidth: 0.5,
117 });
118 sciChartSurface.renderableSeries.add(series3);
119 const dataSeries = new XyDataSeries(wasmContext);
120 for (let i = 1; i <= 30; i++) {
121 dataSeries.append(i, 1 + Math.sin(i * 0.1) * 0.1);
122 }
123 series3.dataSeries = dataSeries;
124
125 // Create tootip behaviour
126 sciChartSurface.chartModifiers.add(new RolloverModifier());
127 return { sciChartSurface, wasmContext };
128};
129Create a Custom Theme for Angular Chart
Overview
This example demonstrates how to create and apply a custom theme to a SciChart.js chart within an Angular application. Using an Angular standalone component with the ScichartAngularComponent, the example encapsulates chart initialization, theming, and data binding in a streamlined manner.
Technical Implementation
The chart is initialized asynchronously by calling SciChartSurface.create(), which sets up the required WebGL context for efficient rendering. The custom theme is applied via the sciChartSurface.applyTheme() method, where extensive styling properties conforming to IThemeProvider for axes, grid lines, series colors, and annotations are defined. This approach is detailed in the Chart Styling - Creating a Custom Theme documentation. Furthermore, NumericAxis objects are configured with custom visible ranges and label formatting, as described in the NumericAxis documentation, ensuring precise axis behavior.
Features and Capabilities
The implementation incorporates high-performance renderable series including FastLineRenderableSeries, FastCandlestickRenderableSeries, and FastColumnRenderableSeries to efficiently manage complex datasets. An interactive RolloverModifier enhances the chart experience by providing dynamic tooltips on mouse hover. Additionally, the example demonstrates robust data binding using XyDataSeries and OhlcDataSeries, making it easy to update and visualize data in real-time.
Integration and Best Practices
Built as an Angular standalone component, the example leverages best practices for asynchronous initialization and WebGL context management in Angular applications. This design simplifies bootstrapping and integrates seamlessly with Angular using the scichart-angular package. By applying a comprehensive custom theme, developers are encouraged to explore advanced styling options and performance optimizations provided by SciChart.js. Overall, the example serves as an effective demonstration of integrating custom theming in Angular while maintaining high-performance rendering and dynamic data updates.
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
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 Chart Title
Demonstrates chart title with different position and alignment options
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.