Angular Polar Gauge Chart

1import {
2    EAxisAlignment,
3    ECoordinateMode,
4    EPolarAxisMode,
5    NumberRange,
6    PolarNumericAxis,
7    PolarStackedColumnCollection,
8    PolarStackedColumnRenderableSeries,
9    SciChartPolarSurface,
10    Thickness,
11    XyDataSeries,
12    PolarPointerAnnotation,
13    EPolarLabelMode,
14    TextAnnotation,
15    EVerticalAnchorPoint,
16    EHorizontalAnchorPoint,
17    EAnnotationLayer,
18    EStrokeLineJoin,
19    PolarArcAnnotation,
20    NativeTextAnnotation,
21    GradientParams,
22    Point,
23    PolarColumnRenderableSeries,
24    XyxyDataSeries,
25    XyyDataSeries,
26    EColumnMode,
27    XyxDataSeries,
28    EColumnYMode,
29    EAutoRange,
30} from "scichart";
31import { appTheme } from "../../../theme";
32
33const DARK_BLUE = "#111111";
34const POINTER_VALUE = 62;
35
36export const getChartsInitializationAPI = () => {
37    const gauge1 = async (rootElement: string | HTMLDivElement) => {
38        const { sciChartSurface, wasmContext } = await SciChartPolarSurface.create(rootElement, {
39            padding: new Thickness(0, 0, 0, 0),
40        });
41
42        const columnYValues = [50, 70, 80, 90, 100];
43        const GRADIENT_COLROS = [
44            appTheme.VividPink,
45            appTheme.VividOrange,
46            appTheme.VividTeal,
47            appTheme.Indigo,
48            appTheme.DarkIndigo,
49        ];
50
51        const radialXAxis = new PolarNumericAxis(wasmContext, {
52            polarAxisMode: EPolarAxisMode.Radial,
53            axisAlignment: EAxisAlignment.Right,
54
55            // start labels in sync with angular axis
56            startAngle: - Math.PI / 4,
57
58            drawLabels: false,
59            drawMinorGridLines: false,
60            drawMajorGridLines: false,
61            drawMajorTickLines: false,
62            drawMinorTickLines: false,
63        });
64        sciChartSurface.xAxes.add(radialXAxis);
65
66        const angularYAxis = new PolarNumericAxis(wasmContext, {
67            polarAxisMode: EPolarAxisMode.Angular,
68            axisAlignment: EAxisAlignment.Top,
69            visibleRange: new NumberRange(0, 100), // 0 to 100
70            zoomExtentsToInitialRange: true,
71
72            flippedCoordinates: true,
73            useNativeText: true,
74            totalAngle: (Math.PI * 3) / 2,
75            startAngle: - Math.PI / 4,
76
77            drawMinorGridLines: false,
78            drawMajorGridLines: false,
79            drawMinorTickLines: false,
80            drawMajorTickLines: false,
81            labelPrecision: 0,
82            labelStyle: {
83                color: "#FFFFFF",
84            },
85        });
86        angularYAxis.labelProvider.formatLabel = (value: number) => {
87            if (columnYValues.includes(value) || value === 0) {
88                return value.toFixed(0);
89            }
90            return "";
91        };
92        sciChartSurface.yAxes.add(angularYAxis);
93
94        // Add 5 background arc sectors
95        columnYValues.forEach((yVal, i) => {
96            const highlightArc = new PolarArcAnnotation({
97                x2: 8,
98                x1: 10,
99
100                y1: columnYValues[i - 1] ?? 0,
101                y2: yVal,
102
103                fill: GRADIENT_COLROS[i],
104                strokeThickness: 2,
105            });
106            sciChartSurface.annotations.add(highlightArc);
107        });
108
109        const pointerAnnotation = new PolarPointerAnnotation({
110            x1: POINTER_VALUE,
111            y1: 8,
112            xCoordinateMode: ECoordinateMode.DataValue,
113            yCoordinateMode: ECoordinateMode.DataValue,
114
115            pointerStyle: {
116                baseSize: 0.2,
117                fill: "#FFFFFF",
118                stroke: "#FFFFFF",
119                strokeWidth: 2,
120            },
121
122            pointerCenterStyle: {
123                size: 0.2,
124                fill: DARK_BLUE,
125                stroke: "#FFFFFF",
126                strokeWidth: 2,
127            },
128        });
129        sciChartSurface.annotations.add(pointerAnnotation);
130
131        return { sciChartSurface, wasmContext };
132    };
133
134    const gauge2 = async (rootElement: string | HTMLDivElement) => {
135        const { sciChartSurface, wasmContext } = await SciChartPolarSurface.create(rootElement, {
136            padding: new Thickness(10, 0, 10, 0),
137        });
138
139        const radialYAxis = new PolarNumericAxis(wasmContext, {
140            polarAxisMode: EPolarAxisMode.Radial,
141            axisAlignment: EAxisAlignment.Right,
142            zoomExtentsToInitialRange: true,
143            visibleRange: new NumberRange(0, 5),
144            drawLabels: false,
145            drawMinorGridLines: false,
146            drawMajorGridLines: false,
147            drawMajorTickLines: false,
148            drawMinorTickLines: false,
149        });
150        sciChartSurface.yAxes.add(radialYAxis);
151
152        const angularXAxis = new PolarNumericAxis(wasmContext, {
153            polarAxisMode: EPolarAxisMode.Angular,
154            axisAlignment: EAxisAlignment.Top,
155            flippedCoordinates: true,
156            visibleRange: new NumberRange(-10, 10),
157            useNativeText: true,
158            startAngle: 0,
159            totalAngleDegrees: 90,
160
161            autoTicks: false,
162            majorDelta: 5,
163
164            drawMinorGridLines: false,
165            drawMajorGridLines: false,
166            drawMinorTickLines: false,
167            drawMajorTickLines: false,
168            labelPrecision: 0,
169            labelStyle: {
170                color: "#FFFFFF",
171            },
172        });
173        sciChartSurface.xAxes.add(angularXAxis);
174
175        const column = new PolarColumnRenderableSeries(wasmContext, {
176            columnXMode: EColumnMode.StartEnd,
177            dataSeries: new XyxDataSeries(wasmContext, {
178                xValues: [-10], // start
179                x1Values: [10], //end
180                yValues: [5], // top
181            }),
182            defaultY1: 4, // bottom
183            fillLinearGradient: new GradientParams(new Point(1, 0), new Point(0, 0), [
184                { offset: 0, color: appTheme.VividPink },
185                { offset: 0.4, color: appTheme.VividOrange },
186                { offset: 0.7, color: appTheme.Indigo },
187                { offset: 1, color: appTheme.DarkIndigo },
188            ]),
189            stroke: "#FFFFFF",
190        });
191        sciChartSurface.renderableSeries.add(column);
192
193        const pointerAnnotation = new PolarPointerAnnotation({
194            x1: -3,
195            y1: 4,
196            xCoordinateMode: ECoordinateMode.DataValue,
197            yCoordinateMode: ECoordinateMode.DataValue,
198
199            pointerStyle: {
200                baseSize: 0.05,
201                fill: DARK_BLUE,
202                stroke: DARK_BLUE,
203                backExtensionSize: 0.1,
204            },
205
206            pointerCenterStyle: {
207                size: 0.1,
208                fill: appTheme.Indigo,
209                stroke: DARK_BLUE,
210                strokeWidth: 6,
211            },
212        });
213        sciChartSurface.annotations.add(pointerAnnotation);
214
215        return { sciChartSurface, wasmContext };
216    };
217
218    const gauge3 = async (rootElement: string | HTMLDivElement) => {
219        const { sciChartSurface, wasmContext } = await SciChartPolarSurface.create(rootElement, {
220            padding: new Thickness(0, 0, 0, 0),
221        });
222
223        const radialXAxis = new PolarNumericAxis(wasmContext, {
224            visibleRange: new NumberRange(0, 10),
225            labelStyle: { padding: new Thickness(0, 0, 0, 0) },
226            axisAlignment: EAxisAlignment.Right,
227            polarAxisMode: EPolarAxisMode.Radial,
228            useNativeText: true,
229            drawLabels: false,
230
231            autoTicks: false,
232            majorDelta: 10,
233            drawMajorGridLines: true,
234            majorGridLineStyle: {
235                color: "#FFFFFF",
236                strokeThickness: 2,
237            },
238
239            drawMinorGridLines: false,
240            drawMajorTickLines: false,
241            drawMinorTickLines: false,
242            totalAngle: (Math.PI * 3) / 2,
243        });
244        sciChartSurface.xAxes.add(radialXAxis);
245
246        const psiAxis = new PolarNumericAxis(wasmContext, {
247            polarAxisMode: EPolarAxisMode.Angular,
248            axisAlignment: EAxisAlignment.Top,
249            polarLabelMode: EPolarLabelMode.Parallel,
250            visibleRange: new NumberRange(0, 100),
251            flippedCoordinates: true,
252            useNativeText: true,
253            totalAngle: (Math.PI * 3) / 2,
254            startAngle: - Math.PI / 4,
255            autoTicks: false,
256            majorDelta: 10,
257
258            drawMajorGridLines: false,
259            drawMinorGridLines: false,
260
261            drawMajorTickLines: true,
262            majorTickLineStyle: {
263                color: appTheme.VividPink,
264                strokeThickness: 2,
265                tickSize: 10,
266            },
267            drawMinorTickLines: true,
268            minorTickLineStyle: {
269                color: appTheme.VividPink,
270                strokeThickness: 0.5,
271                tickSize: 6,
272            },
273
274            isInnerAxis: false,
275            labelPrecision: 0,
276            labelStyle: {
277                color: appTheme.VividPink,
278            },
279        });
280        const barAxis = new PolarNumericAxis(wasmContext, {
281            polarAxisMode: EPolarAxisMode.Angular,
282            axisAlignment: EAxisAlignment.Top,
283            polarLabelMode: EPolarLabelMode.Horizontal,
284            visibleRange: new NumberRange(0, 7),
285            flippedCoordinates: true,
286            useNativeText: true,
287            totalAngle: (Math.PI * 3) / 2,
288            startAngle: Math.PI * 2 - Math.PI / 4,
289            autoTicks: false,
290            majorDelta: 1,
291
292            drawMajorGridLines: false,
293            drawMinorGridLines: false,
294
295            drawMajorTickLines: true,
296            majorTickLineStyle: {
297                color: "#FFFFFF",
298                strokeThickness: 2,
299                tickSize: 10,
300            },
301            drawMinorTickLines: true,
302            minorTickLineStyle: {
303                color: "#FFFFFF",
304                strokeThickness: 0.5,
305                tickSize: 6,
306            },
307
308            isInnerAxis: true,
309            labelPrecision: 0,
310            labelStyle: {
311                color: "white",
312            },
313        });
314        sciChartSurface.yAxes.add(psiAxis, barAxis);
315
316        const pointerAnnotation = new PolarPointerAnnotation({
317            x1: POINTER_VALUE,
318            y1: 10,
319            xCoordinateMode: ECoordinateMode.DataValue,
320            yCoordinateMode: ECoordinateMode.DataValue,
321            annotationLayer: EAnnotationLayer.Background,
322
323            pointerStyle: {
324                baseSize: 0.1,
325                stroke: DARK_BLUE,
326                fill: DARK_BLUE,
327                backExtensionSize: 0.3,
328                strokeWidth: 2,
329            },
330
331            pointerCenterStyle: {
332                size: 0.15,
333                stroke: DARK_BLUE,
334                fill: "#FFFFFF",
335                strokeWidth: 5,
336            },
337
338            pointerArrowStyle: {
339                headDepth: 0.8,
340                width: 0.15,
341                height: 0.25,
342                fill: DARK_BLUE,
343                stroke: DARK_BLUE,
344            },
345
346            strokeLineJoin: EStrokeLineJoin.Miter,
347        });
348
349        const barText = new TextAnnotation({
350            text: "bar",
351            x1: 0,
352            y1: 0,
353            fontSize: 20,
354            verticalAnchorPoint: EVerticalAnchorPoint.Top,
355            horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
356            padding: new Thickness(30, 0, 0, 0),
357        });
358        const psiText = new TextAnnotation({
359            text: "psi",
360            x1: 0,
361            y1: 0,
362            fontSize: 20,
363            textColor: appTheme.VividPink,
364            verticalAnchorPoint: EVerticalAnchorPoint.Top,
365            horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
366            padding: new Thickness(50, 0, 0, 0),
367        });
368
369        sciChartSurface.annotations.add(pointerAnnotation, barText, psiText);
370
371        return { sciChartSurface, wasmContext };
372    };
373
374    const gauge4 = async (rootElement: string | HTMLDivElement) => {
375        const { sciChartSurface, wasmContext } = await SciChartPolarSurface.create(rootElement, {
376            padding: new Thickness(0, 0, 0, 0),
377        });
378
379        const localPointerValue = 31;
380
381        const radialXAxis = new PolarNumericAxis(wasmContext, {
382            polarAxisMode: EPolarAxisMode.Radial,
383            axisAlignment: EAxisAlignment.Right,
384
385            visibleRange: new NumberRange(0, 10),
386            zoomExtentsToInitialRange: true,
387
388            startAngle: - Math.PI / 4,
389
390            drawLabels: false,
391            drawMinorGridLines: false,
392            drawMajorGridLines: false,
393            drawMajorTickLines: false,
394            drawMinorTickLines: false,
395        });
396        sciChartSurface.xAxes.add(radialXAxis);
397
398        const angularYAxis = new PolarNumericAxis(wasmContext, {
399            polarAxisMode: EPolarAxisMode.Angular,
400            axisAlignment: EAxisAlignment.Top,
401            visibleRange: new NumberRange(0, 50),
402            zoomExtentsToInitialRange: true,
403
404            polarLabelMode: EPolarLabelMode.Parallel,
405            labelStyle: {
406                color: "#FFFFFF",
407                padding: new Thickness(5, 5, 5, 5),
408            },
409
410            flippedCoordinates: true,
411            useNativeText: true,
412            totalAngle: (Math.PI * 3) / 2,
413            startAngle: - Math.PI / 4,
414
415            drawMinorGridLines: false,
416            drawMajorGridLines: false,
417            drawMinorTickLines: false,
418            drawMajorTickLines: false,
419            labelPrecision: 0,
420        });
421        sciChartSurface.yAxes.add(angularYAxis);
422
423        // Add a background arc sector
424        const backgroundArc = new PolarArcAnnotation({
425            x2: 8,
426            x1: 10,
427            y1: 0,
428            y2: 50,
429
430            fill: DARK_BLUE,
431            strokeThickness: 2,
432        });
433        // Add the highlight arc sector - represents the current value
434        const highlightArc = new PolarArcAnnotation({
435            x2: 8,
436            x1: 10,
437            y1: 0,
438            y2: localPointerValue,
439
440            fill: appTheme.VividPink,
441            strokeThickness: 2,
442        });
443        sciChartSurface.annotations.add(backgroundArc, highlightArc);
444
445        const pointerAnnotation = new PolarPointerAnnotation({
446            x1: localPointerValue,
447            y1: 9,
448            xCoordinateMode: ECoordinateMode.DataValue,
449            yCoordinateMode: ECoordinateMode.DataValue,
450            strokeLineJoin: EStrokeLineJoin.Round,
451
452            pointerStyle: {
453                baseSize: 0,
454                strokeWidth: 0,
455            },
456
457            pointerArrowStyle: {
458                strokeWidth: 2,
459                fill: "#FFFFFF",
460                stroke: DARK_BLUE,
461                height: 0.3,
462                width: 0.05,
463            },
464        });
465
466        // Customize the pointer arrow annotation to make it look like a pill shape
467        pointerAnnotation.getPointerArrowSvg = (
468            pointerLength: number,
469            height: number,
470            width: number,
471            headDepth: number
472        ) => {
473            const size = 2 * pointerLength;
474            return `<rect 
475                x="${size - height / 2}" 
476                y="${pointerLength - width / 2}" 
477                width="${height}" 
478                height="${width}" 
479                fill="${pointerAnnotation.pointerArrowStyle.fill}"
480                stroke="${pointerAnnotation.pointerArrowStyle.stroke}"
481                stroke-width="${2}"
482                rx="${width / 2}"
483                ry="${width / 2}"
484            />`;
485        };
486
487        const centeredText = new NativeTextAnnotation({
488            text: `${localPointerValue}`,
489            x1: 0,
490            y1: 0,
491            textColor: "#FFFFFF",
492            fontSize: 38,
493            padding: new Thickness(0, 0, 20, 0),
494            xCoordinateMode: ECoordinateMode.DataValue,
495            yCoordinateMode: ECoordinateMode.DataValue,
496            verticalAnchorPoint: EVerticalAnchorPoint.Center,
497            horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
498        });
499
500        sciChartSurface.annotations.add(pointerAnnotation, centeredText);
501
502        return { sciChartSurface, wasmContext };
503    };
504
505    const gauge5 = async (rootElement: string | HTMLDivElement) => {
506        const { sciChartSurface, wasmContext } = await SciChartPolarSurface.create(rootElement, {
507            padding: new Thickness(0, 0, 0, 0),
508        });
509        const columnYValues = [50, 75, 100];
510        const GRADIENT_COLROS = [appTheme.VividGreen, appTheme.VividOrange, appTheme.VividPink];
511
512        const radialXAxis = new PolarNumericAxis(wasmContext, {
513            polarAxisMode: EPolarAxisMode.Radial,
514            axisAlignment: EAxisAlignment.Right,
515
516            // start labels in sync with angular axis
517            startAngle: (Math.PI * 3) / 2 + Math.PI / 4,
518
519            drawLabels: false,
520            drawMinorGridLines: false,
521            drawMajorGridLines: false,
522            drawMajorTickLines: false,
523            drawMinorTickLines: false,
524        });
525        sciChartSurface.xAxes.add(radialXAxis);
526
527        const angularYAxis = new PolarNumericAxis(wasmContext, {
528            polarAxisMode: EPolarAxisMode.Angular,
529            axisAlignment: EAxisAlignment.Top,
530            polarLabelMode: EPolarLabelMode.Perpendicular,
531
532            visibleRange: new NumberRange(0, 100), // 0 to 100
533            zoomExtentsToInitialRange: true,
534
535            flippedCoordinates: true,
536            useNativeText: true,
537            totalAngleDegrees: 220,
538            startAngleDegrees: -20, // (180 )
539
540            drawMinorGridLines: false,
541            drawMajorGridLines: false,
542            drawMinorTickLines: false,
543            drawMajorTickLines: false,
544            labelPrecision: 0,
545            labelStyle: {
546                color: "#FFFFFF",
547            },
548        });
549        sciChartSurface.yAxes.add(angularYAxis);
550
551        // the gray background arc
552        const backgroundArc = new PolarArcAnnotation({
553            x2: 8.1,
554            x1: 10,
555
556            y1: 0,
557            y2: 100,
558
559            fill: "#88888844",
560            strokeThickness: 0,
561        });
562        sciChartSurface.annotations.add(backgroundArc);
563
564        // Add 3 thin background arc sectors
565        let hasPointerPassedValue = false;
566        columnYValues.forEach((yVal, i) => {
567            const thinArc = new PolarArcAnnotation({
568                x2: 7.6,
569                x1: 7.9,
570
571                y1: columnYValues[i - 1] ?? 0,
572                y2: yVal, // always present and visible
573
574                fill: GRADIENT_COLROS[i],
575                strokeThickness: 0,
576            });
577            sciChartSurface.annotations.add(thinArc);
578
579            const valueArc = new PolarArcAnnotation({
580                id: `arc${i}`,
581
582                x2: 8.1,
583                x1: 10,
584                y1: columnYValues[i - 1] ?? 0,
585                y2: hasPointerPassedValue ? columnYValues[i - 1] ?? 0 : yVal > POINTER_VALUE ? POINTER_VALUE : yVal,
586                // visible until the pointer passes the threshold
587
588                fill: GRADIENT_COLROS[i],
589                strokeThickness: 0,
590            });
591            sciChartSurface.annotations.add(valueArc);
592
593            if (yVal >= POINTER_VALUE) {
594                hasPointerPassedValue = true;
595            }
596        });
597
598        const pointerAnnotation = new PolarPointerAnnotation({
599            x1: POINTER_VALUE,
600            y1: 7.6,
601            xCoordinateMode: ECoordinateMode.DataValue,
602            yCoordinateMode: ECoordinateMode.DataValue,
603
604            pointerStyle: {
605                // hide line
606                baseSize: 0,
607                strokeWidth: 0,
608            },
609
610            pointerArrowStyle: {
611                strokeWidth: 3,
612                stroke: "white",
613                fill: "none",
614                height: 0.4,
615                width: 0.25,
616            },
617
618            strokeLineJoin: EStrokeLineJoin.Miter,
619        });
620        const centeredText = new NativeTextAnnotation({
621            text: `${POINTER_VALUE}`,
622            x1: 0,
623            y1: 0,
624            textColor: "#FFFFFF",
625            fontSize: 38,
626            padding: new Thickness(0, 0, 20, 0),
627            xCoordinateMode: ECoordinateMode.DataValue,
628            yCoordinateMode: ECoordinateMode.DataValue,
629            verticalAnchorPoint: EVerticalAnchorPoint.Center,
630            horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
631        });
632        sciChartSurface.annotations.add(pointerAnnotation, centeredText);
633
634        return { sciChartSurface, wasmContext };
635    };
636
637    const gauge6 = async (rootElement: string | HTMLDivElement) => {
638        const { sciChartSurface, wasmContext } = await SciChartPolarSurface.create(rootElement, {
639            padding: new Thickness(15, 15, 15, 15), // optional padding to match the others 5 gauges with outer labels
640        });
641
642        const radialXAxis = new PolarNumericAxis(wasmContext, {
643            visibleRange: new NumberRange(0, 10),
644            labelStyle: { padding: new Thickness(0, 0, 0, 0) },
645            axisAlignment: EAxisAlignment.Right,
646            polarAxisMode: EPolarAxisMode.Radial,
647            useNativeText: true,
648            drawLabels: false,
649
650            autoTicks: false,
651            majorDelta: 10,
652            drawMajorGridLines: false,
653            drawMinorGridLines: false,
654            drawMajorTickLines: false,
655            drawMinorTickLines: false,
656            totalAngle: (Math.PI * 3) / 2,
657        });
658        sciChartSurface.xAxes.add(radialXAxis);
659
660        const angularYAxis = new PolarNumericAxis(wasmContext, {
661            polarAxisMode: EPolarAxisMode.Angular,
662            axisAlignment: EAxisAlignment.Top,
663            polarLabelMode: EPolarLabelMode.Horizontal,
664            visibleRange: new NumberRange(0, 7),
665            flippedCoordinates: true,
666            useNativeText: true,
667            totalAngle: (Math.PI * 3) / 2,
668            startAngle: Math.PI * 2 - Math.PI / 4,
669            autoTicks: false,
670            majorDelta: 1,
671            minorsPerMajor: 4,
672
673            drawMajorGridLines: false,
674            drawMinorGridLines: false,
675
676            drawMajorTickLines: true,
677            majorTickLineStyle: {
678                color: "#FFFFFF",
679                strokeThickness: 2.5,
680                tickSize: 14,
681            },
682            drawMinorTickLines: true,
683            minorTickLineStyle: {
684                color: "#FFFFFF",
685                strokeThickness: 0.5,
686                tickSize: 8,
687            },
688
689            isInnerAxis: true,
690            labelPrecision: 0,
691            labelStyle: {
692                color: "white",
693                fontSize: 25,
694                padding: Thickness.fromNumber(8),
695            },
696        });
697        sciChartSurface.yAxes.add(angularYAxis);
698
699        const pointerAnnotation = new PolarPointerAnnotation({
700            x1: 4.3,
701            y1: 10,
702            // annotationLayer: EAnnotationLayer.Background,
703            xCoordinateMode: ECoordinateMode.DataValue,
704            yCoordinateMode: ECoordinateMode.DataValue,
705
706            pointerStyle: {
707                baseSize: 0.02,
708                fill: appTheme.VividPink,
709                stroke: appTheme.VividPink,
710                backExtensionSize: 0.2,
711            },
712
713            pointerCenterStyle: {
714                size: 0.25,
715                fill: DARK_BLUE,
716                stroke: DARK_BLUE,
717            },
718            isStrokeAboveCenter: true,
719            strokeLineJoin: EStrokeLineJoin.Round,
720        });
721
722        const dangerArcSector = new PolarArcAnnotation({
723            y1: 5,
724            y2: 7,
725            x1: 10,
726            x2: 9.4,
727            fill: appTheme.VividRed,
728            strokeThickness: 0,
729            annotationLayer: EAnnotationLayer.Background,
730        });
731
732        const outlineArcLine = new PolarArcAnnotation({
733            y1: 0,
734            y2: 7,
735
736            x1: 10,
737            x2: 9.7,
738            stroke: "#FFFFFF",
739            isLineMode: true,
740            strokeThickness: 3,
741            annotationLayer: EAnnotationLayer.Background,
742        });
743
744        sciChartSurface.annotations.add(pointerAnnotation, dangerArcSector, outlineArcLine);
745
746        return { sciChartSurface, wasmContext };
747    };
748
749    return {
750        gauge1,
751        gauge2,
752        gauge3,
753        gauge4,
754        gauge5,
755        gauge6,
756    };
757};
758