Skip to content

Commit 2676e7e

Browse files
Keerthivasan-RamamoorthyKeerthivasan-Ramamoorthy
authored
Merge pull request #6616 from syncfusion-content/982048-BulletChartUGDev
982048: Resolved the UG issues in 3D Chart, bullet Chart and Circular Gauge.
2 parents 5e01a06 + affaa19 commit 2676e7e

File tree

10 files changed

+81
-65
lines changed

10 files changed

+81
-65
lines changed

‎blazor/3D-chart/images/getting-started/blazor-chart-exporting.png‎

16.8 KB
Loading

‎blazor/3D-chart/images/getting-started/blazor-chart-printing.png‎

-1.44 KB
Loading

‎blazor/3D-chart/print-export.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ The rendered 3D chart can be printed directly from the browser by calling the pu
5858
}
5959
6060
```
61-
{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVptnWKMUGlprdU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
61+
{% previewsample "https://blazorplayground.syncfusion.com/embed/rtrotaWGVNdkipal?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
6262

6363
![Printing in Blazor 3D Chart](images/getting-started/blazor-chart-printing.png)
6464

@@ -111,6 +111,6 @@ The rendered 3D chart can be exported to `JPEG`, `PNG`, `SVG`, or `PDF` format u
111111
}
112112
113113
```
114-
{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhJXxCgsqbldGjc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
114+
{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLItkMwhXdAfBmY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
115115

116116
![Exporting in Blazor 3D Chart](images/getting-started/blazor-chart-exporting.png)

‎blazor/bullet-chart/images/blazor-bullet-chart-actual-bar-customization.png‎

550 Bytes
Loading

‎blazor/bullet-chart/images/blazor-bullet-chart-actual-bar.png‎

595 Bytes
Loading

‎blazor/bullet-chart/images/blazor-bullet-chart-dot-actual-bar.png‎

448 Bytes
Loading

‎blazor/circular-gauge/appearance.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ You can add a title to the Circular Gauge using the [Title](https://help.syncfus
2727
</CircularGaugeAxes>
2828
</SfCircularGauge>
2929
```
30-
{% previewsample "https://blazorplayground.syncfusion.com/embed/rDrqMhLwAfAAeKAL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
30+
{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLytkMmVzxeMrwb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
3131

3232
![Blazor Circular Gauge with Title](./images/blazor-circulargauge-title.png)
3333

‎blazor/circular-gauge/dimensions.md‎

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,17 @@ You can set the size of the Circular Gauge in pixel as demonstrated below.
2020
```cshtml
2121
@using Syncfusion.Blazor.CircularGauge
2222
23-
<SfCircularGauge Width= "200px" Height= "200px"></SfCircularGauge>
23+
<SfCircularGauge Width= "200px" Height= "200px">
24+
<CircularGaugeAxes>
25+
<CircularGaugeAxis>
26+
<CircularGaugePointers>
27+
<CircularGaugePointer/>
28+
</CircularGaugePointers>
29+
</CircularGaugeAxis>
30+
</CircularGaugeAxes>
31+
</SfCircularGauge>
2432
```
25-
{% previewsample "https://blazorplayground.syncfusion.com/embed/hNrKihBwKMBZGKzB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
33+
{% previewsample "https://blazorplayground.syncfusion.com/embed/hthItOWmVBPpLJbl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
2634

2735
![Changing Blazor Circular Gauge Size in Pixel](./images/blazor-circulargauge-size.png)
2836

@@ -34,11 +42,19 @@ By setting value in percentage, gauge gets its dimension with respect to its con
3442
@using Syncfusion.Blazor.CircularGauge
3543
3644
<div style="height:450px; width:450px">
37-
<SfCircularGauge Width="50%" Height="50%"></SfCircularGauge>
45+
<SfCircularGauge Width="50%" Height="50%">
46+
<CircularGaugeAxes>
47+
<CircularGaugeAxis>
48+
<CircularGaugePointers>
49+
<CircularGaugePointer/>
50+
</CircularGaugePointers>
51+
</CircularGaugeAxis>
52+
</CircularGaugeAxes>
53+
</SfCircularGauge>
3854
</div>
3955
```
4056

41-
{% previewsample "https://blazorplayground.syncfusion.com/embed/VDhKsVVGACLBzBrP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
57+
{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVetOicVLudqTfx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
4258

4359
![Changing Blazor Circular Gauge Size in Percentage](./images/blazor-circulargauge-size.png)
4460

‎blazor/circular-gauge/how-to/place-gauge-inside-other-components.md‎

Lines changed: 57 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -23,15 +23,15 @@ When you drag and resize the Dashboard Layout panel or resize the window, the Ci
2323
@using Syncfusion.Blazor.Layouts
2424
@using Syncfusion.Blazor.Inputs
2525
26-
<SfDashboardLayout ID="DashBoard" AllowResizing="true" AllowFloating="true" CellSpacing="@CellSpacing" Columns="20">
27-
<DashboardLayoutEvents Created="Created" OnWindowResize="@ResizingWindow" Resizing="@ResizingWindow"></DashboardLayoutEvents>
26+
<SfDashboardLayout ID="DashBoard" AllowResizing="true" AllowFloating="true" CellSpacing="@CellSpacing" Columns="20">
27+
<DashboardLayoutEvents Created="Created" OnWindowResize="@ResizingWindow"></DashboardLayoutEvents>
2828
<DashboardLayoutPanels>
29-
<DashboardLayoutPanel Id="LayoutOne" Row="0" Col="5" SizeX="5" SizeY="7">
29+
<DashboardLayoutPanel Id="LayoutOne" Row="0" Column="5" SizeX="5" SizeY="7">
3030
<HeaderTemplate><div> Circular Gauge </div></HeaderTemplate>
3131
<ContentTemplate>
3232
@if (IsInitialRender)
3333
{
34-
<SfCircularGauge ID="GaugeOne" @ref="GaugeOne" Background="transparent" Height="100%" Width="100%">
34+
<SfCircularGauge ID="GaugeOne" @ref="GaugeOne" Background="transparent" Height="100%" Width="100%">
3535
<CircularGaugeAxes>
3636
<CircularGaugeAxis Radius="80%" StartAngle="230" EndAngle="130">
3737
<CircularGaugeAxisLabelStyle Offset="-1">
@@ -54,72 +54,72 @@ When you drag and resize the Dashboard Layout panel or resize the window, the Ci
5454
</SfCircularGauge>
5555
}
5656
</ContentTemplate>
57-
</DashboardLayoutPanel>
58-
<DashboardLayoutPanel Id="LayoutTwo" Row="1" Col="5" SizeX="5" SizeY="7">
57+
</DashboardLayoutPanel>
58+
<DashboardLayoutPanel Id="LayoutTwo" Row="1" Column="5" SizeX="5" SizeY="7">
5959
<HeaderTemplate><div> Semi Circular Gauge </div></HeaderTemplate>
6060
<ContentTemplate>
6161
@if (IsInitialRender)
6262
{
63-
<SfCircularGauge ID="GaugeTwo" @ref="GaugeTwo" Width="100%" Height="100%" MoveToCenter="true">
64-
<CircularGaugeAxes>
65-
<CircularGaugeAxis Radius="80%" StartAngle="270" EndAngle="90">
66-
<CircularGaugeAxisLabelStyle Offset="-1">
63+
<SfCircularGauge ID="GaugeTwo" @ref="GaugeTwo" Width="100%" Height="100%" MoveToCenter="true">
64+
<CircularGaugeAxes>
65+
<CircularGaugeAxis Radius="80%" StartAngle="270" EndAngle="90">
66+
<CircularGaugeAxisLabelStyle Offset="-1">
6767
<CircularGaugeAxisLabelFont FontFamily="inherit"></CircularGaugeAxisLabelFont>
68-
</CircularGaugeAxisLabelStyle>
69-
<CircularGaugeAxisLineStyle Width="0" Color="white" />
70-
<CircularGaugeAxisMajorTicks Offset="15" />
71-
<CircularGaugeAxisMinorTicks Offset="15" />
72-
<CircularGaugeRanges>
73-
<CircularGaugeRange Start="0" End="40" StartWidth="10" EndWidth="10" Color="Red">
74-
</CircularGaugeRange>
75-
<CircularGaugeRange Start="40" End="70" StartWidth="10" EndWidth="10" Color="Green">
76-
</CircularGaugeRange>
77-
<CircularGaugeRange Start="70" End="100" StartWidth="10" EndWidth="10" Color="Yellow">
78-
</CircularGaugeRange>
79-
</CircularGaugeRanges>
80-
</CircularGaugeAxis>
81-
</CircularGaugeAxes>
82-
</SfCircularGauge>
68+
</CircularGaugeAxisLabelStyle>
69+
<CircularGaugeAxisLineStyle Width="0" Color="white" />
70+
<CircularGaugeAxisMajorTicks Offset="15" />
71+
<CircularGaugeAxisMinorTicks Offset="15" />
72+
<CircularGaugeRanges>
73+
<CircularGaugeRange Start="0" End="40" StartWidth="10" EndWidth="10" Color="Red">
74+
</CircularGaugeRange>
75+
<CircularGaugeRange Start="40" End="70" StartWidth="10" EndWidth="10" Color="Green">
76+
</CircularGaugeRange>
77+
<CircularGaugeRange Start="70" End="100" StartWidth="10" EndWidth="10" Color="Yellow">
78+
</CircularGaugeRange>
79+
</CircularGaugeRanges>
80+
</CircularGaugeAxis>
81+
</CircularGaugeAxes>
82+
</SfCircularGauge>
8383
}
8484
</ContentTemplate>
8585
</DashboardLayoutPanel>
86-
<DashboardLayoutPanel Id="LayoutThree" Row="2" Col="5" SizeX="5" SizeY="7">
86+
<DashboardLayoutPanel Id="LayoutThree" Row="2" Column="5" SizeX="5" SizeY="7">
8787
<HeaderTemplate><div> Arc Gauge </div></HeaderTemplate>
8888
<ContentTemplate>
8989
@if (IsInitialRender)
9090
{
91-
<SfCircularGauge Background="transparent" ID="GaugeThree" @ref="GaugeThree" Width="100%" Height="100%">
92-
<CircularGaugeTitleStyle FontFamily="inherit"></CircularGaugeTitleStyle>
93-
<CircularGaugeAxes>
94-
<CircularGaugeAxis StartAngle="200" EndAngle="160" Minimum="1" Maximum="100" Radius="80%">
95-
<CircularGaugeAxisLineStyle Width="0" />
96-
<CircularGaugeAxisLabelStyle>
97-
<CircularGaugeAxisLabelFont Size="0px" FontFamily="inherit" />
98-
</CircularGaugeAxisLabelStyle>
99-
<CircularGaugeAxisMajorTicks Height="0" />
100-
<CircularGaugeAxisMinorTicks Height="0" />
101-
<CircularGaugeRanges>
102-
<CircularGaugeRange Start="1" End="100" Radius="90%" StartWidth="30" EndWidth="30" Color="#E0E0E0" RoundedCornerRadius="20" />
103-
</CircularGaugeRanges>
104-
<CircularGaugePointers>
105-
<CircularGaugePointer Value="60" RoundedCornerRadius="20" Type="PointerType.RangeBar" Radius="90%" Color="#e5ce20" PointerWidth="30">
106-
<CircularGaugePointerAnimation Enable="false" />
107-
<CircularGaugePointerBorder Width="0" />
108-
</CircularGaugePointer>
109-
</CircularGaugePointers>
110-
<CircularGaugeAnnotations>
111-
<CircularGaugeAnnotation Radius="30%" Angle="90" ZIndex="1">
112-
<ContentTemplate>
113-
<div class="annotationText">60/100</div>
114-
</ContentTemplate>
115-
</CircularGaugeAnnotation>
116-
</CircularGaugeAnnotations>
117-
</CircularGaugeAxis>
118-
</CircularGaugeAxes>
91+
<SfCircularGauge Background="transparent" ID="GaugeThree" @ref="GaugeThree" Width="100%" Height="100%">
92+
<CircularGaugeTitleStyle FontFamily="inherit"></CircularGaugeTitleStyle>
93+
<CircularGaugeAxes>
94+
<CircularGaugeAxis StartAngle="200" EndAngle="160" Minimum="1" Maximum="100" Radius="80%">
95+
<CircularGaugeAxisLineStyle Width="0" />
96+
<CircularGaugeAxisLabelStyle>
97+
<CircularGaugeAxisLabelFont Size="0px" FontFamily="inherit" />
98+
</CircularGaugeAxisLabelStyle>
99+
<CircularGaugeAxisMajorTicks Height="0" />
100+
<CircularGaugeAxisMinorTicks Height="0" />
101+
<CircularGaugeRanges>
102+
<CircularGaugeRange Start="1" End="100" Radius="90%" StartWidth="30" EndWidth="30" Color="#E0E0E0" RoundedCornerRadius="20" />
103+
</CircularGaugeRanges>
104+
<CircularGaugePointers>
105+
<CircularGaugePointer Value="60" RoundedCornerRadius="20" Type="PointerType.RangeBar" Radius="90%" Color="#e5ce20" PointerWidth="30">
106+
<CircularGaugePointerAnimation Enable="false" />
107+
<CircularGaugePointerBorder Width="0" />
108+
</CircularGaugePointer>
109+
</CircularGaugePointers>
110+
<CircularGaugeAnnotations>
111+
<CircularGaugeAnnotation Radius="30%" Angle="90" ZIndex="1">
112+
<ContentTemplate>
113+
<div class="annotationText">60/100</div>
114+
</ContentTemplate>
115+
</CircularGaugeAnnotation>
116+
</CircularGaugeAnnotations>
117+
</CircularGaugeAxis>
118+
</CircularGaugeAxes>
119119
</SfCircularGauge>
120120
}
121121
</ContentTemplate>
122-
</DashboardLayoutPanel>
122+
</DashboardLayoutPanel>
123123
</DashboardLayoutPanels>
124124
</SfDashboardLayout>
125125
@@ -161,7 +161,7 @@ When you drag and resize the Dashboard Layout panel or resize the window, the Ci
161161
});
162162
}, null, 500, Timeout.Infinite);
163163
}
164-
164+
165165
private async Task RefreshComponents()
166166
{
167167
await Task.Yield();
@@ -405,7 +405,7 @@ When you drag and resize the Dialog component, the Circular Gauge component is n
405405
406406
```
407407

408-
{% previewsample "https://blazorplayground.syncfusion.com/embed/hZrUCrrwKojeelUv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
408+
{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLSZkicrHnxtFdb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
409409

410410
![Blazor Circular Gauge inside Dialog component](../images/blazor-circulargauge-with-dialog.png)
411411

‎blazor/circular-gauge/pointers.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -417,7 +417,7 @@ The pointers are animated on loading the gauge using the [CircularGaugePointerAn
417417
</CircularGaugeAxes>
418418
</SfCircularGauge>
419419
```
420-
{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhUWhVmqBcsUFix?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
420+
{% previewsample "https://blazorplayground.syncfusion.com/embed/VXVoNkWwhpogscSG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
421421

422422
![Blazor Circular Gauge with Pointer Animation](./images/blazor-circulargauge-pointer-animation.gif)
423423

0 commit comments

Comments
 (0)