Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

mdd-highlight-label #1306

Merged
merged 11 commits into from
Sep 5, 2024
Merged

mdd-highlight-label #1306

Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
ce0150f
mdd-highlight-label
mddifilippo89 Jun 13, 2024
ddd55cb
Update radial-gauge.md
mddifilippo89 Jun 14, 2024
1a2ecdf
Merge branch 'vnext' into mdd-update-highlight-label
mddifilippo89 Jun 18, 2024
c47b223
Merge branch 'vnext' into mdd-update-highlight-label
mddifilippo89 Jun 21, 2024
18adc99
Merge branch 'vnext' into mdd-update-highlight-label
mddifilippo89 Jun 21, 2024
ac24cc6
Merge branch 'vnext' into mdd-update-highlight-label
mddifilippo89 Jun 24, 2024
afebc6a
Merge branch 'vnext' into mdd-update-highlight-label
mddifilippo89 Jul 2, 2024
ecfdd77
Merge branch 'vnext' into mdd-update-highlight-label
agoldenbaum Aug 2, 2024
7aaa64b
Merge branch 'vnext' into mdd-update-highlight-label
mddifilippo89 Sep 5, 2024
02d1715
Update radial-gauge.md
mddifilippo89 Sep 5, 2024
6d989ea
Update radial-gauge.md
mddifilippo89 Sep 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions doc/en/components/radial-gauge.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -335,9 +335,15 @@ 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`.

`TitleText` & `SubtitleText` properties are available and can be used to display both custom text for the needle. In addition, `TitleDisplaysValue` | `SubtitleDisplaysValue` will let you replace the custom text with the needle's value. So you can occupy custom text for the title but show the value via the subtitle and vice versa.
agoldenbaum marked this conversation as resolved.
Show resolved Hide resolved

If the highlight needle is shown, as explained below, then custom text can be shown via `HighlightLabelText`, otherwise `HighlightLabelDisplaysValue` can be enabled and display it's value.

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`.

Copy link
Collaborator

@HUSSAR-mtrela HUSSAR-mtrela Jul 8, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

docs about Title and Subtitle features should be in a new section called Title and Subtitle and add code snippets that just sets some props for Title and Subtitle feature because they are independent from Gauge labels

```html
<igx-radial-gauge
labelExtent=0.65
Expand Down Expand Up @@ -651,7 +657,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
<igx-radial-gauge #radialGauge
Expand Down
Loading