React Linear Gauges Example
Demonstrates various React Linear Gauges using SciChart.js, combining rectangles and annotations to show simple values in compelling ways.
drawExample.ts
index.tsx
theme.ts
Copy to clipboard
Minimise
Fullscreen
1import {
2 NumberRange,
3 TextAnnotation,
4 EVerticalAnchorPoint,
5 EHorizontalAnchorPoint,
6 GradientParams,
7 Point,
8 XyxyDataSeries,
9 EColumnMode,
10 EColumnYMode,
11 SciChartSurface,
12 NumericAxis,
13 FastRectangleRenderableSeries,
14 parseColorToUIntArgb,
15 IFillPaletteProvider,
16 EFillPaletteMode,
17 IRenderableSeries,
18 LineArrowAnnotation,
19 EArrowHeadPosition,
20 DataLabelProvider,
21 EAxisAlignment,
22 Thickness,
23 XyyDataSeries,
24 EDataPointWidthMode,
25 DefaultPaletteProvider,
26} from "scichart";
27import { appTheme } from "../../../theme";
28
29export const getChartsInitializationAPI = () => {
30 const gauge1 = async (rootElement: string | HTMLDivElement) => {
31 const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
32 theme: appTheme.SciChartJsTheme,
33 });
34
35 const growByX = new NumberRange(2, 2);
36 const growByY = new NumberRange(0.05, 0.05);
37
38 // Create XAxis / YAxis
39 const xAxis = new NumericAxis(wasmContext, {
40 // axisTitle: "X Axis",
41 isVisible: false,
42 growBy: growByX,
43 });
44
45 const yAxis = new NumericAxis(wasmContext, {
46 // axisTitle: "Y Axis",
47 isVisible: false,
48 growBy: growByY,
49 });
50 sciChartSurface.xAxes.add(xAxis);
51 sciChartSurface.yAxes.add(yAxis);
52
53 const columnYValues = [50, 70, 80, 90, 100];
54
55 const GRADIENT_COLORS = [
56 appTheme.VividPink,
57 appTheme.VividOrange,
58 appTheme.VividTeal,
59 appTheme.Indigo,
60 appTheme.DarkIndigo,
61 ];
62
63 const rectangleData = columnYValues.map((d, i) => {
64 const width = 10;
65 if (i === 0) {
66 return [0, 0, width, d];
67 }
68 return [0, columnYValues[i - 1], width, d];
69 });
70
71 const xValues = rectangleData.map((d) => d[0]);
72 const yValues = rectangleData.map((d) => d[1]);
73 const x1Values = rectangleData.map((d) => d[2]);
74 const y1Values = rectangleData.map((d) => d[3]);
75
76 class RectangleFillPaletteProvider implements IFillPaletteProvider {
77 public readonly fillPaletteMode: EFillPaletteMode = EFillPaletteMode.SOLID;
78
79 private readonly colors: number[];
80
81 constructor(colorStrings: string[]) {
82 // Convert hex color strings to ARGB numbers
83 this.colors = colorStrings.map((color) => parseColorToUIntArgb(color));
84 }
85
86 public onAttached(parentSeries: IRenderableSeries): void {
87 // Called when the palette provider is attached to a series
88 // You can store reference to the parent series if needed
89 }
90
91 public onDetached(): void {
92 // Called when the palette provider is detached
93 // Clean up any resources if needed
94 }
95
96 public overrideFillArgb(
97 xValue: number,
98 yValue: number,
99 index: number,
100 opacity?: number,
101 metadata?: any
102 ): number | undefined {
103 // Return different color based on index
104 return this.colors[index % this.colors.length];
105 }
106 }
107
108 const rectangleSeries = new FastRectangleRenderableSeries(wasmContext, {
109 dataSeries: new XyxyDataSeries(wasmContext, {
110 xValues,
111 yValues,
112 x1Values,
113 y1Values,
114 }),
115 columnXMode: EColumnMode.StartEnd,
116 columnYMode: EColumnYMode.TopBottom,
117 stroke: appTheme.ForegroundColor,
118 strokeThickness: 0.5,
119 paletteProvider: new RectangleFillPaletteProvider(GRADIENT_COLORS),
120 });
121 sciChartSurface.renderableSeries.add(rectangleSeries);
122
123 [0, ...columnYValues].forEach((yVal, i) => {
124 const label = new TextAnnotation({
125 x2: 8,
126 x1: -1,
127
128 y1: yVal,
129 y2: yVal,
130 text: yVal.toString(),
131 fontSize: 12,
132 textColor: appTheme.ForegroundColor,
133 horizontalAnchorPoint: EHorizontalAnchorPoint.Right,
134 verticalAnchorPoint: EVerticalAnchorPoint.Center,
135 });
136 sciChartSurface.annotations.add(label);
137 });
138
139 const markerPosition = (value: number) => {
140 const arrowLine = new LineArrowAnnotation({
141 x1: 10,
142 y1: value,
143 x2: 11,
144 y2: value,
145 isArrowHeadScalable: true, // the arrow head will scale with the visibleRange
146 arrowStyle: {
147 headLength: 10,
148 headWidth: 7,
149 headDepth: 1,
150 fill: appTheme.ForegroundColor,
151 strokeThickness: 1,
152 },
153 stroke: appTheme.ForegroundColor,
154 strokeThickness: 2,
155 arrowHeadPosition: EArrowHeadPosition.Start, // only show arrow head at the end
156 });
157
158 const arrowLabel = new TextAnnotation({
159 x1: 13,
160 y1: value,
161 x2: 8,
162 y2: 0,
163 text: `${value}`,
164 fontSize: 12,
165 textColor: appTheme.ForegroundColor,
166 horizontalAnchorPoint: EHorizontalAnchorPoint.Left,
167 verticalAnchorPoint: EVerticalAnchorPoint.Center,
168 });
169 sciChartSurface.annotations.add(arrowLine, arrowLabel);
170 };
171
172 // set position of marker
173 markerPosition(60);
174
175 return { sciChartSurface, wasmContext };
176 };
177
178 const gauge2 = async (rootElement: string | HTMLDivElement) => {
179 const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
180 theme: appTheme.SciChartJsTheme,
181 padding: new Thickness(5, 50, 5, 70),
182 });
183
184 // Create XAxis / YAxis
185 const xAxis = new NumericAxis(wasmContext, {
186 isVisible: false,
187 growBy: new NumberRange(0, 1),
188 });
189
190 const yAxis = new NumericAxis(wasmContext, {
191 axisAlignment: EAxisAlignment.Left,
192 growBy: new NumberRange(0.05, 0.05),
193 drawMajorBands: false,
194 drawMajorGridLines: false,
195 drawMinorGridLines: false,
196 drawMinorTickLines: false,
197 majorGridLineStyle: { color: appTheme.ForegroundColor },
198 majorTickLineStyle: { color: appTheme.ForegroundColor },
199 overrideOffset: 0,
200 });
201 sciChartSurface.xAxes.add(xAxis);
202 sciChartSurface.yAxes.add(yAxis);
203
204 const rectangleSeries = new FastRectangleRenderableSeries(wasmContext, {
205 dataSeries: new XyxyDataSeries(wasmContext, {
206 xValues: [0],
207 yValues: [0],
208 x1Values: [10],
209 y1Values: [100],
210 }),
211 columnXMode: EColumnMode.StartEnd,
212 columnYMode: EColumnYMode.TopBottom,
213 stroke: appTheme.ForegroundColor,
214 strokeThickness: 1,
215
216 fillLinearGradient: new GradientParams(new Point(0, 0), new Point(0, 1), [
217 { offset: 0, color: appTheme.VividPink },
218 { offset: 0.5, color: appTheme.VividOrange },
219 { offset: 0.7, color: appTheme.VividTeal },
220 { offset: 0.8, color: appTheme.Indigo },
221 { offset: 1, color: appTheme.DarkIndigo },
222 ]),
223 });
224
225 sciChartSurface.renderableSeries.add(rectangleSeries);
226
227 const markerPosition = (value: number) => {
228 const arrowLine = new LineArrowAnnotation({
229 x1: 10,
230 y1: value,
231 x2: 11,
232 y2: value,
233 isArrowHeadScalable: true, // the arrow head will scale with the visibleRange
234 arrowStyle: {
235 headLength: 10,
236 headWidth: 7,
237 headDepth: 1,
238 fill: appTheme.ForegroundColor,
239 strokeThickness: 1,
240 },
241 stroke: appTheme.ForegroundColor,
242 strokeThickness: 2,
243 arrowHeadPosition: EArrowHeadPosition.Start, // only show arrow head at the end
244 });
245
246 const arrowLabel = new TextAnnotation({
247 x1: 13,
248 y1: value,
249 x2: 8,
250 y2: 0,
251 text: `${value}`,
252 fontSize: 12,
253 textColor: appTheme.ForegroundColor,
254 horizontalAnchorPoint: EHorizontalAnchorPoint.Left,
255 verticalAnchorPoint: EVerticalAnchorPoint.Center,
256 });
257 sciChartSurface.annotations.add(arrowLine, arrowLabel);
258 };
259
260 markerPosition(60);
261
262 return { sciChartSurface, wasmContext };
263 };
264
265 const gauge3 = async (rootElement: string | HTMLDivElement) => {
266 const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
267 theme: appTheme.SciChartJsTheme,
268 });
269
270 const growByY = new NumberRange(3, 3);
271 const growByX = new NumberRange(0.05, 0.05);
272
273 // Create XAxis / YAxis
274 const xAxis = new NumericAxis(wasmContext, {
275 // axisTitle: "X Axis",
276 isVisible: false,
277 growBy: growByX,
278 });
279
280 const yAxis = new NumericAxis(wasmContext, {
281 // axisTitle: "Y Axis",
282 isVisible: false,
283 growBy: growByY,
284 });
285 sciChartSurface.xAxes.add(xAxis);
286 sciChartSurface.yAxes.add(yAxis);
287
288 // const columnYValues = [50, 70, 80, 90, 100];
289 const columnYValues = [33, 66, 100];
290
291 const GRADIENT_COLORS = [appTheme.VividGreen, appTheme.VividOrange, appTheme.VividRed];
292
293 const rectangleData = columnYValues.map((d, i) => {
294 const height = 10;
295 if (i === 0) {
296 return [0, 0, d, height];
297 }
298 return [columnYValues[i - 1], 0, d, height];
299 });
300
301 const xValues = rectangleData.map((d) => d[0]);
302 const yValues = rectangleData.map((d) => d[1]);
303 const x1Values = rectangleData.map((d) => d[2]);
304 const y1Values = rectangleData.map((d) => d[3]);
305
306 class RectangleFillPaletteProvider implements IFillPaletteProvider {
307 public readonly fillPaletteMode: EFillPaletteMode = EFillPaletteMode.SOLID;
308
309 private readonly colors: number[];
310
311 constructor(colorStrings: string[]) {
312 // Convert hex color strings to ARGB numbers
313 this.colors = colorStrings.map((color) => parseColorToUIntArgb(color));
314 }
315
316 public onAttached(parentSeries: IRenderableSeries): void {
317 // Called when the palette provider is attached to a series
318 // You can store reference to the parent series if needed
319 }
320
321 public onDetached(): void {
322 // Called when the palette provider is detached
323 // Clean up any resources if needed
324 }
325
326 public overrideFillArgb(
327 xValue: number,
328 yValue: number,
329 index: number,
330 opacity?: number,
331 metadata?: any
332 ): number | undefined {
333 // Return different color based on index
334 return this.colors[index % this.colors.length];
335 }
336 }
337
338 const rectangleSeries = new FastRectangleRenderableSeries(wasmContext, {
339 dataSeries: new XyxyDataSeries(wasmContext, {
340 xValues,
341 yValues,
342 x1Values,
343 y1Values,
344 }),
345 columnXMode: EColumnMode.StartEnd,
346 columnYMode: EColumnYMode.TopBottom,
347 stroke: appTheme.ForegroundColor,
348 strokeThickness: 0.1,
349 paletteProvider: new RectangleFillPaletteProvider(GRADIENT_COLORS),
350 dataLabels: {
351 style: { fontFamily: "Arial", fontSize: 12 },
352 color: appTheme.ForegroundColor,
353 },
354 });
355
356 const labels: string[] = ["Low", "Moderate", "High"];
357
358 (rectangleSeries.dataLabelProvider as DataLabelProvider).getText = (state) => {
359 // Return custom text for each rectangle
360 return labels[state.index];
361 };
362
363 sciChartSurface.renderableSeries.add(rectangleSeries);
364
365 [0, ...columnYValues].forEach((yVal, i) => {
366 const label = new TextAnnotation({
367 x1: yVal,
368 x2: yVal,
369 y1: -1,
370 y2: -1,
371 text: yVal.toString(),
372 fontSize: 12,
373 textColor: appTheme.ForegroundColor,
374 horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
375 verticalAnchorPoint: EVerticalAnchorPoint.Top,
376 });
377 sciChartSurface.annotations.add(label);
378 });
379
380 const markerPosition = (value: number) => {
381 const arrowLine = new LineArrowAnnotation({
382 y1: 10,
383 x1: value,
384 y2: 11,
385 x2: value,
386 isArrowHeadScalable: true, // the arrow head will scale with the visibleRange
387 arrowStyle: {
388 headLength: 10,
389 headWidth: 7,
390 headDepth: 1,
391 fill: appTheme.ForegroundColor,
392 strokeThickness: 1,
393 },
394 stroke: appTheme.ForegroundColor,
395 strokeThickness: 2,
396 arrowHeadPosition: EArrowHeadPosition.Start, // only show arrow head at the end
397 });
398
399 const arrowLabel = new TextAnnotation({
400 y1: 13,
401 x1: value,
402 y2: 8,
403 x2: 0,
404 text: `${value}`,
405 fontSize: 12,
406 textColor: appTheme.ForegroundColor,
407 horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
408 verticalAnchorPoint: EVerticalAnchorPoint.Bottom,
409 });
410 sciChartSurface.annotations.add(arrowLine, arrowLabel);
411 };
412
413 markerPosition(90);
414
415 return { sciChartSurface, wasmContext };
416 };
417
418 const gauge4 = async (rootElement: string | HTMLDivElement) => {
419 const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
420 theme: appTheme.SciChartJsTheme,
421 });
422
423 const growByX = new NumberRange(1.5, 1.5);
424 const growByY = new NumberRange(0.05, 0.05);
425
426 // Create XAxis / YAxis
427 const xAxis = new NumericAxis(wasmContext, {
428 // axisTitle: "X Axis",
429 isVisible: false,
430 growBy: growByX,
431 });
432
433 const yAxis = new NumericAxis(wasmContext, {
434 // axisTitle: "Y Axis",
435 isVisible: false,
436 growBy: growByY,
437 });
438 sciChartSurface.xAxes.add(xAxis);
439 sciChartSurface.yAxes.add(yAxis);
440
441 const value = 500;
442
443 const columnYValues = [350, 600, 700, 800, 850];
444
445 const GRADIENT_COLORS = [
446 appTheme.VividPink,
447 appTheme.VividOrange,
448 appTheme.VividGreen,
449 appTheme.Indigo,
450 appTheme.DarkIndigo,
451 ];
452
453 const rectangleData = columnYValues.map((d, i) => {
454 const width = 2;
455 if (i === 0) {
456 return [0, 0, width, d];
457 }
458 return [0, columnYValues[i - 1], width, d];
459 });
460
461 const xValues = rectangleData.map((d) => d[0]);
462 const yValues = rectangleData.map((d) => d[1]);
463 const x1Values = rectangleData.map((d) => d[2]);
464 const y1Values = rectangleData.map((d) => d[3]);
465
466 class RectangleFillPaletteProvider implements IFillPaletteProvider {
467 public readonly fillPaletteMode: EFillPaletteMode = EFillPaletteMode.SOLID;
468
469 private readonly colors: number[];
470
471 constructor(colorStrings: string[]) {
472 // Convert hex color strings to ARGB numbers
473 this.colors = colorStrings.map((color) => parseColorToUIntArgb(color));
474 }
475
476 public onAttached(parentSeries: IRenderableSeries): void {
477 // Called when the palette provider is attached to a series
478 // You can store reference to the parent series if needed
479 }
480
481 public onDetached(): void {
482 // Called when the palette provider is detached
483 // Clean up any resources if needed
484 }
485
486 public overrideFillArgb(
487 xValue: number,
488 yValue: number,
489 index: number,
490 opacity?: number,
491 metadata?: any
492 ): number | undefined {
493 // Return different color based on index
494 return this.colors[index % this.colors.length];
495 }
496 }
497
498 const rectangleSeries = new FastRectangleRenderableSeries(wasmContext, {
499 dataSeries: new XyxyDataSeries(wasmContext, {
500 xValues,
501 yValues,
502 x1Values,
503 y1Values,
504 }),
505 columnXMode: EColumnMode.StartEnd,
506 columnYMode: EColumnYMode.TopBottom,
507 stroke: appTheme.ForegroundColor,
508 // opacity: 0,
509 strokeThickness: 0.5,
510 paletteProvider: new RectangleFillPaletteProvider(GRADIENT_COLORS),
511 });
512 sciChartSurface.renderableSeries.add(rectangleSeries);
513
514 [0, ...columnYValues].forEach((yVal, i) => {
515 const label = new TextAnnotation({
516 x2: 8,
517 x1: -1,
518 y1: yVal,
519 y2: yVal,
520 text: yVal.toString(),
521 fontSize: 12,
522 textColor: appTheme.ForegroundColor,
523 horizontalAnchorPoint: EHorizontalAnchorPoint.Right,
524 verticalAnchorPoint: EVerticalAnchorPoint.Center,
525 });
526 sciChartSurface.annotations.add(label);
527 });
528
529 const rectangleSeriesOutline = new FastRectangleRenderableSeries(wasmContext, {
530 dataSeries: new XyxyDataSeries(wasmContext, {
531 xValues: [3],
532 yValues: [0],
533 x1Values: [13],
534 y1Values: [850],
535 }),
536 columnXMode: EColumnMode.StartEnd,
537 columnYMode: EColumnYMode.TopBottom,
538 stroke: appTheme.ForegroundColor,
539 strokeThickness: 0.5,
540 fill: appTheme.ForegroundColor + "00",
541 });
542
543 const setColor = (valu: number) => {
544 return value < 350
545 ? GRADIENT_COLORS[0]
546 : value < 600
547 ? GRADIENT_COLORS[1]
548 : value < 700
549 ? GRADIENT_COLORS[2]
550 : value < 800
551 ? GRADIENT_COLORS[3]
552 : GRADIENT_COLORS[4];
553 };
554
555 const rectangleValue = new FastRectangleRenderableSeries(wasmContext, {
556 dataSeries: new XyxyDataSeries(wasmContext, {
557 xValues: [3],
558 yValues: [0],
559 x1Values: [13],
560 y1Values: [value],
561 }),
562 columnXMode: EColumnMode.StartEnd,
563 columnYMode: EColumnYMode.TopBottom,
564 stroke: appTheme.ForegroundColor,
565 opacity: 1,
566 fill: setColor(value),
567 strokeThickness: 0,
568 });
569 sciChartSurface.renderableSeries.add(rectangleValue, rectangleSeriesOutline);
570
571 const label = new TextAnnotation({
572 x1: 13.5,
573 y1: value,
574 x2: value,
575 y2: 0,
576 text: value.toString(),
577 fontSize: 12,
578 textColor: appTheme.ForegroundColor,
579 horizontalAnchorPoint: EHorizontalAnchorPoint.Left,
580 verticalAnchorPoint: EVerticalAnchorPoint.Center,
581 });
582 sciChartSurface.annotations.add(label);
583
584 return { sciChartSurface, wasmContext };
585 };
586
587 const gauge5 = async (rootElement: string | HTMLDivElement) => {
588 const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
589 theme: appTheme.SciChartJsTheme,
590 });
591
592 const growByY = new NumberRange(3, 3);
593 const growByX = new NumberRange(0.05, 0.05);
594
595 const xAxis = new NumericAxis(wasmContext, {
596 isVisible: false,
597 growBy: growByX,
598 });
599
600 const yAxis = new NumericAxis(wasmContext, {
601 isVisible: false,
602 growBy: growByY,
603 });
604 sciChartSurface.xAxes.add(xAxis);
605 sciChartSurface.yAxes.add(yAxis);
606
607 const value = 23;
608
609 const columnXValues = [5, 10, 15, 20, 25, 30];
610
611 const GRADIENT_COLORS = [appTheme.VividGreen, appTheme.VividOrange, appTheme.VividRed];
612
613 const rectangleData = columnXValues.map((d, i) => {
614 const height = 10;
615 if (i === 0) {
616 return [0, 0, d, height];
617 }
618 return [columnXValues[i - 1], 0, d, height];
619 });
620
621 const xValues = rectangleData.map((d) => d[0]);
622 const yValues = rectangleData.map((d) => d[1]);
623 const x1Values = rectangleData.map((d) => d[2]);
624 const y1Values = rectangleData.map((d) => d[3]);
625
626 class RectangleFillPaletteProvider implements IFillPaletteProvider {
627 public readonly fillPaletteMode: EFillPaletteMode = EFillPaletteMode.SOLID;
628
629 private readonly colors: number[];
630
631 constructor(colorStrings: string[]) {
632 // Convert hex color strings to ARGB numbers
633 this.colors = colorStrings.map((color) => parseColorToUIntArgb(color));
634 }
635
636 public onAttached(parentSeries: IRenderableSeries): void {
637 // Called when the palette provider is attached to a series
638 // You can store reference to the parent series if needed
639 }
640
641 public onDetached(): void {
642 // Called when the palette provider is detached
643 // Clean up any resources if needed
644 }
645
646 public overrideFillArgb(
647 xValue: number,
648 yValue: number,
649 index: number,
650 opacity?: number,
651 metadata?: any
652 ): number | undefined {
653 // Return different color based on index
654 return columnXValues[index] <= 20
655 ? parseColorToUIntArgb(appTheme.VividGreen)
656 : parseColorToUIntArgb(appTheme.VividRed);
657 }
658 }
659
660 const rectangleSeries = new FastRectangleRenderableSeries(wasmContext, {
661 dataSeries: new XyxyDataSeries(wasmContext, {
662 xValues,
663 yValues,
664 x1Values,
665 y1Values,
666 }),
667 columnXMode: EColumnMode.StartEnd,
668 columnYMode: EColumnYMode.TopBottom,
669 stroke: appTheme.DarkIndigo,
670 strokeThickness: 0.1,
671 paletteProvider: new RectangleFillPaletteProvider(GRADIENT_COLORS),
672 });
673
674 const valueLine = new FastRectangleRenderableSeries(wasmContext, {
675 dataSeries: new XyxyDataSeries(wasmContext, {
676 xValues: [0],
677 yValues: [11],
678 x1Values: [value],
679 y1Values: [12],
680 }),
681 columnXMode: EColumnMode.StartEnd,
682 columnYMode: EColumnYMode.TopBottom,
683 stroke: appTheme.DarkIndigo,
684 strokeThickness: 0.1,
685 fill: appTheme.MutedSkyBlue,
686 });
687 sciChartSurface.renderableSeries.add(rectangleSeries, valueLine);
688
689 [0, ...columnXValues].forEach((yVal, i) => {
690 const label = new TextAnnotation({
691 x1: yVal,
692 x2: yVal,
693 y1: -1,
694 y2: -1,
695 text: yVal.toString(),
696 fontSize: 12,
697 textColor: appTheme.ForegroundColor,
698 horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
699 verticalAnchorPoint: EVerticalAnchorPoint.Top,
700 });
701 sciChartSurface.annotations.add(label);
702 });
703
704 const arrowLabel = new TextAnnotation({
705 y1: 13,
706 x1: 60,
707 y2: 8,
708 x2: 0,
709 text: "60",
710 fontSize: 12,
711 textColor: appTheme.ForegroundColor,
712 horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
713 verticalAnchorPoint: EVerticalAnchorPoint.Bottom,
714 });
715 sciChartSurface.annotations.add(arrowLabel);
716
717 return { sciChartSurface, wasmContext };
718 };
719
720 const gauge6 = async (rootElement: string | HTMLDivElement) => {
721 const GRADIENT_COLOROS = [
722 "#1C5727",
723 "#277B09",
724 "#2C8A26",
725 "#3CAC45",
726 "#58FF80",
727 "#59FD03",
728 "#7FFC09",
729 "#98FA96",
730 "#AEFE2E",
731 "#FEFCD2",
732 "#FBFF09",
733 "#FBD802",
734 "#F9A700",
735 "#F88B01",
736 "#F54602",
737 "#F54702",
738 "#F50E02",
739 "#DA153D",
740 "#B22122",
741 "#B22122",
742 ];
743
744 const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
745 theme: appTheme.SciChartJsTheme,
746 padding: new Thickness(5, 5, 5, 20),
747 });
748
749 const growByY = new NumberRange(0.05, 0.05);
750
751 // Create XAxis / YAxis
752 const xAxis = new NumericAxis(wasmContext, {
753 isVisible: false,
754 visibleRange: new NumberRange(-20, 30),
755 });
756
757 const yAxis = new NumericAxis(wasmContext, {
758 isVisible: true,
759 growBy: growByY,
760 drawMajorGridLines: false,
761 drawMinorGridLines: false,
762 drawMajorBands: false,
763 });
764 sciChartSurface.xAxes.add(xAxis);
765 sciChartSurface.yAxes.add(yAxis);
766
767 class RectangleFillPaletteProvider extends DefaultPaletteProvider {
768 public readonly fillPaletteMode: EFillPaletteMode = EFillPaletteMode.SOLID;
769
770 private readonly colors: number[];
771
772 constructor(colorStrings: string[]) {
773 super();
774 // Convert hex color strings to ARGB numbers
775 this.colors = colorStrings.map((color) => parseColorToUIntArgb(color));
776 }
777
778 public overrideFillArgb(
779 xValue: number,
780 yValue: number,
781 index: number,
782 opacity?: number,
783 metadata?: any
784 ): number | undefined {
785 let color = this.colors[index - 1];
786
787 // Return different color based on index
788 return color;
789 }
790 }
791
792 const updateGaugeData = (dataSeries: XyyDataSeries, value: number, position: number) => {
793 dataSeries.clear();
794 const columnYValues = [-10, -9, -8, -7, -6, -5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].filter(
795 (y) => y <= value
796 );
797 const xValues = columnYValues.map((d) => position);
798 const yValues = columnYValues.map((d, i) => (i === 0 ? columnYValues[0] : columnYValues[i - 1]));
799 dataSeries.appendRange(xValues, yValues, columnYValues);
800 };
801
802 const createGauge = (value: number, width: number, position: number) => {
803 const dataSeries = new XyyDataSeries(wasmContext);
804 updateGaugeData(dataSeries, value, position);
805
806 const backgroundRectangle = new FastRectangleRenderableSeries(wasmContext, {
807 dataSeries: new XyyDataSeries(wasmContext, {
808 xValues: [-2 + position * width * 2],
809 yValues: [-10.5],
810 y1Values: [10.5],
811 }),
812 columnXMode: EColumnMode.Start,
813 columnYMode: EColumnYMode.TopBottom,
814 dataPointWidth: width + 4,
815 dataPointWidthMode: EDataPointWidthMode.Range,
816 fill: appTheme.DarkIndigo,
817 strokeThickness: 2,
818 stroke: "gray",
819 });
820
821 const rectangleSeries = new FastRectangleRenderableSeries(wasmContext, {
822 dataSeries,
823 columnXMode: EColumnMode.Start,
824 columnYMode: EColumnYMode.TopBottom,
825 dataPointWidth: width,
826 dataPointWidthMode: EDataPointWidthMode.Range,
827 stroke: appTheme.DarkIndigo, // Thick stroke same color as background gives gaps between rectangles
828 strokeThickness: 4,
829 paletteProvider: new RectangleFillPaletteProvider(GRADIENT_COLOROS),
830 fill: appTheme.ForegroundColor + "00",
831 });
832
833 sciChartSurface.renderableSeries.add(backgroundRectangle, rectangleSeries);
834 return dataSeries;
835 };
836
837 const gaugeValues = [0, 3, 4, 7, -2, -8, 4];
838 let i = 0;
839 const dataSeries = createGauge(gaugeValues[i], 10, 0);
840
841 setInterval(() => {
842 i += 1;
843 if (i === gaugeValues.length) {
844 i = 0;
845 }
846 const value = gaugeValues[i];
847 updateGaugeData(dataSeries, value, 0);
848 }, 1000);
849
850 return { sciChartSurface, wasmContext };
851 };
852
853 return {
854 gauge1,
855 gauge2,
856 gauge3,
857 gauge4,
858 gauge5,
859 gauge6,
860 };
861};
862Linear Gauges - React
Overview
This React example showcases dashboard-style linear gauges using the SciChartReact component. It demonstrates React integration patterns for gauge components with animated indicators and custom scales.
Technical Implementation
The implementation uses FastRectangleRenderableSeries for gauge bodies and LineArrowAnnotation for value pointers. React hooks manage gauge state, while TextAnnotation handles custom labels. For advanced implementations, consider creating a custom TickProvider component.
Features and Capabilities
The example includes responsive gauges with both vertical and horizontal layouts. It demonstrates React state management for gauge values and uses useEffect for clean animation handling. The ECoordinateMode API ensures precise label positioning.
Integration and Best Practices
Follow the SciChart React Tutorial for proper component integration. For production apps, consider memoizing gauge configurations and implementing custom tick providers for non-linear scales.
react Chart Examples & Demos
See Also: Charts added in v4 (16 Demos)
React Histogram Chart
Create a React Histogram Chart with custom texture fills and patterns. Try the SciChartReact wrapper component for seamless React integration today.
React Gantt Chart Example
Build a React Gantt Chart with SciChart. View the demo for horizontal bars, rounded corners and data labels to show project timelines and task completion.
React Choropleth Map Example
Create a React Choropleth map, a type of thematic map where areas are shaded or patterned in proportion to the value of a variable being represented.
React Multi-Layer Map Example
Create a React Multi-Layer Map Example, using FastTriangleRenderableSeries with GeoJSON data-points using a constrained delaunay triangulation algorithm.
React Animated Bar Chart Example
Bring annual comparison data to life with the React Animated Bar Chart example from SciChart. This demo showcases top 10 tennis players from 1990 to 2024.
React Vector Field Plot
View the React Vector Field Plot example from SciChart, including dynamic vector generation, gradient-colored segments, and interactive zoom/pan. Try demo.
React Waterfall Chart | Bridge Chart
Build a React Waterfall Chart with dynamic coloring, multi-line data labels and responsive design, using the SciChartReact component for seamless integration.
React Box Plot Chart
Try the React Box Plot Chart example for React-friendly chart lifecycle management, dynamic sub-surface positioning, and custom styling. Try the demo now.
React Triangle Series | Triangle Mesh Chart
Create React Triangle Meshes with the Triangle Series from SciChart. This demo supports strip mode, list mode and the drawing of polygons. View the example.
React Treemap Chart
Create a React Treemap Chart to define rectangle positions based on total value. Use SciChart FastRectangleRenderableSeries and d3-hierarchy.js layouts.
NEW!
React Map Chart with Heatmap overlay
Design a highly dynamic React Map Chart with Heatmap overlay with SciChart's feature-rich JavaScript Chart Library. Get your free demo today.
Realtime Audio Analyzer Bars Demo
Demonstrating the capability of SciChart.js to create a JavaScript Audio Analyzer Bars and visualize the Fourier-Transform of an audio waveform in realtime.
NEW!
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.
React Responsive HTML Annotations Example
Build Responsive React HTML Annotations with SciChart. Use the advanced CSS container queries for responsive text layout and custom design. View demo now.
HTML Annotations and Custom in-chart Controls Example
React HTML Chart Control example demonstrates advanced HTML annotation integration and how to render HTML components within charts. Try the SciChart demo.
React Polar Modifiers | Polar Interactivity Modifiers Demo
Explore SciChart's Polar Interactivity Modifiers including zooming, panning, and cursor tracking. Try the demo to trial the Polar Chart Behavior Modifiers.
Quick Links
Useful Links
SciChart Ltd, 16 Beaufort Court, Admirals Way, Docklands, London, E14 9XL.