Skip to content

Commit 9f0263a

Browse files
DhanarajRajendranDhanarajRajendran
committed
Addressed the review suggestions.
1 parent 9c5ef0b commit 9f0263a

File tree

7 files changed

+301
-93
lines changed

7 files changed

+301
-93
lines changed

‎MAUI/Cartesian-Charts/Liquid-Glass-Effect.md‎

Lines changed: 90 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,15 @@ N> The liquid glass effect is supported only on `.NET 10` and on `iOS` and `macO
1616

1717
## How it Enhances Chart UI on macOS and iOS
1818

19-
The Liquid Glass Effect enhances chart interactivity with liquid glass effects on tooltips and trackballs, creating a modern and visually appealing data visualization interface that delivers a sophisticated user experience.
19+
The Liquid Glass Effect enhances MAUI SfCartesianChart with a sleek, glassy look and improved interactivity.
2020

21-
## Apply Liquid Glass Effect to SfCartesianChart
21+
- **Tooltip:** Applies a glassy appearance to tooltips for clearer data highlights.
22+
- **Trackball:** Adds a glassy style to trackball labels for precise value inspection.
23+
- **Chart Background:** Wrap the chart in an SfGlassEffectView to give the chart surface a blurred or clear glass background.
2224

23-
Wrap the SfCartesianChart inside an [SfGlassEffectView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfGlassEffectView.html) to give the chart surface a glass (blurred or clear) appearance. SfGlassEffectView is available in the [Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core/) package. To apply the glassy effect to the chart’s tooltips and trackballs, set the [EnableLiquidGlassEffect](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartBase.html#Syncfusion_Maui_Charts_ChartBase_EnableLiquidGlassEffect) property of SfCartesianChart to `True`.
25+
## Apply Liquid Glass Effect to SfCartesianChart Background
26+
27+
Wrap the SfCartesianChart inside an [SfGlassEffectView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfGlassEffectView.html) to give the chart surface a glass (blurred or clear) appearance. SfGlassEffectView is available in the [Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core/) package.
2428

2529
{% tabs %}
2630

@@ -31,7 +35,7 @@ Wrap the SfCartesianChart inside an [SfGlassEffectView](https://help.syncfusion.
3135
EffectType="Regular"
3236
EnableShadowEffect="True">
3337

34-
<chart:SfCartesianChart EnableLiquidGlassEffect="True">
38+
<chart:SfCartesianChart>
3539

3640
<chart:SfCartesianChart.XAxes>
3741
<chart:CategoryAxis />
@@ -53,9 +57,10 @@ Wrap the SfCartesianChart inside an [SfGlassEffectView](https://help.syncfusion.
5357
{% highlight c# %}
5458

5559
SfCartesianChart chart = new SfCartesianChart();
56-
chart.EnableLiquidGlassEffect = true;
60+
5761
chart.XAxes.Add(new CategoryAxis());
5862
chart.YAxes.Add(new NumericalAxis());
63+
5964
chart.Series.Add(new ColumnSeries
6065
{
6166
ItemsSource = viewModel.Data,
@@ -78,6 +83,86 @@ var glass = new SfGlassEffectView
7883

7984
For detailed guidance on SfGlassEffectView, refer to the Getting Started [documentation](https://help.syncfusion.com/maui/liquid-glass-ui/getting-started).
8085

86+
## Enable Liquid Glass Effect to SfCartesianChart Elements
87+
88+
### Tooltip
89+
90+
To Enable Liquid Glass effect to the tooltip, set `True` to [EnableLiquidGlassEffect](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartBase.html#Syncfusion_Maui_Charts_ChartBase_EnableLiquidGlassEffect) property of SfCartesianChart and [EnableTooltip](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_EnableTooltip) property of ChartSeries.
91+
92+
{% tabs %}
93+
94+
{% highlight xaml %}
95+
96+
<chart:SfCartesianChart EnableLiquidGlassEffect="True">
97+
. . .
98+
<chart:ColumnSeries ItemsSource="{Binding Data}"
99+
XBindingPath="Category"
100+
YBindingPath="Value"
101+
EnableTooltip="True">
102+
</chart:ColumnSeries>
103+
</chart:SfCartesianChart>
104+
105+
{% endhighlight %}
106+
107+
{% highlight c# %}
108+
109+
SfCartesianChart chart = new SfCartesianChart();
110+
chart.EnableLiquidGlassEffect = true;
111+
. . .
112+
ColumnSeries series = new ColumnSeries()
113+
{
114+
ItemsSource = viewModel.Data,
115+
XBindingPath = "Category",
116+
YBindingPath = "Value",
117+
EnableTooltip = true
118+
};
119+
120+
chart.Series.Add(series);
121+
this.Content = chart;
122+
123+
{% endhighlight %}
124+
125+
{% endtabs %}
126+
127+
### Trackball
128+
129+
To Enable Liquid Glass effect to the trackball, set `True` to [EnableLiquidGlassEffect](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartBase.html#Syncfusion_Maui_Charts_ChartBase_EnableLiquidGlassEffect) property of SfCartesianChart and [ShowTrackballLabel](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.CartesianSeries.html#Syncfusion_Maui_Charts_CartesianSeries_ShowTrackballLabel) property of ChartSeries
130+
131+
{% tabs %}
132+
133+
{% highlight xaml %}
134+
135+
<chart:SfCartesianChart EnableLiquidGlassEffect="True">
136+
. . .
137+
<chart:LineSeries ItemsSource="{Binding Data}"
138+
XBindingPath="Category"
139+
YBindingPath="Value"
140+
ShowTrackballLabel="True">
141+
</chart:LineSeries>
142+
</chart:SfCartesianChart>
143+
144+
{% endhighlight %}
145+
146+
{% highlight c# %}
147+
148+
SfCartesianChart chart = new SfCartesianChart();
149+
chart.EnableLiquidGlassEffect = true;
150+
. . .
151+
LineSeries series = new LineSeries()
152+
{
153+
ItemsSource = viewModel.Data,
154+
XBindingPath = "Category",
155+
YBindingPath = "Value",
156+
ShowTrackballLabel = true
157+
};
158+
159+
chart.Series.Add(series);
160+
this.Content = chart;
161+
162+
{% endhighlight %}
163+
164+
{% endtabs %}
165+
81166
### Best Practices and Tips
82167

83168
- Host the chart inside an [SfGlassEffectView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfGlassEffectView.html) to give the chart body a glass appearance.

‎MAUI/Circular-Charts/Liquid-Glass-Effect.md‎

Lines changed: 46 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,14 @@ N> The liquid glass effect is supported only on `.NET 10` and on `iOS` and `macO
1616

1717
## How it Enhances Chart UI on macOS and iOS
1818

19-
The Liquid Glass Effect enhances chart interactivity with liquid glass effects on tooltips, creating a modern and visually appealing data visualization interface that delivers a sophisticated user experience.
19+
The Liquid Glass Effect enhances MAUI SfCircularChart with a sleek, glassy look and improved interactivity.
20+
21+
**Tooltip:** Applies a glassy appearance to tooltips for clearer data highlights.
22+
**Chart Background:** Wrap the chart in an SfGlassEffectView to give the chart surface a blurred or clear glass background.
2023

2124
## Apply Liquid Glass Effect to SfCircularChart
2225

23-
Wrap the SfCircularChart inside an [SfGlassEffectView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfGlassEffectView.html) to give the chart surface a glass (blurred or clear) appearance. SfGlassEffectView is available in the [Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core/) package. To apply the glassy effect to the chart’s tooltips, set the [EnableLiquidGlassEffect](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartBase.html#Syncfusion_Maui_Charts_ChartBase_EnableLiquidGlassEffect) property of SfCircularChart to `True`.
26+
Wrap the SfCircularChart inside an [SfGlassEffectView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfGlassEffectView.html) to give the chart surface a glass (blurred or clear) appearance. SfGlassEffectView is available in the [Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core/) package.
2427

2528
{% tabs %}
2629

@@ -31,9 +34,8 @@ Wrap the SfCircularChart inside an [SfGlassEffectView](https://help.syncfusion.c
3134
EffectType="Regular"
3235
EnableShadowEffect="True">
3336

34-
<chart:SfCircularChart EnableLiquidGlassEffect="True">
37+
<chart:SfCircularChart>
3538

36-
<!-- Add your series here -->
3739
<chart:PieSeries
3840
ItemsSource="{Binding Data}"
3941
XBindingPath="Category"
@@ -46,7 +48,6 @@ Wrap the SfCircularChart inside an [SfGlassEffectView](https://help.syncfusion.c
4648
{% highlight c# %}
4749

4850
SfCircularChart chart = new SfCircularChart();
49-
chart.EnableLiquidGlassEffect = true;
5051
chart.Series.Add(new PieSeries
5152
{
5253
ItemsSource = viewModel.Data,
@@ -69,6 +70,46 @@ var glass = new SfGlassEffectView
6970

7071
For detailed guidance on SfGlassEffectView, refer to the Getting Started [documentation](https://help.syncfusion.com/maui/liquid-glass-ui/getting-started).
7172

73+
### Enable Liquid Glass Effect to SfCircularChart Tooltip
74+
75+
To Enable Liquid Glass effect to the tooltip, set `True` to [EnableLiquidGlassEffect](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartBase.html#Syncfusion_Maui_Charts_ChartBase_EnableLiquidGlassEffect) property of SfCircularChart and [EnableTooltip](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_EnableTooltip) property of ChartSeries.
76+
77+
{% tabs %}
78+
79+
{% highlight xaml %}
80+
81+
<chart:SfCircularChart EnableLiquidGlassEffect="True">
82+
. . .
83+
<chart:PieSeries ItemsSource="{Binding Data}"
84+
XBindingPath="Category"
85+
YBindingPath="Value"
86+
EnableTooltip="True">
87+
</chart:PieSeries>
88+
</chart:SfCircularChart>
89+
90+
{% endhighlight %}
91+
92+
{% highlight c# %}
93+
94+
SfCircularChart chart = new SfCircularChart();
95+
chart.EnableLiquidGlassEffect = true;
96+
. . .
97+
PieSeries series = new PieSeries()
98+
{
99+
ItemsSource = viewModel.Data,
100+
XBindingPath = "Category",
101+
YBindingPath = "Value",
102+
EnableTooltip = true
103+
};
104+
105+
chart.Series.Add(series);
106+
this.Content = chart;
107+
108+
{% endhighlight %}
109+
110+
{% endtabs %}
111+
112+
72113
### Best Practices and Tips
73114

74115
- Host the chart inside an [SfGlassEffectView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfGlassEffectView.html) to give the chart body a glass appearance.

‎MAUI/Funnel-Charts/Liquid-Glass-Effect.md‎

Lines changed: 35 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,14 @@ N> The liquid glass effect is supported only on `.NET 10` and on `iOS` and `macO
1616

1717
## How it Enhances Chart UI on macOS and iOS
1818

19-
The Liquid Glass Effect enhances chart interactivity with liquid glass effects on tooltips, creating a modern and visually appealing data visualization interface that delivers a sophisticated user experience.
19+
The Liquid Glass Effect enhances MAUI SfFunnelChart with a sleek, glassy look and improved interactivity.
20+
21+
**Tooltip:** Applies a glassy appearance to tooltips for clearer data highlights.
22+
**Chart Background:** Wrap the chart in an SfGlassEffectView to give the chart surface a blurred or clear glass background.
2023

2124
## Apply Liquid Glass Effect to SfFunnelChart
2225

23-
Wrap the SfFunnelChart inside an [SfGlassEffectView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfGlassEffectView.html) to give the chart surface a glass (blurred or clear) appearance. SfGlassEffectView is available in the [Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core/) package. To apply the glassy effect to the chart’s tooltips, set the [EnableLiquidGlassEffect](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartBase.html#Syncfusion_Maui_Charts_ChartBase_EnableLiquidGlassEffect) property of SfFunnelChart to `True`.
26+
Wrap the SfFunnelChart inside an [SfGlassEffectView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfGlassEffectView.html) to give the chart surface a glass (blurred or clear) appearance. SfGlassEffectView is available in the [Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core/) package.
2427

2528
{% tabs %}
2629

@@ -31,18 +34,14 @@ Wrap the SfFunnelChart inside an [SfGlassEffectView](https://help.syncfusion.com
3134
EffectType="Regular"
3235
EnableShadowEffect="True">
3336

34-
<chart:SfFunnelChart EnableLiquidGlassEffect="True">
35-
. . .
36-
37-
</chart:SfFunnelChart>
37+
<chart:SfFunnelChart/>
3838
</core:SfGlassEffectView>
3939

4040
{% endhighlight %}
4141

4242
{% highlight c# %}
4343

4444
SfFunnelChart chart = new SfFunnelChart();
45-
chart.EnableLiquidGlassEffect = true;
4645

4746
var glass = new SfGlassEffectView
4847
{
@@ -59,6 +58,35 @@ var glass = new SfGlassEffectView
5958

6059
For detailed guidance on SfGlassEffectView, refer to the Getting Started [documentation](https://help.syncfusion.com/maui/liquid-glass-ui/getting-started).
6160

61+
### Enable Liquid Glass Effect to SfFunnelChart Tooltip
62+
63+
To Enable Liquid Glass Effect to the tooltip, set `True` to [EnableLiquidGlassEffect](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartBase.html#Syncfusion_Maui_Charts_ChartBase_EnableLiquidGlassEffect) property and [EnableTooltip](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfFunnelChart.html#Syncfusion_Maui_Charts_SfFunnelChart_EnableTooltip) property of SfFunnelChart.
64+
65+
{% tabs %}
66+
67+
{% highlight xaml %}
68+
69+
<chart:SfFunnelChart EnableLiquidGlassEffect="True"
70+
EnableTooltip="True">
71+
. . .
72+
73+
</chart:SfFunnelChart>
74+
75+
{% endhighlight %}
76+
77+
{% highlight c# %}
78+
79+
SfFunnelChart chart = new SfFunnelChart();
80+
chart.EnableLiquidGlassEffect = true;
81+
chart.EnableTooltip = true;
82+
. . .
83+
84+
this.Content = chart;
85+
86+
{% endhighlight %}
87+
88+
{% endtabs %}
89+
6290
### Best Practices and Tips
6391

6492
- Host the chart inside an [SfGlassEffectView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfGlassEffectView.html) to give the chart body a glass appearance.

‎MAUI/Polar-Charts/Liquid-Glass-Effect.md‎

Lines changed: 45 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,14 @@ N> The liquid glass effect is supported only on `.NET 10` and on `iOS` and `macO
1616

1717
## How it Enhances Chart UI on macOS and iOS
1818

19-
The Liquid Glass Effect enhances chart interactivity with liquid glass effects on tooltips, creating a modern and visually appealing data visualization interface that delivers a sophisticated user experience.
19+
The Liquid Glass Effect enhances MAUI SfPolarChart with a sleek, glassy look and improved interactivity.
20+
21+
**Tooltip:** Applies a glassy appearance to tooltips for clearer data highlights.
22+
**Chart Background:** Wrap the chart in an SfGlassEffectView to give the chart surface a blurred or clear glass background.
2023

2124
## Apply Liquid Glass Effect to SfPolarChart
2225

23-
Wrap the SfPolarChart inside an [SfGlassEffectView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfGlassEffectView.html) to give the chart surface a glass (blurred or clear) appearance. SfGlassEffectView is available in the [Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core/) package. To apply the glassy effect to the chart’s tooltips, set the [EnableLiquidGlassEffect](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartBase.html#Syncfusion_Maui_Charts_ChartBase_EnableLiquidGlassEffect) property of SfPolarChart to `True`.
26+
Wrap the SfPolarChart inside an [SfGlassEffectView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfGlassEffectView.html) to give the chart surface a glass (blurred or clear) appearance. SfGlassEffectView is available in the [Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core/) package.
2427

2528
{% tabs %}
2629

@@ -31,15 +34,8 @@ Wrap the SfPolarChart inside an [SfGlassEffectView](https://help.syncfusion.com/
3134
EffectType="Regular"
3235
EnableShadowEffect="True">
3336

34-
<chart:SfPolarChart EnableLiquidGlassEffect="True">
35-
<chart:SfPolarChart.PrimaryAxis>
36-
<chart:CategoryAxis />
37-
</chart:SfPolarChart.PrimaryAxis>
38-
<chart:SfPolarChart.SecondaryAxis>
39-
<chart:NumericalAxis />
40-
</chart:SfPolarChart.SecondaryAxis>
37+
<chart:SfPolarChart>
4138

42-
<!-- Add your series here -->
4339
<chart:PolarLineSeries
4440
ItemsSource="{Binding Data}"
4541
XBindingPath="Category"
@@ -52,13 +48,6 @@ Wrap the SfPolarChart inside an [SfGlassEffectView](https://help.syncfusion.com/
5248
{% highlight c# %}
5349

5450
SfPolarChart chart = new SfPolarChart();
55-
chart.EnableLiquidGlassEffect = true;
56-
57-
CategoryAxis primaryAxis = new CategoryAxis();
58-
chart.PrimaryAxis = primaryAxis;
59-
60-
NumericalAxis secondaryAxis = new NumericalAxis();
61-
chart.SecondaryAxis = secondaryAxis;
6251

6352
chart.Series.Add(new PolarLineSeries
6453
{
@@ -82,6 +71,45 @@ var glass = new SfGlassEffectView
8271

8372
For detailed guidance on SfGlassEffectView, refer to the Getting Started [documentation](https://help.syncfusion.com/maui/liquid-glass-ui/getting-started).
8473

74+
### Enable Liquid Glass Effect to SfPolarChart Tooltip
75+
76+
To Enable Liquid Glass Effect to the tooltip, set `True` to [EnableLiquidGlassEffect](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartBase.html#Syncfusion_Maui_Charts_ChartBase_EnableLiquidGlassEffect) property of SfPolarChart and [EnableTooltip](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_EnableTooltip) property of ChartSeries.
77+
78+
{% tabs %}
79+
80+
{% highlight xaml %}
81+
82+
<chart:SfPolarChart EnableLiquidGlassEffect="True">
83+
. . .
84+
<chart:PolarLineSeries ItemsSource="{Binding Data}"
85+
XBindingPath="Category"
86+
YBindingPath="Value"
87+
EnableTooltip="True">
88+
</chart:PolarLineSeries>
89+
</chart:SfPolarChart>
90+
91+
{% endhighlight %}
92+
93+
{% highlight c# %}
94+
95+
SfPolarChart chart = new SfPolarChart();
96+
chart.EnableLiquidGlassEffect = true;
97+
. . .
98+
PolarLineSeries series = new PolarLineSeries()
99+
{
100+
ItemsSource = viewModel.Data,
101+
XBindingPath = "Category",
102+
YBindingPath = "Value",
103+
EnableTooltip = true
104+
};
105+
106+
chart.Series.Add(series);
107+
this.Content = chart;
108+
109+
{% endhighlight %}
110+
111+
{% endtabs %}
112+
85113
### Best Practices and Tips
86114

87115
- Host the chart inside an [SfGlassEffectView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfGlassEffectView.html) to give the chart body a glass appearance.

0 commit comments

Comments
 (0)