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
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 a child component are in percentage, the reference range is the rectangle whose outer ring is used as the inscribed circle.
20
21
22## APIs
23
24Gauge(options:{value: number, min?: number, max?: number})
25
26Creates a **\<Gauge>** component.
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 passed or the passed array is empty, the ring will be a gradient consisting of the following colors: 0xFF64BB5C, 0xFFF7CE00, and 0xFFE84026.<br>If a color is passed but the color value is invalid, the ring will be in the color of 0xFFE84026. |
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 whose area is 44.4% x 25.4% of the ring diameter (28.6% x 28.6% for imagery), 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**System capability**: SystemCapability.ArkUI.ArkUI.Full
185
186**Parameters** 
187
188| Name | Type                                                     | Mandatory | Description                                                 |
189| ------ | --------------------------------------------------------- | ---- | ----------------------------------------------------- |
190| value  | [GaugeIndicatorOptions](#gaugeindicatoroptions11)  | Yes  | Indicator style.<br>**NOTE**<br>If this attribute is set to **null**, no indicator is displayed. |
191
192### privacySensitive<sup>12+</sup>
193
194privacySensitive(isPrivacySensitiveMode: Optional\<boolean\>)
195
196Sets whether to enable privacy mode.
197
198**System capability**: SystemCapability.ArkUI.ArkUI.Full
199
200**Parameters** 
201
202| Name | Type                                                     | Mandatory | Description                                                 |
203| ------ | --------------------------------------------------------- | ---- | ----------------------------------------------------- |
204| 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) |
205
206### contentModifier<sup>12+</sup>
207
208contentModifier(modifier: ContentModifier\<GaugeConfiguration>)
209
210Creates a content modifier.
211
212**System capability**: SystemCapability.ArkUI.ArkUI.Full
213
214**Parameters**
215
216| Name | Type                                         | Mandatory | Description                                            |
217| ------ | --------------------------------------------- | ---- | ------------------------------------------------ |
218| 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. |
219
220## GaugeShadowOptions<sup>11+</sup>
221
222Inherits from [MultiShadowOptions](ts-types.md#multishadowoptions10) and has all attributes of **MultiShadowOptions**.
223
224**Atomic service API**: This API can be used in atomic services since API version 12.
225
226## GaugeIndicatorOptions<sup>11+</sup>
227
228**Atomic service API**: This API can be used in atomic services since API version 12.
229
230| Name         | Type | Mandatory | Description |
231| ------------- | ------- | ---- | -------- |
232| icon | [Resource](ts-types.md#resource) | 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. |
233| 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.|
234
235## GaugeConfiguration<sup>12+</sup>
236
237You need a custom class to implement the **ContentModifier** API.
238
239| Name | Type   | Description             |
240| ------ | ------ | ---------------- |
241| value | number | Current value. |
242| min | number | Minimum value of the current data segment. |
243| max | number | Maximum value of the current data segment. |
244
245
246## Example
247### Example 1
248This example sets the current value, description, and auxiliary text.
249```ts
250@Entry
251@Component
252struct Gauge1 {
253  @Builder descriptionBuilder() {
254    Text('Description')
255      .maxFontSize('30sp')
256      .minFontSize("10.0vp")
257      .fontColor("#fffa2a2d")
258      .fontWeight(FontWeight.Medium)
259      .width('100%')
260      .height("100%")
261      .textAlign(TextAlign.Center)
262  }
263
264  build() {
265    Column() {
266      Gauge({ value: 50, min: 1, max: 100 }) {
267        Column() {
268          Text('50')
269            .fontWeight(FontWeight.Medium)
270            .width('62%')
271            .fontColor("#ff182431")
272            .maxFontSize("60.0vp")
273            .minFontSize("30.0vp")
274            .textAlign(TextAlign.Center)
275            .margin({ top: '35%' })
276            .textOverflow({ overflow: TextOverflow.Ellipsis })
277            .maxLines(1)
278          Text('Auxiliary text')
279            .maxFontSize("16.0fp")
280            .minFontSize("10.0vp")
281            .fontColor($r('sys.color.ohos_id_color_text_secondary'))
282            .fontColor($r('sys.color.ohos_id_color_text_secondary'))
283            .fontWeight(FontWeight.Regular)
284            .width('67.4%')
285            .height('9.5%')
286            .textAlign(TextAlign.Center)
287        }.width('100%').height('100%')
288      }
289      .value(50)
290      .startAngle(210)
291      .endAngle(150)
292      .colors([[new LinearGradient([{ color: "#deb6fb", offset: 0 }, { color: "#ac49f5", offset: 1 }]), 9],
293        [new LinearGradient([{ color: "#bbb7fc", offset: 0 }, { color: "#564af7", offset: 1 }]), 8],
294        [new LinearGradient([{ color: "#f5b5c2", offset: 0 }, { color: "#e64566", offset: 1 }]), 7],
295        [new LinearGradient([{ color: "#f8c5a6", offset: 0 }, { color: "#ed6f21", offset: 1 }]), 6],
296        [new LinearGradient([{ color: "#fceb99", offset: 0 }, { color: "#f7ce00", offset: 1 }]), 5],
297        [new LinearGradient([{ color: "#dbefa5", offset: 0 }, { color: "#a5d61d", offset: 1 }]), 4],
298        [new LinearGradient([{ color: "#c1e4be", offset: 0 }, { color: "#64bb5c", offset: 1 }]), 3],
299        [new LinearGradient([{ color: "#c0ece5", offset: 0 }, { color: "#61cfbe", offset: 1 }]), 2],
300        [new LinearGradient([{ color: "#b5e0f4", offset: 0 }, { color: "#46b1e3", offset: 1 }]), 1]])
301      .width('80%')
302      .height('80%')
303      .strokeWidth(18)
304      .trackShadow({ radius: 7, offsetX: 7, offsetY: 7 })
305      .description(this.descriptionBuilder)
306      .padding(18)
307    }.margin({ top: 40 }).width('100%').height('100%')
308  }
309}
310```
311![gauge](figures/gauge-image1.png)
312
313### Example 2
314This example sets the current value and icon.
315```ts
316@Entry
317@Component
318struct Gauge2 {
319  @Builder descriptionBuilderImage() {
320    Image($r('sys.media.ohos_ic_public_clock')).width(72).height(72)
321  }
322
323  build() {
324    Column() {
325      Gauge({ value: 50, min: 1, max: 100 }) {
326        Column() {
327          Text('50')
328            .fontWeight(FontWeight.Medium)
329            .width('62%')
330            .fontColor("#ff182431")
331            .maxFontSize("60.0vp")
332            .minFontSize("30.0vp")
333            .textAlign(TextAlign.Center)
334            .margin({ top: '35%' })
335            .textOverflow({ overflow: TextOverflow.Ellipsis })
336            .maxLines(1)
337        }.width('100%').height('100%')
338      }
339      .startAngle(210)
340      .endAngle(150)
341      .colors('#cca5d61d')
342      .width('80%')
343      .height('80%')
344      .strokeWidth(18)
345      .description(this.descriptionBuilderImage)
346      .padding(18)
347    }.margin({ top: 40 }).width('100%').height('100%')
348  }
349}
350```
351![gauge](figures/gauge-image2.png)
352
353### Example 3
354This example sets the current value and description.
355```ts
356@Entry
357@Component
358struct Gauge3 {
359  @Builder descriptionBuilder() {
360    Text('Description')
361      .maxFontSize('30sp')
362      .minFontSize("10.0vp")
363      .fontColor("#fffa2a2d")
364      .fontWeight(FontWeight.Medium)
365      .width('100%')
366      .height("100%")
367      .textAlign(TextAlign.Center)
368  }
369
370  build() {
371    Column() {
372      Column() {
373        Gauge({ value: 50, min: 1, max: 100 }) {
374          Column() {
375            Text('50')
376              .fontWeight(FontWeight.Medium)
377              .width('62%')
378              .fontColor("#ff182431")
379              .maxFontSize("60.0vp")
380              .minFontSize("30.0vp")
381              .textAlign(TextAlign.Center)
382              .margin({ top: '35%' })
383              .textOverflow({ overflow: TextOverflow.Ellipsis })
384              .maxLines(1)
385          }.width('100%').height('100%')
386        }
387        .startAngle(210)
388        .endAngle(150)
389        .colors([[new LinearGradient([{ color: "#deb6fb", offset: 0 }, { color: "#ac49f5", offset: 1 }]), 9],
390          [new LinearGradient([{ color: "#bbb7fc", offset: 0 }, { color: "#564af7", offset: 1 }]), 8],
391          [new LinearGradient([{ color: "#f5b5c2", offset: 0 }, { color: "#e64566", offset: 1 }]), 7],
392          [new LinearGradient([{ color: "#f8c5a6", offset: 0 }, { color: "#ed6f21", offset: 1 }]), 6],
393          [new LinearGradient([{ color: "#fceb99", offset: 0 }, { color: "#f7ce00", offset: 1 }]), 5],
394          [new LinearGradient([{ color: "#dbefa5", offset: 0 }, { color: "#a5d61d", offset: 1 }]), 4],
395          [new LinearGradient([{ color: "#c1e4be", offset: 0 }, { color: "#64bb5c", offset: 1 }]), 3],
396          [new LinearGradient([{ color: "#c0ece5", offset: 0 }, { color: "#61cfbe", offset: 1 }]), 2],
397          [new LinearGradient([{ color: "#b5e0f4", offset: 0 }, { color: "#46b1e3", offset: 1 }]), 1]])
398        .width('80%')
399        .height('80%')
400        .strokeWidth(18)
401        .description(this.descriptionBuilder)
402        .trackShadow({ radius: 7, offsetX: 7, offsetY: 7 })
403        .padding(18)
404      }.margin({ top: 40 }).width('100%').height('100%')
405    }
406  }
407}
408```
409![gauge](figures/gauge-image3.png)
410
411### Example 4
412This example sets the current value and auxiliary text.
413```ts
414@Entry
415@Component
416struct Gauge4 {
417  build() {
418    Column() {
419      Gauge({ value: 50, min: 1, max: 100 }) {
420        Column() {
421          Text('50')
422            .maxFontSize("72.0vp")
423            .minFontSize("10.0vp")
424            .fontColor("#ff182431")
425            .width('40%')
426            .textAlign(TextAlign.Center)
427            .margin({ top: '35%' })
428            .textOverflow({ overflow: TextOverflow.Ellipsis })
429            .maxLines(1)
430          Text('Auxiliary text')
431            .maxFontSize("30.0vp")
432            .minFontSize("18.0vp")
433            .fontWeight(FontWeight.Medium)
434            .fontColor($r('sys.color.ohos_id_color_text_secondary'))
435            .width('62%')
436            .height('15.9%')
437            .textAlign(TextAlign.Center)
438        }.width('100%').height('100%')
439      }
440      .startAngle(210)
441      .endAngle(150)
442      .colors([[new LinearGradient([{ color: "#deb6fb", offset: 0 }, { color: "#ac49f5", offset: 1 }]), 9],
443        [new LinearGradient([{ color: "#bbb7fc", offset: 0 }, { color: "#564af7", offset: 1 }]), 8],
444        [new LinearGradient([{ color: "#f5b5c2", offset: 0 }, { color: "#e64566", offset: 1 }]), 7],
445        [new LinearGradient([{ color: "#f8c5a6", offset: 0 }, { color: "#ed6f21", offset: 1 }]), 6],
446        [new LinearGradient([{ color: "#fceb99", offset: 0 }, { color: "#f7ce00", offset: 1 }]), 5],
447        [new LinearGradient([{ color: "#dbefa5", offset: 0 }, { color: "#a5d61d", offset: 1 }]), 4],
448        [new LinearGradient([{ color: "#c1e4be", offset: 0 }, { color: "#64bb5c", offset: 1 }]), 3],
449        [new LinearGradient([{ color: "#c0ece5", offset: 0 }, { color: "#61cfbe", offset: 1 }]), 2],
450        [new LinearGradient([{ color: "#b5e0f4", offset: 0 }, { color: "#46b1e3", offset: 1 }]), 1]])
451      .width('80%')
452      .height('80%')
453      .strokeWidth(18)
454      .description(null)
455      .trackShadow({ radius: 7, offsetX: 7, offsetY: 7 })
456      .padding(18)
457    }.margin({ top: 40 }).width('100%').height('100%')
458  }
459}
460```
461![gauge](figures/gauge-image4.png)
462
463### Example 5
464This example sets the current value, maximum value, and minimum value.
465```ts
466@Entry
467@Component
468struct Gauge5 {
469  build() {
470    Column() {
471      Gauge({ value: 50, min: 1, max: 100 }) {
472        Column() {
473          Text('50')
474            .maxFontSize("80sp")
475            .minFontSize("60.0vp")
476            .fontWeight(FontWeight.Medium)
477            .fontColor("#ff182431")
478            .width('40%')
479            .height('30%')
480            .textAlign(TextAlign.Center)
481            .margin({ top: '22.2%' })
482            .textOverflow({ overflow: TextOverflow.Ellipsis })
483            .maxLines(1)
484        }.width('100%').height('100%')
485      }
486      .startAngle(225)
487      .endAngle(135)
488      .colors(new LinearGradient([{ color: "#e84026", offset: 0 },
489        { color: "#f7ce00", offset: 0.6 },
490        { color: "#64bb5c", offset: 1 }]))
491      .width('80%')
492      .height('80%')
493      .strokeWidth(18)
494      .trackShadow({ radius: 7, offsetX: 7, offsetY: 7 })
495      .padding(18)
496    }.margin({ top: 40 }).width('100%').height('100%')
497  }
498}
499```
500![gauge](figures/gauge-image5.png)
501
502### Example 6
503This example sets the current value, maximum and minimum values, and auxiliary text.
504```ts
505@Entry
506@Component
507struct Gauge6 {
508  build() {
509    Column() {
510      Gauge({ value: 50, min: 1, max: 100 }) {
511        Column() {
512          Text('50')
513            .maxFontSize('60sp')
514            .minFontSize('30.0vp')
515            .fontWeight(FontWeight.Medium)
516            .fontColor("#ff182431")
517            .width('62%')
518            .textAlign(TextAlign.Center)
519            .margin({ top: '35%' })
520            .textOverflow({ overflow: TextOverflow.Ellipsis })
521            .maxLines(1)
522          Text('Auxiliary text')
523            .maxFontSize('16sp')
524            .minFontSize("10.0vp")
525            .fontColor($r('sys.color.ohos_id_color_text_secondary'))
526            .fontWeight(FontWeight.Regular)
527            .width('67.4%')
528            .height('9.5%')
529            .textAlign(TextAlign.Center)
530        }.width('100%').height('100%')
531      }
532      .startAngle(225)
533      .endAngle(135)
534      .colors(Color.Red)
535      .width('80%')
536      .height('80%')
537      .indicator(null)
538      .strokeWidth(18)
539      .trackShadow({ radius: 7, offsetX: 7, offsetY: 7 })
540      .padding(18)
541    }.margin({ top: 40 }).width('100%').height('100%')
542  }
543}
544```
545![gauge](figures/gauge-image6.png)
546
547### Example 7
548This example sets the current value, maximum value, and minimum value.
549```ts
550@Entry
551@Component
552struct Gauge7 {
553  build() {
554    Column() {
555      Gauge({ value: 50, min: 1, max: 100 }) {
556        Column() {
557          Text('50')
558            .maxFontSize('60sp')
559            .minFontSize('30.0vp')
560            .fontWeight(FontWeight.Medium)
561            .fontColor("#ff182431")
562            .width('62%')
563            .textAlign(TextAlign.Center)
564            .margin({ top: '35%' })
565            .textOverflow({ overflow: TextOverflow.Ellipsis })
566            .maxLines(1)
567        }.width('100%').height('100%')
568      }
569      .startAngle(225)
570      .endAngle(135)
571      .colors(Color.Red)
572      .width('80%')
573      .height('80%')
574      .indicator(null)
575      .strokeWidth(18)
576      .trackShadow({ radius: 7, offsetX: 7, offsetY: 7 })
577      .padding(18)
578    }.margin({ top: 40 }).width('100%').height('100%')
579  }
580}
581```
582![gauge](figures/gauge-image7.png)
583
584
585
586### Example 8
587
588```ts
589// xxx.ets
590// 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.
591@Builder
592function buildGauge(config: GaugeConfiguration) {
593  Column({ space: 30 }) {
594    Row() {
595      Text('[ContentModifier] value: ' + JSON.stringify((config.contentModifier as MyGaugeStyle).value) +
596        ' min:' + JSON.stringify((config.contentModifier as MyGaugeStyle).min) +
597        ' max:' + JSON.stringify((config.contentModifier as MyGaugeStyle).max))
598        .fontSize(12)
599    }
600
601    Text('[Config] value: ' + config.value + ' min: ' + config.min + ' max: ' + config.max).fontSize(12)
602    Gauge({
603      value: config.value,
604      min: config.min,
605      max: config.max
606    }).width("50%")
607  }
608  .width("100%")
609  .padding(20)
610  .margin({ top: 5 })
611  .alignItems(HorizontalAlign.Center)
612}
613
614class MyGaugeStyle implements ContentModifier<GaugeConfiguration> {
615  value: number = 0
616  min: number = 0
617  max: number = 0
618
619  constructor(value: number, min: number, max: number) {
620    this.value = value
621    this.min = min
622    this.max = max
623  }
624
625  applyContent(): WrappedBuilder<[GaugeConfiguration]> {
626    return wrapBuilder(buildGauge)
627  }
628}
629
630@Entry
631@Component
632struct refreshExample {
633  @State gaugeValue: number = 20
634  @State gaugeMin: number = 0
635  @State gaugeMax: number = 100
636
637  build() {
638    Column({ space: 20 }) {
639      Gauge({
640        value: this.gaugeValue,
641        min: this.gaugeMin,
642        max: this.gaugeMax
643      })
644        .contentModifier(new MyGaugeStyle(30, 10, 100))
645
646      Column({ space: 20 }) {
647        Row({ space: 20 }) {
648          Button ('Increase').onClick () => {
649            if (this.gaugeValue < this.gaugeMax) {
650              this.gaugeValue += 1
651            }
652          })
653          Button ('Decrease').onClick () => {
654            if (this.gaugeValue > this.gaugeMin) {
655              this.gaugeValue -= 1
656            }
657          })
658        }
659      }.width('100%')
660    }.width('100%').margin({ top: 5 })
661  }
662}
663```
664![gauge](figures/gauge_builder.gif)
665
666
667### Example 9
668
669This example shows how to enable privacy mode, which requires widget framework support.
670
671```ts
672@Entry
673@Component
674struct GaugeExample {
675  build() {
676    Scroll() {
677      Column({ space: 15 }) {
678        Row() {
679          Gauge({ value: 50, min: 1, max: 100 }) {
680            Column() {
681              Text('60')
682                .maxFontSize("180sp")
683                .minFontSize("160.0vp")
684                .fontWeight(FontWeight.Medium)
685                .fontColor("#ff182431")
686                .width('40%')
687                .height('30%')
688                .textAlign(TextAlign.Center)
689                .margin({ top: '22.2%' })
690                .textOverflow({ overflow: TextOverflow.Ellipsis })
691                .maxLines(1)
692            }.width('100%').height('100%')
693          }
694          .startAngle(225)
695          .endAngle(135)
696          .colors(Color.Red)
697          .width('80%')
698          .height('80%')
699          .strokeWidth(18)
700          .trackShadow({ radius: 7, offsetX: 7, offsetY: 7 })
701          .padding(18)
702          .privacySensitive(true)
703        }
704      }
705    }
706  }
707}
708```
709![gauge](figures/gauge-privacysensitive.gif)
710