diff --git a/blazor/circular-gauge/appearance.md b/blazor/circular-gauge/appearance.md index 1a4aa65d72..fd88ce7c7b 100644 --- a/blazor/circular-gauge/appearance.md +++ b/blazor/circular-gauge/appearance.md @@ -27,7 +27,7 @@ You can add a title to the Circular Gauge using the [Title](https://help.syncfus ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDrqMhLwAfAAeKAL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNryNFDSgehrgcDn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Blazor Circular Gauge with Title](./images/blazor-circulargauge-title.png) @@ -44,11 +44,15 @@ You can set the mid point of the Circular Gauge in pixel as shown below. - + + + + + ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBKWVrmgfzCKvPj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLoXlXoUyTkNEDU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Changing Blazor Circular Gauge Position based on Pixel Value](./images/blazor-circulargauge-custom-position.png) @@ -61,11 +65,15 @@ By setting the value in percentage, Circular Gauge gets its mid point with respe - + + + + + ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VthKiVBGgzfHHcXo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVIjlXSqSxMwlbd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![changing Blazor Circular Gauge Position based on Percent Value](./images/blazor-circulargauge-position-based-on-percentage.png) @@ -117,10 +125,13 @@ You can render semi or quarter Circular Gauge by modifying the start and end ang + + + ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjVqiVBmKJoTIDfY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLytPNSqewixbwM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Blazor Circular Gauge with Custom Radius and Angle](./images/blazor-circulargauge-custom-radius-angle.png) \ No newline at end of file diff --git a/blazor/circular-gauge/axes.md b/blazor/circular-gauge/axes.md index c05c55225d..d45936342d 100644 --- a/blazor/circular-gauge/axes.md +++ b/blazor/circular-gauge/axes.md @@ -23,11 +23,14 @@ You can customize the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.B + + + ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjhACVBmKWKyenGt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDLojbtoLBLlLFTY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Customizing Blazor Circular Gauge Axis](./images/blazor-circulargauge-axis-customization.png) @@ -41,11 +44,15 @@ The [Minimum](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGa + + + + ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hXVqWLVwgsAcbrhk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLyZPteBhywCRfK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Blazor Circular Gauge Axis with Custom Value](./images/blazor-circulargauge-custom-value.png) @@ -59,11 +66,15 @@ You can sweep the Circular Gauge axis from 0 to 360 degrees. By default, the sta + + + + ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrUWhLGKMTZNUsx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLStPZyVVvOcxbG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Blazor Circular Gauge with Custom Angle](./images/blazor-circulargauge-custom-angle.png) @@ -81,11 +92,15 @@ You can set the radius of the Circular Gauge in pixel as shown below. + + + + ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBqMBLwUiJBVDaN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjrytljoLUsDwego?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Blazor Circular Gauge with Custom Radius](./images/blazor-circulargauge-custom-radius.png) @@ -98,11 +113,16 @@ By setting value in percentage, Circular Gauge gets its dimension with respect t - + + + + + + ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrqWVhGAWzzitMZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBSNbDorUeXHjzc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Changing Blazor Circular Gauge Radius in Percentage](./images/blazor-circulargauge-percentage-radius.png) @@ -122,11 +142,15 @@ By default, [Interval](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C + + + + ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZhgWhVmKsJHpAUv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVStvDorKGQXzJg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Customizing Major and Minor Ticks in Blazor Circular Gauge](./images/blazor-circulargauge-ticks-customization.png) @@ -146,19 +170,23 @@ The minor ticks and major ticks can be positioned using the [Offset](https://hel + + + + ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNBgWVLQgCyNoNBa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLSjPtyVfjjlSvu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Blazor Circular Gauge with Custom Tick Position](./images/blazor-circulargauge-tick-position.png) @@ -176,11 +204,15 @@ The labels of an axis can be customized using the [CircularGaugeAxisLabelFont](h + + + + ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDrgMVVGqsSBmTLZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBSZlXeLTBBhupv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Customizing Blazor Circular Gauge Label](./images/blazor-circulargauge-label.png) @@ -198,14 +230,18 @@ The labels can be moved using the [Offset](https://help.syncfusion.com/cr/blazor - + + + + ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhAWBrwAWyyrioJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjreNltoVfxDIfvT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Changing Label Position of Blazor Circular Gauge](./images/blazor-circulargauge-label-position.png) @@ -220,11 +256,15 @@ The labels can be swept along the axis angle by enabling the [AutoAngle](https:/ + + + + ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLKsLhcgsewVlDw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVIjvtIVfEttGte?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Blazor Circular Gauge Label in AutoAngle](./images/blazor-circulargauge-auto-angle.png) @@ -241,22 +281,26 @@ When an axis makes a complete circle, then the first and last labels of the axis Maximum="12" EndAngle="360" StartAngle="0"> - + Position="Syncfusion.Blazor.CircularGauge.Position.Inside"> + Position="Syncfusion.Blazor.CircularGauge.Position.Inside"> + + + + ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLqMLVcqWSOwmqY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVyDvDIrIKtVTZC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Blazor Circular Gauge with Smart Labels](./images/blazor-circulargauge-smart-label.png) @@ -271,11 +315,15 @@ The axis labels can be formatted using the [Format](https://help.syncfusion.com/ + + + + ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLgsrBGKCdWFyxB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVojbDSBxvbBvim?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Changing Label Format in Blazor Circular Gauge](./images/blazor-circulargauge-label-format.png) @@ -350,11 +398,15 @@ Axis labels support custom label format using placeholder like {value}°C, in + + + + ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZrgirrcgsdzgNwu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hthSZbjyLonAHSmR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Blazor Circular Gauge with Label in Degree Format](./images/blazor-circulargauge-label-in-degree-format.png) @@ -370,11 +422,15 @@ If the maximum value does not enter the interval of major ticks, the last label + + + + ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLqsLVmKCRxmzgP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhStPZILovOOsTf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Displaying Last Label of Blazor Circular Gauge](./images/blazor-circulargauge-last-label.png) @@ -383,16 +439,22 @@ If the maximum value does not enter the interval of major ticks, the last label When the axis labels overlap with each other, you can hide the intersected labels by setting the `HideIntersectingLabel` property to true in the axis. ```cshtml +@using Syncfusion.Blazor.CircularGauge + + + + + ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhAMhrmUWnkrsge?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVSXlXyLHWNwVEk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Hiding Intersecting Axis Labels in Blazor Circular Gauge](./images/blazor-circulargauge-hide-intersecting-label.PNG) @@ -409,11 +471,15 @@ You can change the axis direction of the circular gauge using [Direction](https: + + + + ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhqMVrmUWGVddDA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjrIZPDILxrdQvDx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Changing Axis Direction of Blazor Circular Gauge](./images/blazor-circulargauge-axis-direction.png) diff --git a/blazor/circular-gauge/dimensions.md b/blazor/circular-gauge/dimensions.md index 8d6a27dd3b..ca56fc0c54 100644 --- a/blazor/circular-gauge/dimensions.md +++ b/blazor/circular-gauge/dimensions.md @@ -20,9 +20,17 @@ You can set the size of the Circular Gauge in pixel as demonstrated below. ```cshtml @using Syncfusion.Blazor.CircularGauge - + + + + + + + + + ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNrKihBwKMBZGKzB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBoNvDyhNOaXuis?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Changing Blazor Circular Gauge Size in Pixel](./images/blazor-circulargauge-size.png) @@ -34,11 +42,19 @@ By setting value in percentage, gauge gets its dimension with respect to its con @using Syncfusion.Blazor.CircularGauge
- + + + + + + + + +
``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDhKsVVGACLBzBrP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDBIDljSVWAiPfmX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Changing Blazor Circular Gauge Size in Percentage](./images/blazor-circulargauge-size.png) diff --git a/blazor/circular-gauge/how-to/place-gauge-inside-other-components.md b/blazor/circular-gauge/how-to/place-gauge-inside-other-components.md index 3654b63410..3d172672d4 100644 --- a/blazor/circular-gauge/how-to/place-gauge-inside-other-components.md +++ b/blazor/circular-gauge/how-to/place-gauge-inside-other-components.md @@ -23,10 +23,10 @@ When you drag and resize the Dashboard Layout panel or resize the window, the Ci @using Syncfusion.Blazor.Layouts @using Syncfusion.Blazor.Inputs - - + + - +
Circular Gauge
@if (IsInitialRender) @@ -55,7 +55,7 @@ When you drag and resize the Dashboard Layout panel or resize the window, the Ci } - +
Semi Circular Gauge
@if (IsInitialRender) @@ -83,7 +83,7 @@ When you drag and resize the Dashboard Layout panel or resize the window, the Ci } - +
Arc Gauge
@if (IsInitialRender) @@ -108,7 +108,7 @@ When you drag and resize the Dashboard Layout panel or resize the window, the Ci - +
60/100
 @@ -125,54 +125,59 @@ When you drag and resize the Dashboard Layout panel or resize the window, the Ci @code { SfCircularGauge GaugeOne; SfCircularGauge GaugeTwo; SfCircularGauge GaugeThree; - private Timer _resizeTimer; + SfDashboardLayout DashboardLayout; public bool IsInitialRender { get; set; } public double[] CellSpacing = { 10, 10 }; public async void Created(Object args) { - await Task.Yield(); IsInitialRender = true; } - public async Task ResizingWindow(ResizeArgs args) + public async Task ResizingWindow(Syncfusion.Blazor.Layouts.ResizeArgs args) { - if (_resizeTimer != null) + await DashboardLayout.RefreshAsync(); + await GaugeOne.RefreshAsync(); + await GaugeTwo.RefreshAsync(); + await GaugeThree.RefreshAsync(); + } + + public async Task ResizingHandler(Syncfusion.Blazor.Layouts.ResizeArgs args) + { + if (args.Id == "LayoutOne") { - _resizeTimer.Dispose(); - } - _resizeTimer = new Timer(async _ => + await Task.Delay(100); + GaugeOne.RefreshAsync(); + } else if (args.Id == "LayoutTwo") { - await InvokeAsync(() => - { - RefreshComponents(); - }); - }, null, 500, Timeout.Infinite); + await Task.Delay(100); + GaugeTwo.RefreshAsync(); + } else if (args.Id == "LayoutThree") + { + await Task.Delay(100); + GaugeThree.RefreshAsync(); + } } - - private async Task RefreshComponents() + + protected override async Task OnAfterRenderAsync(bool firstRender) { - await Task.Yield(); - await GaugeOne.RefreshAsync(); - await GaugeTwo.RefreshAsync(); - await GaugeThree.RefreshAsync(); + await Task.Delay(100); + GaugeOne.RefreshAsync(); + GaugeTwo.RefreshAsync(); + GaugeThree.RefreshAsync(); } } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDLAirBcqpadhlqd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjrItvtoJUgQtvDf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Blazor Circular Gauge inside Dashboard Layout component](../images/blazor-circulargauge-with-dashboard-layout.png) @@ -422,140 +427,107 @@ When you expand the Accordion component, the Circular Gauge component is not not @using Syncfusion.Blazor.CircularGauge @using Syncfusion.Blazor.Inputs -
- - - - - Circular Gauge - - @if (IsInitialRender) - { - - - - - - - - - - - - - - - - - - - - - - } - - - - Semi Circular Gauge - + + + + + Circular Gauge + @if (IsInitialRender) { - + - + - - - - - - - - - - - - - - - - - } - - - - Arc Gauge - - @if (IsInitialRender) - { - - - - - - - + - - - - - + + + - - - + + + + + + - - - -
60/100
- - - - - } - - - - -
- -@code{ + + } + + + + Semi Circular Gauge + + @if (IsInitialRender) + { + + + + + + + + + + + + + + + + + + + + + } + + + + Arc Gauge + + @if (IsInitialRender) + { + + + + + + + + + + + + + + + + + + + + + + +
60/100
+ + + + + + + } + + + + + +@code { SfCircularGauge GaugeOne; SfCircularGauge GaugeTwo; SfCircularGauge GaugeThree; @@ -567,7 +539,7 @@ When you expand the Accordion component, the Circular Gauge component is not not IsInitialRender = true; } - public async Task Expand(ExpandedEventArgs args) + public async Task Expand(Syncfusion.Blazor.Navigations.ExpandedEventArgs args) { if (args.Index == 0) { @@ -585,6 +557,6 @@ When you expand the Accordion component, the Circular Gauge component is not not } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVAsVBGASDkmDes?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVeZljSJdxTteqh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Blazor Circular Gauge inside Accordion component](../images/blazor-circulargauge-with-accordion.png) \ No newline at end of file diff --git a/blazor/circular-gauge/images/blazor-circulargauge-auto-angle.png b/blazor/circular-gauge/images/blazor-circulargauge-auto-angle.png index ae71052805..6db4f7433e 100644 Binary files a/blazor/circular-gauge/images/blazor-circulargauge-auto-angle.png and b/blazor/circular-gauge/images/blazor-circulargauge-auto-angle.png differ diff --git a/blazor/circular-gauge/images/blazor-circulargauge-axis-customization.png b/blazor/circular-gauge/images/blazor-circulargauge-axis-customization.png index 38fdcd6cf3..f0aad3dc75 100644 Binary files a/blazor/circular-gauge/images/blazor-circulargauge-axis-customization.png and b/blazor/circular-gauge/images/blazor-circulargauge-axis-customization.png differ diff --git a/blazor/circular-gauge/images/blazor-circulargauge-custom-angle.png b/blazor/circular-gauge/images/blazor-circulargauge-custom-angle.png index 410dd77bd5..9719c6c579 100644 Binary files a/blazor/circular-gauge/images/blazor-circulargauge-custom-angle.png and b/blazor/circular-gauge/images/blazor-circulargauge-custom-angle.png differ diff --git a/blazor/circular-gauge/images/blazor-circulargauge-custom-radius.png b/blazor/circular-gauge/images/blazor-circulargauge-custom-radius.png index 9c2c93ed67..008bb06873 100644 Binary files a/blazor/circular-gauge/images/blazor-circulargauge-custom-radius.png and b/blazor/circular-gauge/images/blazor-circulargauge-custom-radius.png differ diff --git a/blazor/circular-gauge/images/blazor-circulargauge-custom-range.png b/blazor/circular-gauge/images/blazor-circulargauge-custom-range.png index 184f727839..9fd7383662 100644 Binary files a/blazor/circular-gauge/images/blazor-circulargauge-custom-range.png and b/blazor/circular-gauge/images/blazor-circulargauge-custom-range.png differ diff --git a/blazor/circular-gauge/images/blazor-circulargauge-custom-value.png b/blazor/circular-gauge/images/blazor-circulargauge-custom-value.png index 5cedd8536a..430bab803b 100644 Binary files a/blazor/circular-gauge/images/blazor-circulargauge-custom-value.png and b/blazor/circular-gauge/images/blazor-circulargauge-custom-value.png differ diff --git a/blazor/circular-gauge/images/blazor-circulargauge-label-format.png b/blazor/circular-gauge/images/blazor-circulargauge-label-format.png index a65e645df3..d29f49a4a5 100644 Binary files a/blazor/circular-gauge/images/blazor-circulargauge-label-format.png and b/blazor/circular-gauge/images/blazor-circulargauge-label-format.png differ diff --git a/blazor/circular-gauge/images/blazor-circulargauge-label-in-degree-format.png b/blazor/circular-gauge/images/blazor-circulargauge-label-in-degree-format.png index d098b5bca3..6e775234f6 100644 Binary files a/blazor/circular-gauge/images/blazor-circulargauge-label-in-degree-format.png and b/blazor/circular-gauge/images/blazor-circulargauge-label-in-degree-format.png differ diff --git a/blazor/circular-gauge/images/blazor-circulargauge-multiple-axes.png b/blazor/circular-gauge/images/blazor-circulargauge-multiple-axes.png index 4d768a7924..af8134ae5c 100644 Binary files a/blazor/circular-gauge/images/blazor-circulargauge-multiple-axes.png and b/blazor/circular-gauge/images/blazor-circulargauge-multiple-axes.png differ diff --git a/blazor/circular-gauge/images/blazor-circulargauge-percentage-radius.png b/blazor/circular-gauge/images/blazor-circulargauge-percentage-radius.png index a10b15ba56..b49916ee87 100644 Binary files a/blazor/circular-gauge/images/blazor-circulargauge-percentage-radius.png and b/blazor/circular-gauge/images/blazor-circulargauge-percentage-radius.png differ diff --git a/blazor/circular-gauge/images/blazor-circulargauge-radius-in-percentage.png b/blazor/circular-gauge/images/blazor-circulargauge-radius-in-percentage.png index b4e38d103a..dc8a78193a 100644 Binary files a/blazor/circular-gauge/images/blazor-circulargauge-radius-in-percentage.png and b/blazor/circular-gauge/images/blazor-circulargauge-radius-in-percentage.png differ diff --git a/blazor/circular-gauge/images/blazor-circulargauge-rounded-corner-range.png b/blazor/circular-gauge/images/blazor-circulargauge-rounded-corner-range.png index e3eeb38294..008a585825 100644 Binary files a/blazor/circular-gauge/images/blazor-circulargauge-rounded-corner-range.png and b/blazor/circular-gauge/images/blazor-circulargauge-rounded-corner-range.png differ diff --git a/blazor/circular-gauge/images/blazor-circulargauge-size.png b/blazor/circular-gauge/images/blazor-circulargauge-size.png index cb0d3c18bf..7028d5bb80 100644 Binary files a/blazor/circular-gauge/images/blazor-circulargauge-size.png and b/blazor/circular-gauge/images/blazor-circulargauge-size.png differ diff --git a/blazor/circular-gauge/images/blazor-circulargauge-ticks-customization.png b/blazor/circular-gauge/images/blazor-circulargauge-ticks-customization.png index 89876f7947..b0d6a9193d 100644 Binary files a/blazor/circular-gauge/images/blazor-circulargauge-ticks-customization.png and b/blazor/circular-gauge/images/blazor-circulargauge-ticks-customization.png differ diff --git a/blazor/circular-gauge/images/blazor-circulargauge-with-dashboard-layout.png b/blazor/circular-gauge/images/blazor-circulargauge-with-dashboard-layout.png index 9e06409040..cad400856a 100644 Binary files a/blazor/circular-gauge/images/blazor-circulargauge-with-dashboard-layout.png and b/blazor/circular-gauge/images/blazor-circulargauge-with-dashboard-layout.png differ diff --git a/blazor/circular-gauge/legend.md b/blazor/circular-gauge/legend.md index 94a2608b57..3d5bc19ebd 100644 --- a/blazor/circular-gauge/legend.md +++ b/blazor/circular-gauge/legend.md @@ -87,7 +87,7 @@ The following code example shows how to add legend in the gauge. @using Syncfusion.Blazor.CircularGauge - + @@ -108,11 +108,15 @@ The following code example shows how to add legend in the gauge. + + + + ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVUWhBQArOwLnwY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVyNlXeAQZEyZXQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Legend in Blazor Circular Gauge](./images/blazor-circulargauge-legend.PNG) @@ -126,7 +130,7 @@ The toggle option has been provided for legend. So, if you toggle the legend, th @using Syncfusion.Blazor.CircularGauge - + @@ -147,11 +151,15 @@ The toggle option has been provided for legend. So, if you toggle the legend, th + + + + ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hZrKMLBcAhEahQVw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLeNlXyAwivhgeC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Blazor Circular Gauge Legend with Toggle Option](./images/blazor-circulargauge-legend-with-toggle-option.gif) @@ -163,8 +171,7 @@ By default, paging will be enabled if the legend items exceed the legend bounds. @using Syncfusion.Blazor.CircularGauge - - + @@ -184,11 +191,15 @@ By default, paging will be enabled if the legend items exceed the legend bounds. + + + + ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhKWhLGgANsovmK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjBSZvjIgQQNaqeT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Blazor Circular Gauge Legend with Paging](./images/blazor-circulargauge-legend-paging.gif) @@ -200,8 +211,7 @@ You can customize the legend text using `LegendText` property in `CircularGaugeR @using Syncfusion.Blazor.CircularGauge - - + @@ -221,10 +231,14 @@ You can customize the legend text using `LegendText` property in `CircularGaugeR + + + + ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNBUihhmUUjgdbpV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXBINlDyqGddqrJS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Customizing Legend Text in Blazor Circular Gauge](./images/blazor-circulargauge-legend-text.PNG) \ No newline at end of file diff --git a/blazor/circular-gauge/pointers.md b/blazor/circular-gauge/pointers.md index 3524bd80f5..8d72caa136 100644 --- a/blazor/circular-gauge/pointers.md +++ b/blazor/circular-gauge/pointers.md @@ -417,7 +417,7 @@ The pointers are animated on loading the gauge using the [CircularGaugePointerAn ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhUWhVmqBcsUFix?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXBoDPjIApZlKQMw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Blazor Circular Gauge with Pointer Animation](./images/blazor-circulargauge-pointer-animation.gif) diff --git a/blazor/circular-gauge/ranges.md b/blazor/circular-gauge/ranges.md index 6323437b55..fbc2252f52 100644 --- a/blazor/circular-gauge/ranges.md +++ b/blazor/circular-gauge/ranges.md @@ -25,11 +25,15 @@ The start and end values of a range in an axis can be customized using the [Star + + + + ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVgiLLQgiOiCXDt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VthotPZeVwXMSltN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Blazor Circular Gauge with Custom Range](./images/blazor-circulargauge-custom-range.png) @@ -50,11 +54,15 @@ Using [StartWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Circu EndWidth="20"> + + + + ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhKMVLmAMOAiUsW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXBSNFDSrwUWvnam?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Customizing Start and End Width of Range in Blazor Circular Gauge](./images/blazor-circulargauge-width-customization.png) @@ -77,11 +85,15 @@ The color of a range can be customized using the [Color](https://help.syncfusion Opacity="0.2"> + + + + ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hXhKiLLcqWkShlmD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVeDbZoBQzJrmNa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Blazor Circular Gauge Range with Custom Color](./images/blazor-circulargauge-range-color-customization.png) @@ -99,11 +111,15 @@ The ranges can be placed either inside, outside or center of the axis using the + + + + ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLqMLrcKMummhZN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBIXFZSBworOGse?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Changing Blazor Circular Gauge Range Position](./images/blazor-circulargauge-range-position.png) @@ -121,11 +137,15 @@ You can customize the corner radius using the [RoundedCornerRadius](https://help + + + + ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBUsrLQKVDjNwmB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVoNvtSBlNaXQly?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Blazor Circular Gauge Range with Rounded Corner](./images/blazor-circulargauge-rounded-corner-range.png) @@ -147,11 +167,15 @@ You can set a radius of the range in pixel as demonstrated below. + + + + ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLqCBBGKrtreVuz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVotFNyVbrFXTHt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Blazor Circular Gauge Range with Custom Radius in Pixel](./images/blazor-circulargauge-radius-in-pixel.png) @@ -169,11 +193,15 @@ By setting value in percentage, a range gets its dimension with respect to its a + + + + ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBACVLwKVXIyNlD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXheZFZSBPGsJAvr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Blazor Circular Gauge Range with Custom Radius in Percentage](./images/blazor-circulargauge-radius-in-percentage.png) @@ -228,11 +256,15 @@ You can set the range color to ticks and labels of an axis by enabling the [UseR + + + + ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBqChVmAViGyLES?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLoDPtyBPkDvIUn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Blazor Circular Gauge with Multiple Ranges](./images/blazor-circulargauge-multiple-ranges.png) @@ -263,58 +295,58 @@ To apply linear gradient to the range, follow the below code sample. + ImageUrl="https://ej2.syncfusion.com/demos/src/circular-gauge/images/football.png" Radius="100%" MarkerWidth="28" MarkerHeight="28"> + ImageUrl="https://ej2.syncfusion.com/demos/src/circular-gauge/images/basketball.png" Radius="70%" MarkerWidth="28" MarkerHeight="28"> + ImageUrl="https://ej2.syncfusion.com/demos/src/circular-gauge/images/golfball.png" Radius="40%" MarkerWidth="28" MarkerHeight="28"> + ImageUrl="https://ej2.syncfusion.com/demos/src/circular-gauge/images/athletics.png" Radius="0%" MarkerWidth="90" MarkerHeight="90"> + ImageUrl="https://ej2.syncfusion.com/demos/src/circular-gauge/images/girl1.png" Radius="100%" MarkerWidth="28" MarkerHeight="28"> + ImageUrl="https://ej2.syncfusion.com/demos/src/circular-gauge/images/man1.png" Radius="70%" MarkerWidth="28" MarkerHeight="28"> + ImageUrl="https://ej2.syncfusion.com/demos/src/circular-gauge/images/man2.png" Radius="40%" MarkerWidth="28" MarkerHeight="28"> - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + @@ -353,7 +385,7 @@ To apply linear gradient to the range, follow the below code sample. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBgWrrmqhBbMMDq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjBytlDIAFMFugvK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ### Radial gradient @@ -374,58 +406,58 @@ To apply radial gradient to the range, follow the below code sample. - + - + - + - + - + - + - + - - - - - - - - + + + + + + + + - - - - - - - - + + + + + + + + - - - - - - - - + + + + + + + + @@ -464,7 +496,7 @@ To apply radial gradient to the range, follow the below code sample. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXVqiLLcAhUizuIm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjreNFDeKEtKrfOB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## See also