1# Gauge 2 3The **\<Gauge>** component is used to display data in a ring chart. 4 5 6> **NOTE** 7> 8> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. 9 10 11## Child Components 12 13Not supported 14 15 16## APIs 17 18Gauge(options:{value: number, min?: number, max?: number}) 19 20Since API version 9, this API is supported in ArkTS widgets. 21 22**Parameters** 23 24| Name| Type| Mandatory| Description| 25| -------- | -------- | -------- | -------- | 26| value | number | Yes| Current value of the chart, that is, the position to which the pointer points in the chart. It is used as the initial value of the chart when the component is created.<br>**NOTE**<br>If the value is not within the range defined by the **min** and **max** parameters, the value of **min** is used.| 27| min | number | No| Minimum value of the current data segment.<br>Default value: **0**| 28| max | number | No| Maximum value of the current data segment.<br>Default value: **100**<br>**NOTE**<br>If the value of **max** is less than that of **min**, the default values **0** and **100** are used.<br>The values of **max** and **min** can be negative numbers.| 29 30## Attributes 31 32In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. 33 34| Name| Type| Description| 35| -------- | -------- | -------- | 36| value | number | Value of the chart. It can be dynamically changed.<br>Default value: **0**<br>Since API version 9, this API is supported in ArkTS widgets.| 37| startAngle | number | Start angle of the chart. The value **0** indicates 0 degrees, and a positive value indicates the clockwise direction.<br>Default value: **0**<br>Since API version 9, this API is supported in ArkTS widgets.| 38| endAngle | number | End angle of the chart. The value **0** indicates 0 degrees, and a positive value indicates the clockwise direction.<br>Default value: **360**<br>Since API version 9, this API is supported in ArkTS widgets.| 39| colors | Array<[ColorStop](#colorstop)> | Colors of the chart. Colors can be set for individual segments.<br>Default value: **Color.Black**<br>Since API version 9, this API is supported in ArkTS widgets.| 40| strokeWidth | Length | Stroke width of the chart.<br>Default value: **4**<br>Unit: vp<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>A value less than 0 evaluates to the default value.<br>The value cannot be in percentage.| 41 42## ColorStop 43 44Describes a gradient stop. 45 46Since API version 9, this API is supported in ArkTS widgets. 47 48| Name | Type | Description | 49| --------- | -------------------- | ------------------------------------------------------------ | 50| ColorStop | [[ResourceColor](ts-types.md#resourcecolor), number] | Type of the gradient stop. The first parameter indicates the color value. If it is set to a non-color value, the black color is used. The second parameter indicates the color weight. If it is set to a negative number or a non-numeric value, the color weight is 0.| 51 52 53## Example 54 55 56```ts 57// xxx.ets 58@Entry 59@Component 60struct GaugeExample { 61 build() { 62 Column({ space: 20 }) { 63 // Use the default value of min and max, which is 0-100, and the default values of startAngle and endAngle, which are 0 and 360, respectively. 64 // Set the current value to 75. 65 Gauge({ value: 75 }) 66 .width(200).height(200) 67 .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]]) 68 69 // Set the value parameter to 75 and the value attribute to 25. The attribute setting is used. 70 Gauge({ value: 75 }) 71 .value(25) // If both the attribute and parameter are set, the attribute setting is used. 72 .width(200).height(200) 73 .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]]) 74 75 // A ring chart of 210 to 150 degrees 76 Gauge({ value: 30, min: 0, max: 100 }) 77 .startAngle(210) 78 .endAngle(150) 79 .colors([[0x317AF7, 0.1], [0x5BA854, 0.2], [0xE08C3A, 0.3], [0x9C554B, 0.4]]) 80 .strokeWidth(20) 81 .width(200) 82 .height(200) 83 }.width('100%').margin({ top: 5 }) 84 } 85} 86``` 87 88 89
