1# Gauge
2
3The **Gauge** component represents a gauge that displays data in a circular format.
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
13This component can contain only one child component.
14
15> **NOTE**
16>
17> You are advised to use the **Text** component to build the current value and auxiliary text.
18>
19> If the width and height of the child component are in percentage, the reference range is the rectangle that has the outer ring as its inscribed circle.
20
21
22## APIs
23
24Gauge(options:{value: number, min?: number, max?: number})
25
26Creates a gauge.
27
28**Widget capability**: This API can be used in ArkTS widgets since API version 9.
29
30**Atomic service API**: This API can be used in atomic services since API version 11.
31
32**System capability**: SystemCapability.ArkUI.ArkUI.Full
33
34**Parameters**
35
36| Name| Type| Mandatory| Description|
37| -------- | -------- | -------- | -------- |
38| value | number | Yes| Current value of the gauge, that is, the position to which the indicator points in the gauge. It is used as the initial value of the gauge when it 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.|
39| min | number | No| Minimum value of the current data segment.<br>Default value: **0**|
40| 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.|
41
42## Attributes
43
44In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
45
46### value
47
48value(value: number)
49
50Sets the value of the gauge.
51
52**Widget capability**: This API can be used in ArkTS widgets since API version 9.
53
54**Atomic service API**: This API can be used in atomic services since API version 11.
55
56**System capability**: SystemCapability.ArkUI.ArkUI.Full
57
58**Parameters**
59
60| Name| Type  | Mandatory| Description                                                        |
61| ------ | ------ | ---- | ------------------------------------------------------------ |
62| value  | number | Yes  | Value of the gauge. It can be dynamically changed.<br>Default value: **0**|
63
64### startAngle
65
66startAngle(angle: number)
67
68Sets the start angle of the gauge.
69
70**Widget capability**: This API can be used in ArkTS widgets since API version 9.
71
72**Atomic service API**: This API can be used in atomic services since API version 11.
73
74**System capability**: SystemCapability.ArkUI.ArkUI.Full
75
76**Parameters**
77
78| Name| Type  | Mandatory| Description                                                        |
79| ------ | ------ | ---- | ------------------------------------------------------------ |
80| angle  | number | Yes  | Start angle of the gauge. The value **0** indicates 0 degrees, and a positive value indicates the clockwise direction.<br>Default value: **0**|
81
82### endAngle
83
84endAngle(angle: number)
85
86Sets the end angle of the gauge. Ensure an appropriate difference between the start angle and end angle. If this difference is too small, the drawn chart may be abnormal. You are advised to use a monochrome ring to set the **value** attribute of the **Gauge**. You can also use **setTimeout** to delay value loading.
87
88**Widget capability**: This API can be used in ArkTS widgets since API version 9.
89
90**Atomic service API**: This API can be used in atomic services since API version 11.
91
92**System capability**: SystemCapability.ArkUI.ArkUI.Full
93
94**Parameters**
95
96| Name| Type  | Mandatory| Description                                                        |
97| ------ | ------ | ---- | ------------------------------------------------------------ |
98| angle  | number | Yes  | End angle of the gauge. The value **0** indicates 0 degrees, and a positive value indicates the clockwise direction.<br>Default value: **360**|
99
100### colors
101
102colors(colors: ResourceColor | LinearGradient | Array<[ResourceColor | LinearGradient, number]>)
103
104Sets the colors of the gauge.
105
106Since API version 11, this API follows the following rules:
107
108If the data type is ResourceColor, the ring is of the monochrome type.
109
110If the data type is LinearGradient, the ring is of the gradient type.
111
112If the data type is Array, the ring is of the gradient type. The first parameter indicates the color value. If it is set to a non-color value, the color of 0xFFE84026 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.
113
114A ring of the gradient type contains a maximum of nine color segments. If there are more than nine segments, the excess is not displayed.
115
116**Widget capability**: This API can be used in ArkTS widgets since API version 9.
117
118**Atomic service API**: This API can be used in atomic services since API version 11.
119
120**System capability**: SystemCapability.ArkUI.ArkUI.Full
121
122**Parameters**
123
124| Name| Type                                                        | Mandatory| Description                                                        |
125| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
126| colors | [ResourceColor<sup>11+</sup>](ts-types.md#resourcecolor) \| [LinearGradient<sup>11+</sup>](ts-basic-components-datapanel.md#lineargradient10) \| Array&lt;[[ResourceColor](ts-types.md#resourcecolor) \| [LinearGradient<sup>11+</sup>](ts-basic-components-datapanel.md#lineargradient10) \, number]&gt; | Yes  | Colors of the gauge. You can set colors for individual segments.<br>Default value in API version 9: **Color.Black**<br>Default value in API version 11:<br>If no color is provided or the array is empty, the ring color will be a gradient consisting of the following colors: 0xFF64BB5C, 0xFFF7CE00, and 0xFFE84026.<br>If a color value is provided but invalid, the ring will be in the color of 0xFFE84026.<br>Colors with a weight of 0 are not displayed in the ring. If all weights are 0, the ring is not displayed.|
127
128### strokeWidth
129
130strokeWidth(length: Length)
131
132Sets the stroke width of the gauge.
133
134**Widget capability**: This API can be used in ArkTS widgets since API version 9.
135
136**Atomic service API**: This API can be used in atomic services since API version 11.
137
138**System capability**: SystemCapability.ArkUI.ArkUI.Full
139
140**Parameters**
141
142| Name| Type                        | Mandatory| Description                                                        |
143| ------ | ---------------------------- | ---- | ------------------------------------------------------------ |
144| length | [Length](ts-types.md#length) | Yes  | Stroke width of the gauge.<br>Default value: **4**<br>Unit: vp<br>**NOTE**<br>A value less than 0 evaluates to the default value.<br>The value cannot be in percentage.|
145
146### description<sup>11+</sup>
147
148description(value: CustomBuilder)
149
150Sets the description of the gauge.
151
152**Atomic service API**: This API can be used in atomic services since API version 12.
153
154**System capability**: SystemCapability.ArkUI.ArkUI.Full
155
156**Parameters**
157
158| Name| Type                                       | Mandatory| Description                                                        |
159| ------ | ------------------------------------------- | ---- | ------------------------------------------------------------ |
160| value  | [CustomBuilder](ts-types.md#custombuilder8) | Yes  | Description.<br>**NOTE**<br>You need to customize the content – text or imagery recommended – in @Builder.<br>If the width and height of the custom content are in percentage, the reference range is a rectangle that is 44.4% of the diameter of the ring horizontally and 25.4% vertically (for images, it is 28.6% both horizontally and vertically), positioned 0 vp away from the bottom of the ring and centered horizontally.<br>If this parameter is set to null, no description is displayed.<br>If this parameter is not set, what's displayed is subject to the maximum and minimum value settings.<br>If either or both of the maximum and minimum values are set, they are displayed.<br>If neither maximum nor minimum values are set, no description is displayed.<br>The maximum and minimum values are displayed at the bottom of the ring and cannot be relocated. They may be blocked by the ring if the ring's start and end angles are not set properly.|
161
162### trackShadow<sup>11+</sup>
163
164trackShadow(value: GaugeShadowOptions)
165
166Sets the shadow style of the gauge.
167
168**Atomic service API**: This API can be used in atomic services since API version 12.
169
170**System capability**: SystemCapability.ArkUI.ArkUI.Full
171
172**Parameters**
173
174| Name| Type                                               | Mandatory| Description                                                        |
175| ------ | --------------------------------------------------- | ---- | ------------------------------------------------------------ |
176| value  | [GaugeShadowOptions](#gaugeshadowoptions11) | Yes  | Shadow style.<br>**NOTE**<br>The shadow color is the same as the ring color.<br>If this attribute is set to **null**, the shadow effect is disabled.|
177
178### indicator<sup>11+</sup>
179
180indicator(value: GaugeIndicatorOptions)
181
182Sets the indicator style of the gauge.
183
184**Atomic service API**: This API can be used in atomic services since API version 12.
185
186**System capability**: SystemCapability.ArkUI.ArkUI.Full
187
188**Parameters**
189
190| Name| Type                                                     | Mandatory| Description                                                 |
191| ------ | --------------------------------------------------------- | ---- | ----------------------------------------------------- |
192| value  | [GaugeIndicatorOptions](#gaugeindicatoroptions11) | Yes  | Indicator style.<br>**NOTE**<br>If this attribute is set to **null**, no indicator is displayed.|
193
194### privacySensitive<sup>12+</sup>
195
196privacySensitive(isPrivacySensitiveMode: Optional\<boolean\>)
197
198Sets whether to enable privacy mode.
199
200**Widget capability**: This API can be used in ArkTS widgets since API version 12.
201
202**Atomic service API**: This API can be used in atomic services since API version 12.
203
204**System capability**: SystemCapability.ArkUI.ArkUI.Full
205
206**Parameters**
207
208| Name| Type                                                     | Mandatory| Description                                                 |
209| ------ | --------------------------------------------------------- | ---- | ----------------------------------------------------- |
210| isPrivacySensitiveMode  | [Optional\<boolean\>] | Yes  | Whether to enable privacy mode. In privacy mode, the gauge indicator points to **0**, the maximum and minimum values are masked, and the scale range is displayed in gray or the background color.<br>**NOTE**<br>If this parameter is set to **null**, privacy mode is disabled.<br>[Enabling privacy mode requires widget framework support.](./ts-universal-attributes-obscured.md) |
211
212### contentModifier<sup>12+</sup>
213
214contentModifier(modifier: ContentModifier\<GaugeConfiguration>)
215
216Creates a content modifier.
217
218**Atomic service API**: This API can be used in atomic services since API version 12.
219
220**System capability**: SystemCapability.ArkUI.ArkUI.Full
221
222**Parameters**
223
224| Name| Type                                         | Mandatory| Description                                            |
225| ------ | --------------------------------------------- | ---- | ------------------------------------------------ |
226| modifier  | [ContentModifier\<GaugeConfiguration>](#gaugeconfiguration12)| Yes  | Content modifier to apply to the current component.<br>**modifier**: content modifier. You need a custom class to implement the **ContentModifier** API.|
227
228## GaugeShadowOptions<sup>11+</sup>
229
230Inherits from [MultiShadowOptions](ts-types.md#multishadowoptions10) and has all attributes of **MultiShadowOptions**.
231
232**Atomic service API**: This API can be used in atomic services since API version 12.
233
234## GaugeIndicatorOptions<sup>11+</sup>
235
236**Atomic service API**: This API can be used in atomic services since API version 12.
237
238**System capability**: SystemCapability.ArkUI.ArkUI.Full
239
240| Name         | Type| Mandatory| Description|
241| ------------- | ------- | ---- | -------- |
242| icon | [ResourceStr](ts-types.md#resourcestr) | No| Image path of the icon.<br>**NOTE**<br>If this parameter is not set, the default triangle style indicator is used.<br>Icons in SVG format are supported. If icons in other formats are used, the default triangle style indicator is used.|
243| space | [Dimension](ts-types.md#dimension10) | No| Distance between the indicator and the outer edge of the ring. The value cannot be in percentage.<br>Default value: **8**<br>Unit: vp<br>**NOTE**<br> For the default triangle style indicator, the distance is the amount of space between the triangle and the outer edge of the ring.<br> If this parameter is set to a value less than 0, the default value will be used.<br>If this parameter is set to a value greater than the ring radius, the default value will be used.|
244
245## GaugeConfiguration<sup>12+</sup>
246
247You need a custom class to implement the **ContentModifier** API.
248
249**Atomic service API**: This API can be used in atomic services since API version 12.
250
251**System capability**: SystemCapability.ArkUI.ArkUI.Full
252
253| Name | Type   | Mandatory| Description             |
254| ------ | ------ | ----| ---------------- |
255| value | number | Yes| Current value.|
256| min | number | Yes| Minimum value of the current data segment.|
257| max | number | Yes| Maximum value of the current data segment.|
258
259
260## Example
261### Example 1: Implementing a Multi-color Gauge
262
263This example demonstrates how to implement a multi-color gauge using the **colors** attribute.
264
265```ts
266@Entry
267@Component
268struct Gauge1 {
269  @Builder
270  descriptionBuilder() {
271    Text('Description')
272      .maxFontSize('30sp')
273      .minFontSize("10.0vp")
274      .fontColor("#fffa2a2d")
275      .fontWeight(FontWeight.Medium)
276      .width('100%')
277      .height("100%")
278      .textAlign(TextAlign.Center)
279  }
280
281  build() {
282    Column() {
283      Gauge({ value: 50, min: 1, max: 100 }) {
284        Column() {
285          Text('50')
286            .fontWeight(FontWeight.Medium)
287            .width('62%')
288            .fontColor("#ff182431")
289            .maxFontSize("60.0vp")
290            .minFontSize("30.0vp")
291            .textAlign(TextAlign.Center)
292            .margin({ top: '35%' })
293            .textOverflow({ overflow: TextOverflow.Ellipsis })
294            .maxLines(1)
295          Text('Auxiliary text')
296            .maxFontSize("16.0fp")
297            .minFontSize("10.0vp")
298            .fontColor($r('sys.color.ohos_id_color_text_secondary'))
299            .fontColor($r('sys.color.ohos_id_color_text_secondary'))
300            .fontWeight(FontWeight.Regular)
301            .width('67.4%')
302            .height('9.5%')
303            .textAlign(TextAlign.Center)
304        }.width('100%').height('100%')
305      }
306      .value(50)
307      .startAngle(210)
308      .endAngle(150)
309      .colors([[new LinearGradient([{ color: "#deb6fb", offset: 0 }, { color: "#ac49f5", offset: 1 }]), 9],
310        [new LinearGradient([{ color: "#bbb7fc", offset: 0 }, { color: "#564af7", offset: 1 }]), 8],
311        [new LinearGradient([{ color: "#f5b5c2", offset: 0 }, { color: "#e64566", offset: 1 }]), 7],
312        [new LinearGradient([{ color: "#f8c5a6", offset: 0 }, { color: "#ed6f21", offset: 1 }]), 6],
313        [new LinearGradient([{ color: "#fceb99", offset: 0 }, { color: "#f7ce00", offset: 1 }]), 5],
314        [new LinearGradient([{ color: "#dbefa5", offset: 0 }, { color: "#a5d61d", offset: 1 }]), 4],
315        [new LinearGradient([{ color: "#c1e4be", offset: 0 }, { color: "#64bb5c", offset: 1 }]), 3],
316        [new LinearGradient([{ color: "#c0ece5", offset: 0 }, { color: "#61cfbe", offset: 1 }]), 2],
317        [new LinearGradient([{ color: "#b5e0f4", offset: 0 }, { color: "#46b1e3", offset: 1 }]), 1]])
318      .width('80%')
319      .height('80%')
320      .strokeWidth(18)
321      .trackShadow({ radius: 7, offsetX: 7, offsetY: 7 })
322      .description(this.descriptionBuilder)
323      .padding(18)
324    }.margin({ top: 40 }).width('100%').height('100%')
325  }
326}
327```
328![gauge](figures/gauge-image1.png)
329
330### Example 1: Implementing a Single-color Gauge
331
332This example demonstrates how to implement a single-color gauge using the **colors** attribute.
333
334```ts
335@Entry
336@Component
337struct Gauge2 {
338  @Builder
339  descriptionBuilderImage() {
340    Image($r('sys.media.ohos_ic_public_clock')).width(72).height(72)
341  }
342
343  build() {
344    Column() {
345      Gauge({ value: 50, min: 1, max: 100 }) {
346        Column() {
347          Text('50')
348            .fontWeight(FontWeight.Medium)
349            .width('62%')
350            .fontColor("#ff182431")
351            .maxFontSize("60.0vp")
352            .minFontSize("30.0vp")
353            .textAlign(TextAlign.Center)
354            .margin({ top: '35%' })
355            .textOverflow({ overflow: TextOverflow.Ellipsis })
356            .maxLines(1)
357        }.width('100%').height('100%')
358      }
359      .startAngle(210)
360      .endAngle(150)
361      .colors('#cca5d61d')
362      .width('80%')
363      .height('80%')
364      .strokeWidth(18)
365      .description(this.descriptionBuilderImage)
366      .padding(18)
367    }.margin({ top: 40 }).width('100%').height('100%')
368  }
369}
370```
371![gauge](figures/gauge-image2.png)
372
373### Example 3: Configuring a Custom Description Area
374
375This example illustrates how to configure a custom description area using the **description** attribute.
376
377```ts
378@Entry
379@Component
380struct Gauge3 {
381  @Builder
382  descriptionBuilder() {
383    Text('Description')
384      .maxFontSize('30sp')
385      .minFontSize("10.0vp")
386      .fontColor("#fffa2a2d")
387      .fontWeight(FontWeight.Medium)
388      .width('100%')
389      .height("100%")
390      .textAlign(TextAlign.Center)
391  }
392
393  build() {
394    Column() {
395      Column() {
396        Gauge({ value: 50, min: 1, max: 100 }) {
397          Column() {
398            Text('50')
399              .fontWeight(FontWeight.Medium)
400              .width('62%')
401              .fontColor("#ff182431")
402              .maxFontSize("60.0vp")
403              .minFontSize("30.0vp")
404              .textAlign(TextAlign.Center)
405              .margin({ top: '35%' })
406              .textOverflow({ overflow: TextOverflow.Ellipsis })
407              .maxLines(1)
408          }.width('100%').height('100%')
409        }
410        .startAngle(210)
411        .endAngle(150)
412        .colors([[new LinearGradient([{ color: "#deb6fb", offset: 0 }, { color: "#ac49f5", offset: 1 }]), 9],
413          [new LinearGradient([{ color: "#bbb7fc", offset: 0 }, { color: "#564af7", offset: 1 }]), 8],
414          [new LinearGradient([{ color: "#f5b5c2", offset: 0 }, { color: "#e64566", offset: 1 }]), 7],
415          [new LinearGradient([{ color: "#f8c5a6", offset: 0 }, { color: "#ed6f21", offset: 1 }]), 6],
416          [new LinearGradient([{ color: "#fceb99", offset: 0 }, { color: "#f7ce00", offset: 1 }]), 5],
417          [new LinearGradient([{ color: "#dbefa5", offset: 0 }, { color: "#a5d61d", offset: 1 }]), 4],
418          [new LinearGradient([{ color: "#c1e4be", offset: 0 }, { color: "#64bb5c", offset: 1 }]), 3],
419          [new LinearGradient([{ color: "#c0ece5", offset: 0 }, { color: "#61cfbe", offset: 1 }]), 2],
420          [new LinearGradient([{ color: "#b5e0f4", offset: 0 }, { color: "#46b1e3", offset: 1 }]), 1]])
421        .width('80%')
422        .height('80%')
423        .strokeWidth(18)
424        .description(this.descriptionBuilder)
425        .trackShadow({ radius: 7, offsetX: 7, offsetY: 7 })
426        .padding(18)
427      }.margin({ top: 40 }).width('100%').height('100%')
428    }
429  }
430}
431```
432![gauge](figures/gauge-image3.png)
433
434### Example 4: Configuring the Auxiliary Area
435
436This example demonstrates how to configure the auxiliary area by setting child components.
437
438```ts
439@Entry
440@Component
441struct Gauge4 {
442  build() {
443    Column() {
444      Gauge({ value: 50, min: 1, max: 100 }) {
445        Column() {
446          Text('50')
447            .maxFontSize("72.0vp")
448            .minFontSize("10.0vp")
449            .fontColor("#ff182431")
450            .width('40%')
451            .textAlign(TextAlign.Center)
452            .margin({ top: '35%' })
453            .textOverflow({ overflow: TextOverflow.Ellipsis })
454            .maxLines(1)
455          Text('Auxiliary text')
456            .maxFontSize("30.0vp")
457            .minFontSize("18.0vp")
458            .fontWeight(FontWeight.Medium)
459            .fontColor($r('sys.color.ohos_id_color_text_secondary'))
460            .width('62%')
461            .height('15.9%')
462            .textAlign(TextAlign.Center)
463        }.width('100%').height('100%')
464      }
465      .startAngle(210)
466      .endAngle(150)
467      .colors([[new LinearGradient([{ color: "#deb6fb", offset: 0 }, { color: "#ac49f5", offset: 1 }]), 9],
468        [new LinearGradient([{ color: "#bbb7fc", offset: 0 }, { color: "#564af7", offset: 1 }]), 8],
469        [new LinearGradient([{ color: "#f5b5c2", offset: 0 }, { color: "#e64566", offset: 1 }]), 7],
470        [new LinearGradient([{ color: "#f8c5a6", offset: 0 }, { color: "#ed6f21", offset: 1 }]), 6],
471        [new LinearGradient([{ color: "#fceb99", offset: 0 }, { color: "#f7ce00", offset: 1 }]), 5],
472        [new LinearGradient([{ color: "#dbefa5", offset: 0 }, { color: "#a5d61d", offset: 1 }]), 4],
473        [new LinearGradient([{ color: "#c1e4be", offset: 0 }, { color: "#64bb5c", offset: 1 }]), 3],
474        [new LinearGradient([{ color: "#c0ece5", offset: 0 }, { color: "#61cfbe", offset: 1 }]), 2],
475        [new LinearGradient([{ color: "#b5e0f4", offset: 0 }, { color: "#46b1e3", offset: 1 }]), 1]])
476      .width('80%')
477      .height('80%')
478      .strokeWidth(18)
479      .description(null)
480      .trackShadow({ radius: 7, offsetX: 7, offsetY: 7 })
481      .padding(18)
482    }.margin({ top: 40 }).width('100%').height('100%')
483  }
484}
485```
486![gauge](figures/gauge-image4.png)
487
488### Example 5: Setting the Minimum and Maximum Values
489
490This example shows how to set the minimum and maximum values of the gauge by configuring **min** and **max**.
491
492```ts
493@Entry
494@Component
495struct Gauge5 {
496  build() {
497    Column() {
498      Gauge({ value: 50, min: 1, max: 100 }) {
499        Column() {
500          Text('50')
501            .maxFontSize("80sp")
502            .minFontSize("60.0vp")
503            .fontWeight(FontWeight.Medium)
504            .fontColor("#ff182431")
505            .width('40%')
506            .height('30%')
507            .textAlign(TextAlign.Center)
508            .margin({ top: '22.2%' })
509            .textOverflow({ overflow: TextOverflow.Ellipsis })
510            .maxLines(1)
511        }.width('100%').height('100%')
512      }
513      .startAngle(225)
514      .endAngle(135)
515      .colors(new LinearGradient([{ color: "#e84026", offset: 0 },
516        { color: "#f7ce00", offset: 0.6 },
517        { color: "#64bb5c", offset: 1 }]))
518      .width('80%')
519      .height('80%')
520      .strokeWidth(18)
521      .trackShadow({ radius: 7, offsetX: 7, offsetY: 7 })
522      .padding(18)
523    }.margin({ top: 40 }).width('100%').height('100%')
524  }
525}
526```
527![gauge](figures/gauge-image5.png)
528
529### Example 6: Setting the Indicator
530
531This example illustrates how to set the indicator of the gauge using the **indicator** attribute.
532
533```ts
534@Entry
535@Component
536struct Gauge6 {
537  build() {
538    Column() {
539      Gauge({ value: 50, min: 1, max: 100 }) {
540        Column() {
541          Text('50')
542            .maxFontSize('60sp')
543            .minFontSize('30.0vp')
544            .fontWeight(FontWeight.Medium)
545            .fontColor("#ff182431")
546            .width('62%')
547            .textAlign(TextAlign.Center)
548            .margin({ top: '35%' })
549            .textOverflow({ overflow: TextOverflow.Ellipsis })
550            .maxLines(1)
551          Text('Auxiliary text')
552            .maxFontSize('16sp')
553            .minFontSize("10.0vp")
554            .fontColor($r('sys.color.ohos_id_color_text_secondary'))
555            .fontWeight(FontWeight.Regular)
556            .width('67.4%')
557            .height('9.5%')
558            .textAlign(TextAlign.Center)
559        }.width('100%').height('100%')
560      }
561      .startAngle(225)
562      .endAngle(135)
563      .colors(Color.Red)
564      .width('80%')
565      .height('80%')
566      .indicator(null)
567      .strokeWidth(18)
568      .trackShadow({ radius: 7, offsetX: 7, offsetY: 7 })
569      .padding(18)
570    }.margin({ top: 40 }).width('100%').height('100%')
571  }
572}
573```
574![gauge](figures/gauge-image6.png)
575
576### Example 7: Setting the Start and End Angles
577
578This example demonstrates how to set the start and end angles of the gauge using the **startAngle** and **endAngle** attributes.
579
580```ts
581@Entry
582@Component
583struct Gauge7 {
584  build() {
585    Column() {
586      Gauge({ value: 50, min: 1, max: 100 }) {
587        Column() {
588          Text('50')
589            .maxFontSize('60sp')
590            .minFontSize('30.0vp')
591            .fontWeight(FontWeight.Medium)
592            .fontColor("#ff182431")
593            .width('62%')
594            .textAlign(TextAlign.Center)
595            .margin({ top: '35%' })
596            .textOverflow({ overflow: TextOverflow.Ellipsis })
597            .maxLines(1)
598        }.width('100%').height('100%')
599      }
600      .startAngle(225)
601      .endAngle(135)
602      .colors(Color.Red)
603      .width('80%')
604      .height('80%')
605      .indicator(null)
606      .strokeWidth(18)
607      .trackShadow({ radius: 7, offsetX: 7, offsetY: 7 })
608      .padding(18)
609    }.margin({ top: 40 }).width('100%').height('100%')
610  }
611}
612```
613![gauge](figures/gauge-image7.png)
614
615
616
617### Example 8: Setting the Custom Content Area
618
619This example shows how to customize the content area of the gauge using the **contentModifier** attribute.
620
621```ts
622// xxx.ets
623// The example implements the customization of the gauge's content area using a Builder, utilizing a circular chart, buttons, and text boxes. When the increase button is clicked, the indicator will shift to the right; conversely, when the decrease button is clicked, the indicator will shift to the left.
624@Builder
625function buildGauge(config: GaugeConfiguration) {
626  Column({ space: 30 }) {
627    Row() {
628      Text('[ContentModifier] value: ' + JSON.stringify((config.contentModifier as MyGaugeStyle).value) +
629        ' min:' + JSON.stringify((config.contentModifier as MyGaugeStyle).min) +
630        ' max:' + JSON.stringify((config.contentModifier as MyGaugeStyle).max))
631        .fontSize(12)
632    }
633
634    Text('[Config] value: ' + config.value + ' min: ' + config.min + ' max: ' + config.max).fontSize(12)
635    Gauge({
636      value: config.value,
637      min: config.min,
638      max: config.max
639    }).width("50%")
640  }
641  .width("100%")
642  .padding(20)
643  .margin({ top: 5 })
644  .alignItems(HorizontalAlign.Center)
645}
646
647class MyGaugeStyle implements ContentModifier<GaugeConfiguration> {
648  value: number = 0
649  min: number = 0
650  max: number = 0
651
652  constructor(value: number, min: number, max: number) {
653    this.value = value
654    this.min = min
655    this.max = max
656  }
657
658  applyContent(): WrappedBuilder<[GaugeConfiguration]> {
659    return wrapBuilder(buildGauge)
660  }
661}
662
663@Entry
664@Component
665struct refreshExample {
666  @State gaugeValue: number = 20
667  @State gaugeMin: number = 0
668  @State gaugeMax: number = 100
669
670  build() {
671    Column({ space: 20 }) {
672      Gauge({
673        value: this.gaugeValue,
674        min: this.gaugeMin,
675        max: this.gaugeMax
676      })
677        .contentModifier(new MyGaugeStyle(30, 10, 100))
678
679      Column({ space: 20 }) {
680        Row({ space: 20 }) {
681          Button('Increase').onClick(() => {
682            if (this.gaugeValue < this.gaugeMax) {
683              this.gaugeValue += 1
684            }
685          })
686          Button('Decrease').onClick(() => {
687            if (this.gaugeValue > this.gaugeMin) {
688              this.gaugeValue -= 1
689            }
690          })
691        }
692      }.width('100%')
693    }.width('100%').margin({ top: 5 })
694  }
695}
696```
697![gauge](figures/gauge_builder.gif)
698
699
700### Example 9: Securing Sensitive Information
701
702This example illustrates how to secure sensitive information using the **privacySensitive** attribute. Note that the display requires widget framework support.
703
704```ts
705@Entry
706@Component
707struct GaugeExample {
708  build() {
709    Scroll() {
710      Column({ space: 15 }) {
711        Row() {
712          Gauge({ value: 50, min: 1, max: 100 }) {
713            Column() {
714              Text('60')
715                .maxFontSize("180sp")
716                .minFontSize("160.0vp")
717                .fontWeight(FontWeight.Medium)
718                .fontColor("#ff182431")
719                .width('40%')
720                .height('30%')
721                .textAlign(TextAlign.Center)
722                .margin({ top: '22.2%' })
723                .textOverflow({ overflow: TextOverflow.Ellipsis })
724                .maxLines(1)
725            }.width('100%').height('100%')
726          }
727          .startAngle(225)
728          .endAngle(135)
729          .colors(Color.Red)
730          .width('80%')
731          .height('80%')
732          .strokeWidth(18)
733          .trackShadow({ radius: 7, offsetX: 7, offsetY: 7 })
734          .padding(18)
735          .privacySensitive(true)
736        }
737      }
738    }
739  }
740}
741```
742![gauge](figures/gauge-privacysensitive.gif)
743