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            useNativeText: false, // this must be false to use labelStyle fontWeight and fontStyle
62            labelStyle: {
63                fontSize: 16,
64                fontWeight: "bold",
65                fontStyle: "Italic",
66                color: axisLabelColor,
67                fontFamily: "Arial",
68            },
69            backgroundColor: axisBackgroundFill,
70            axisBorder: {
71                borderTop: 1,
72                color: borderColor,
73            },
74        })
75    );
76
77    // Create and style left YAxis
78    sciChartSurface.yAxes.add(
79        new NumericAxis(wasmContext, {
80            axisAlignment: EAxisAlignment.Left,
81            axisBandsFill,
82            axisTitle: "Left Y Axis",
83            axisTitleStyle: {
84                fontSize: 25,
85                fontFamily: "Montserrat",
86                fontWeight: "bold",
87                fontStyle: "italic",
88                color: axisTitleColor,
89            },
90            majorGridLineStyle: {
91                strokeThickness: 1,
92                color: majorGridLineColor,
93                strokeDashArray: [10, 5],
94            },
95            minorGridLineStyle: {
96                strokeThickness: 1,
97                color: minorGridLineColor,
98                strokeDashArray: [2, 2],
99            },
100            majorTickLineStyle: {
101                strokeThickness: 1,
102                color: majorGridLineColor,
103                tickSize: 8,
104            },
105            minorTickLineStyle: {
106                strokeThickness: 1,
107                color: minorGridLineColor,
108                tickSize: 4,
109            },
110            useNativeText: false, // this must be false to use labelStyle fontWeight and fontStyle
111            labelStyle: {
112                fontSize: 16,
113                fontWeight: "bold",
114                fontStyle: "Italic",
115                color: axisLabelColor,
116                fontFamily: "Arial",
117            },
118            backgroundColor: axisBackgroundFill,
119            axisBorder: {
120                borderRight: 1,
121                color: borderColor,
122            },
123        })
124    );
125
126    // Create and style right YAxis
127    sciChartSurface.yAxes.add(
128        new NumericAxis(wasmContext, {
129            useNativeText: false,
130            axisTitle: "Right Y Axis",
131            axisTitleStyle: {
132                fontSize: 25,
133                fontFamily: "Montserrat",
134                fontWeight: "bold",
135                fontStyle: "italic",
136                color: axisTitleColor,
137            },
138            axisAlignment: EAxisAlignment.Right,
139            majorGridLineStyle: {
140                strokeThickness: 1,
141                color: majorGridLineColor,
142                strokeDashArray: [10, 5],
143            },
144            minorGridLineStyle: {
145                strokeThickness: 1,
146                color: minorGridLineColor,
147                strokeDashArray: [2, 2],
148            },
149            majorTickLineStyle: {
150                strokeThickness: 1,
151                color: majorGridLineColor,
152                tickSize: 8,
153            },
154            minorTickLineStyle: {
155                strokeThickness: 1,
156                color: minorGridLineColor,
157                tickSize: 4,
158            },
159            labelStyle: {
160                fontSize: 16,
161                fontWeight: "bold",
162                fontStyle: "Italic",
163                color: axisLabelColor,
164                fontFamily: "Arial",
165            },
166            backgroundColor: axisBackgroundFill,
167            axisBorder: {
168                borderLeft: 1,
169                color: borderColor,
170            },
171        })
172    );
173
174    // Add title annotation
175    sciChartSurface.annotations.add(
176        new TextAnnotation({
177            text: "Chart with custom style applied in code",
178            fontSize: 20,
179            fontWeight: "Bold",
180            textColor: axisLabelColor,
181            x1: 0.5,
182            y1: 0,
183            opacity: 0.77,
184            horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
185            xCoordinateMode: ECoordinateMode.Relative,
186            yCoordinateMode: ECoordinateMode.Relative,
187        })
188    );
189
190    // Add some interactivity modifiers
191    sciChartSurface.chartModifiers.add(new ZoomPanModifier({ enableZoom: true }));
192    sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier());
193
194    sciChartSurface.zoomExtents();
195
196    return { sciChartSurface, wasmContext };
197};
198