diff --git a/doc/en/components/radial-gauge.md b/doc/en/components/radial-gauge.md index 937c60320..09b5cefd8 100644 --- a/doc/en/components/radial-gauge.md +++ b/doc/en/components/radial-gauge.md @@ -335,9 +335,11 @@ The scale is visual element that highlights full range of values in the gauge wh `sample="/gauges/radial-gauge/scale", height="320", alt="{Platform} radial gauge scale"` -## Labels +## Labels and Titles The radial gauge labels are visual elements displaying numeric values at a specified interval between values of the `MinimumValue` and `MaximumValue` properties. You can position labels by setting the `LabelExtent` property to a fraction, where 0 represents center of gauge and 1 represents outer extent of the gauge backing. Also, you can customize labels setting various styling properties such as `FontBrush` and `Font`. +Each of these labels for the needle have various styling attributes you can apply to change the font, angle, brush and distance from the center of the gauge such as `TitleExtent`, `TitleAngle`, `SubtitleFontSize`, `HighlightLabelBrush`. + ```html + +``` + +```tsx + +``` + +```html + + +``` + +```razor + + +``` + ## Optical Scaling The radial gauge's labels and titles can change it's scaling. To enable this, first set `OpticalScalingEnabled` to true. Then you can set `OpticalScalingSize` which manages the size at which labels have 100% optical scaling. Labels will have larger fonts when gauge's size is larger. For example, labels will have a 200% larger font size when this property is set to 500 and the gauge px size is doubled to eg. 1000. @@ -651,7 +687,7 @@ You can enable an interactive mode of the gauge (using `IsNeedleDraggingEnabled` ## Highlight Needle -The radial gauge can be modified to show a second needle. This will make the main needle's `Value` appear with a lower opacity. To enable this first set `HighlightValueDisplayMode` to Overlay and then apply a `HighlightValue`. +The radial gauge can be modified to show a second needle. This will make the main needle's `Value` appear with a lower opacity. To enable this first set `HighlightValueDisplayMode` to Overlay and then apply a `HighlightValue`. ```html