RadialGauge

This component is used to create a radial gauge.

Demo

Find a Demo here

Installation

import {RadialGauge} from 'uxp/components';

Examples

<RadialGauge
     value={10}
     min={0}
     max={100}
 />

<RadialGauge
     value={10}
     min={0}
     max={100}
     label={() => <>Equipment Heat</>}
     legend={true}
     gradient={true}
     thickness={20}
     largeTick={5}
     smallTick={2}
     colors={[
         {color: 'cyan', stopAt: 12.5},
         {color: 'green', stopAt: 70},
         {color: 'orange', stopAt: 87.5},
         {color: 'red', stopAt: 100},
     ]}

 />

Properties

Name	Type	Description
min	number	min value of the gauge
max	number	max value of the gauge
value	number	value of the gauge
colors	Array<{ color: string, stopAt: number }>	colors array. color: name of the color. stopAt: length of color distribution. default is blue, green, yellow, red colors at equal length
label	() => JSX.Element	label no default value
legend	boolean	if true show legend. default is false
tickColor	string	color of the ticks. default is white
className	string	class name(s) for additional styling
styles	React.CSSProperties	additional inline styles
gradient	boolean	if true show gradient colors default is false
thickness	number	thickness of the gauge This value is defend on the radius default is radius * 0.11 max value is radius * 0.25 if you pass a higher value than the max value, max value will be used
largeTick	number	thickness of the large ticks default is 4 min value is 1 max value is 6 if the given value is higher than the max value, max values will be used
smallTick	number	thickness of the small ticks default is 1 min values is 1 max values is 3 if the given values is higher than the max value, max values will be used
backgroundColor	string	backbround color of the gauge default is white
labelColor	string	color of the labels default is #424242
needleColor	string	color of the needle default is gray

min

---

min value of the gauge

type
number

max

---

max value of the gauge

type
number

value

---

value of the gauge

type
number

colors

---

colors array. color: name of the color. stopAt: length of color distribution.

default is blue, green, yellow, red colors at equal length

type
Array<{ color: string, stopAt: number }>

label

---

label no default value

type
() => JSX.Element

legend

---

if true show legend. default is false

type
boolean

tickColor

---

color of the ticks. default is white

type
string

className

---

class name(s) for additional styling

type
string

styles

---

additional inline styles

type
React.CSSProperties

gradient

---

if true show gradient colors default is false

type
boolean

thickness

---

thickness of the gauge This value is defend on the radius default is radius * 0.11 max value is radius * 0.25

if you pass a higher value than the max value, max value will be used

type
number

largeTick

---

thickness of the large ticks default is 4 min value is 1 max value is 6

if the given value is higher than the max value, max values will be used

type
number

smallTick

---

thickness of the small ticks default is 1 min values is 1 max values is 3

if the given values is higher than the max value, max values will be used

type
number

backgroundColor

---

backbround color of the gauge default is white

type
string

labelColor

---

color of the labels default is #424242

type
string

needleColor

---

color of the needle default is gray

type
string