Styling a React Chart in Code

1import {
2    SciChartSurface,
3    NumericAxis,
4    MouseWheelZoomModifier,
5    EAxisAlignment,
6    ZoomPanModifier,
7    TextAnnotation,
8    EHorizontalAnchorPoint,
9    ECoordinateMode,
10} from "scichart";
11
12export const drawExample = async (rootElement: string | HTMLDivElement) => {
13    // Demonstrates how to colour chart parts in code
14    // This is better done by themes, where you can also style the loader pre-scichart initialisation
15    //
16    const chartBackgroundColor = "#E4F5FC";
17    const axisBandsFill = "#1F3D6805";
18    const axisTitleColor = "#1F3D68";
19    const majorGridLineColor = "#264B9355";
20    const minorGridLineColor = "#264B9322";
21    const axisLabelColor = "#1F3D68";
22    const axisBackgroundFill = "#00000000";
23    const borderColor = "#1F3D68";
24
25    const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement);
26    sciChartSurface.background = chartBackgroundColor;
27
28    // Create and style xAxis
29    sciChartSurface.xAxes.add(
30        new NumericAxis(wasmContext, {
31            axisTitle: "X Axis",
32            drawMajorBands: true,
33            axisBandsFill,
34            axisTitleStyle: {
35                fontSize: 25,
36                fontFamily: "Montserrat",
37                fontWeight: "bold",
38                fontStyle: "italic",
39                color: axisTitleColor,
40            },
41            majorGridLineStyle: {
42                strokeThickness: 1,
43                color: majorGridLineColor,
44                strokeDashArray: [10, 5],
45            },
46            minorGridLineStyle: {
47                strokeThickness: 1,
48                color: minorGridLineColor,
49                strokeDashArray: [2, 2],
50            },
51            majorTickLineStyle: {
52                strokeThickness: 1,
53                color: majorGridLineColor,
54                tickSize: 8,
55            },
56            minorTickLineStyle: {
57                strokeThickness: 1,
58                color: minorGridLineColor,
59                tickSize: 4,
60            },
61            labelStyle: {
62                fontSize: 16,
63                fontWeight: "bold",
64                fontStyle: "Italic",
65                color: axisLabelColor,
66                fontFamily: "Arial",
67            },
68            backgroundColor: axisBackgroundFill,
69            axisBorder: {
70                borderTop: 1,
71                color: borderColor,
72            },
73        })
74    );
75
76    // Create and style left YAxis
77    sciChartSurface.yAxes.add(
78        new NumericAxis(wasmContext, {
79            axisAlignment: EAxisAlignment.Left,
80            axisBandsFill,
81            axisTitle: "Left Y Axis",
82            axisTitleStyle: {
83                fontSize: 25,
84                fontFamily: "Montserrat",
85                fontWeight: "bold",
86                fontStyle: "italic",
87                color: axisTitleColor,
88            },
89            majorGridLineStyle: {
90                strokeThickness: 1,
91                color: majorGridLineColor,
92                strokeDashArray: [10, 5],
93            },
94            minorGridLineStyle: {
95                strokeThickness: 1,
96                color: minorGridLineColor,
97                strokeDashArray: [2, 2],
98            },
99            majorTickLineStyle: {
100                strokeThickness: 1,
101                color: majorGridLineColor,
102                tickSize: 8,
103            },
104            minorTickLineStyle: {
105                strokeThickness: 1,
106                color: minorGridLineColor,
107                tickSize: 4,
108            },
109            labelStyle: {
110                fontSize: 16,
111                fontWeight: "bold",
112                fontStyle: "Italic",
113                color: axisLabelColor,
114                fontFamily: "Arial",
115            },
116            backgroundColor: axisBackgroundFill,
117            axisBorder: {
118                borderRight: 1,
119                color: borderColor,
120            },
121        })
122    );
123
124    // Create and style right YAxis
125    sciChartSurface.yAxes.add(
126        new NumericAxis(wasmContext, {
127            axisTitle: "Right Y Axis",
128            axisTitleStyle: {
129                fontSize: 25,
130                fontFamily: "Montserrat",
131                fontWeight: "bold",
132                fontStyle: "italic",
133                color: axisTitleColor,
134            },
135            axisAlignment: EAxisAlignment.Right,
136            majorGridLineStyle: {
137                strokeThickness: 1,
138                color: majorGridLineColor,
139                strokeDashArray: [10, 5],
140            },
141            minorGridLineStyle: {
142                strokeThickness: 1,
143                color: minorGridLineColor,
144                strokeDashArray: [2, 2],
145            },
146            majorTickLineStyle: {
147                strokeThickness: 1,
148                color: majorGridLineColor,
149                tickSize: 8,
150            },
151            minorTickLineStyle: {
152                strokeThickness: 1,
153                color: minorGridLineColor,
154                tickSize: 4,
155            },
156            labelStyle: {
157                fontSize: 16,
158                fontWeight: "bold",
159                fontStyle: "Italic",
160                color: axisLabelColor,
161                fontFamily: "Arial",
162            },
163            backgroundColor: axisBackgroundFill,
164            axisBorder: {
165                borderLeft: 1,
166                color: borderColor,
167            },
168        })
169    );
170
171    // Add title annotation
172    sciChartSurface.annotations.add(
173        new TextAnnotation({
174            text: "Chart with custom style applied in code",
175            fontSize: 20,
176            fontWeight: "Bold",
177            textColor: axisLabelColor,
178            x1: 0.5,
179            y1: 0,
180            opacity: 0.77,
181            horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
182            xCoordinateMode: ECoordinateMode.Relative,
183            yCoordinateMode: ECoordinateMode.Relative,
184        })
185    );
186
187    // Add some interactivity modifiers
188    sciChartSurface.chartModifiers.add(new ZoomPanModifier({ enableZoom: true }));
189    sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier());
190
191    sciChartSurface.zoomExtents();
192
193    return { sciChartSurface, wasmContext };
194};
195