Skip to content

Commit 822341e

Browse files
Saravanan-MadheshSaravanan-Madhesh
authored
Merge pull request #3830 from syncfusion-content/MAUI-996725-Ug-touch-annotation
MAUI-996725 - Added user guide for annotation touch interaction support and floating legend feature
2 parents 018e68b + 5c5025e commit 822341e

File tree

10 files changed

+227
-5
lines changed

10 files changed

+227
-5
lines changed

‎MAUI/Cartesian-Charts/Annotation.md‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -615,4 +615,48 @@ this.Content = chart;
615615

616616
{% endhighlight %}
617617

618+
{% endtabs %}
619+
620+
## Event
621+
622+
**AnnotationTapped**
623+
624+
The [`AnnotationTapped`]() event occurs when an annotation is tapped. The [`AnnotationTappedEventArgs`]() provides the following details:
625+
626+
* [`annotation`]() – the annotation instance that was tapped.
627+
* [`x`]() – the X coordinate of the touch or mouse click position.
628+
* [`y`]() – the Y coordinate of the touch or mouse click position.
629+
630+
## Public methods
631+
632+
The following override methods allow you to handle touch interactions on annotations:
633+
634+
* [`OnTouchDown`]() – triggered when touch starts (down) on the annotation.
635+
* [`OnTouchMove`]() – triggered when moving (dragging) the finger or mouse across the annotation.
636+
* [`OnTouchUp`]() – triggered when touch ends (up) by lifting the finger or releasing the mouse from the annotation.
637+
638+
{% tabs %}
639+
640+
{% highlight c# %}
641+
642+
public class LineAnnotationExt : LineAnnotation
643+
{
644+
protected override void OnTouchDown(float pointX, float pointY)
645+
{
646+
base.OnTouchDown(pointX, pointY);
647+
}
648+
649+
protected override void OnTouchMove(float pointX, float pointY)
650+
{
651+
base.OnTouchMove(pointX, pointY);
652+
}
653+
654+
protected override void OnTouchUp(float pointX, float pointY)
655+
{
656+
base.OnTouchUp(pointX, pointY);
657+
}
658+
}
659+
660+
{% endhighlight %}
661+
618662
{% endtabs %}

‎MAUI/Cartesian-Charts/Legend-images/floating_legend.png‎

50.8 KB
Loading

‎MAUI/Cartesian-Charts/Legend.md‎

Lines changed: 40 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
layout: post
3-
title: Legend in .NET MAUI Chart control | Syncfusion
3+
title: Legend in .NET MAUI Cartesian Chart control | Syncfusion
44
description: This section explains about how to initialize legend and its customization in Syncfusion® .NET MAUI Chart (SfCartesianChart) control.
55
platform: maui
66
control: SfCartesianChart
@@ -233,6 +233,45 @@ this.Content = chart;
233233

234234
{% endtabs %}
235235

236+
## Floating legend
237+
238+
The floating legend feature allows you to position the legend inside the chart area based on its defined placement. When [IsFloating]() is set to true, the legend will start from the specified [Placement](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartLegend.html#Syncfusion_Maui_Charts_ChartLegend_Placement) (such as Top, Bottom, Left, or Right) and then move according to the offset values, enabling precise control over the legend’s location.
239+
240+
* [OffsetX](): Specifies the horizontal distance from the defined placement position.
241+
* [OffsetY](): Specifies the vertical distance from the defined placement position.
242+
243+
{% tabs %}
244+
245+
{% highlight xaml %}
246+
247+
<chart:SfCartesianChart>
248+
<chart:SfCartesianChart.Legend>
249+
<chart:ChartLegend Placement="Top" IsFloating="True" OffsetX="-170" OffsetY="30"/>
250+
</chart:SfCartesianChart.Legend>
251+
</chart:SfCartesianChart>
252+
253+
{% endhighlight %}
254+
255+
{% highlight c# %}
256+
257+
SfCartesianChart chart = new SfCartesianChart();
258+
. . .
259+
chart.Legend = new ChartLegend()
260+
{
261+
Placement = LegendPlacement.Top
262+
IsFloating = true
263+
OffsetX = -170;
264+
OffsetY = 30;
265+
};
266+
267+
this.Content = chart;
268+
269+
{% endhighlight %}
270+
271+
{% endtabs %}
272+
273+
![Floating Legend support in MAUI Cartesian Chart](Legend-images/floating_legend.png)
274+
236275
## Toggle the series visibility
237276
The visibility of series can be controlled by tapping the legend item using the [ToggleSeriesVisibility](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartLegend.html#Syncfusion_Maui_Charts_ChartLegend_ToggleSeriesVisibility) property. The default value of ToggleSeriesVisibility is `false`.
238277

‎MAUI/Circular-Charts/Legend-images/floating_legend.png‎

16.3 KB
Loading

‎MAUI/Circular-Charts/Legend.md‎

Lines changed: 40 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ documentation: ug
88
keywords: .net maui circular chart, chart legend, legend-wrap, legend view, legend layout, chart legend items, legend alignment.
99
---
1010

11-
# Legend in .NET MAUI Chart (SfCircularChart)
11+
# Legend in .NET MAUI Circular Chart (SfCircularChart)
1212
The [Legend](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartBase.html#Syncfusion_Maui_Charts_ChartBase_Legend) provides a list of data points, helping to identify the corresponding data points in the chart. Here's a detailed guide on how to define and customize the legend in the circular chart.
1313

1414
## Defining the legend
@@ -227,6 +227,45 @@ this.Content = chart;
227227

228228
{% endtabs %}
229229

230+
## Floating legend
231+
232+
The floating legend feature allows you to position the legend inside the chart area based on its defined placement. When [IsFloating]() is set to true, the legend will start from the specified [Placement](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartLegend.html#Syncfusion_Maui_Charts_ChartLegend_Placement) (such as Top, Bottom, Left, or Right) and then move according to the offset values, enabling precise control over the legend’s location.
233+
234+
* [OffsetX](): Specifies the horizontal distance from the defined placement position.
235+
* [OffsetY](): Specifies the vertical distance from the defined placement position.
236+
237+
{% tabs %}
238+
239+
{% highlight xaml %}
240+
241+
<chart:SfCircularChart>
242+
<chart:SfCircularChart.Legend>
243+
<chart:ChartLegend Placement="Right" IsFloating="True" OffsetX="-480" OffsetY="10"/>
244+
</chart:SfCircularChart.Legend>
245+
</chart:SfCircularChart>
246+
247+
{% endhighlight %}
248+
249+
{% highlight c# %}
250+
251+
SfCircularChart chart = new SfCircularChart();
252+
253+
chart.Legend = new ChartLegend()
254+
{
255+
Placement = LegendPlacement.Top
256+
IsFloating = true
257+
OffsetX = -170;
258+
OffsetY = 30;
259+
};
260+
. . .
261+
this.Content = chart;
262+
263+
{% endhighlight %}
264+
265+
{% endtabs %}
266+
267+
![Floating Legend support in MAUI Circular Chart](Legend-images/floating_legend.png)
268+
230269
## Toggle the series visibility
231270
The visibility of circular series data points can be controlled by tapping the legend item using the [ToggleSeriesVisibility](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartLegend.html#Syncfusion_Maui_Charts_ChartLegend_ToggleSeriesVisibility) property. The default value of ToggleSeriesVisibility is `false`.
232271

‎MAUI/Funnel-Charts/Legend-images/floating_legend.png‎

20.6 KB
Loading

‎MAUI/Funnel-Charts/Legend.md‎

Lines changed: 50 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
layout: post
3-
title: Legend in .NET MAUI Chart control | Syncfusion
3+
title: Legend in .NET MAUI Funnel Chart control | Syncfusion
44
description: This section explains about how to initialize legend and its customization in Syncfusion® .NET MAUI Chart (SfFunnelChart) control.
55
platform: maui
66
control: SfFunnelChart
@@ -209,6 +209,55 @@ this.Content = chart;
209209

210210
{% endtabs %}
211211

212+
## Floating legend
213+
214+
The floating legend feature allows you to position the legend inside the chart area based on its defined placement. When [IsFloating]() is set to true, the legend will start from the specified [Placement](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartLegend.html#Syncfusion_Maui_Charts_ChartLegend_Placement) (such as Top, Bottom, Left, or Right) and then move according to the offset values, enabling precise control over the legend’s location.
215+
216+
* [OffsetX](): Specifies the horizontal distance from the defined placement position.
217+
* [OffsetY](): Specifies the vertical distance from the defined placement position.
218+
219+
{% tabs %}
220+
221+
{% highlight xaml %}
222+
223+
<chart:SfFunnelChart ItemsSource="{Binding Data}"
224+
XBindingPath="XValue"
225+
YBindingPath="YValue">
226+
<chart:SfFunnelChart.Legend>
227+
<chart:ChartLegend Placement="Right"
228+
IsFloating="True"
229+
OffsetX="-250"
230+
OffsetY="-100"/>
231+
</chart:SfFunnelChart.Legend>
232+
</chart:SfFunnelChart>
233+
234+
{% endhighlight %}
235+
236+
{% highlight c# %}
237+
238+
SfFunnelChart chart = new SfFunnelChart()
239+
{
240+
XBindingPath = "XValue",
241+
YBindingPath = "YValue",
242+
ItemsSource = new ViewModel().Data,
243+
};
244+
245+
chart.Legend = new ChartLegend()
246+
{
247+
Placement = LegendPlacement.Top
248+
IsFloating = true
249+
OffsetX = -170;
250+
OffsetY = 30;
251+
};
252+
253+
this.Content = chart;
254+
255+
{% endhighlight %}
256+
257+
{% endtabs %}
258+
259+
![Floating Legend support in MAUI Funnel Chart](Legend-images/floating_legend.png)
260+
212261
## Toggle the series visibility
213262
The visibility of segments in the funnel chart can be controlled by tapping the legend item using the [ToggleSeriesVisibility](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartLegend.html#Syncfusion_Maui_Charts_ChartLegend_ToggleSeriesVisibility) property. The default value of ToggleSeriesVisibility is `false`.
214263

‎MAUI/Polar-Charts/Legend.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
layout: post
3-
title: Legend in .NET MAUI Chart control | Syncfusion
3+
title: Legend in .NET MAUI Polar Chart control | Syncfusion
44
description: This section explains about how to initialize legend and its customization in Syncfusion® .NET MAUI Chart (SfPolarChart) control.
55
platform: maui
66
control: SfPolarChart

‎MAUI/Pyramid-Charts/Legend-images/floating_legend.png‎

20.4 KB
Loading

‎MAUI/Pyramid-Charts/Legend.md‎

Lines changed: 52 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
layout: post
3-
title: Legend in .NET MAUI Chart control | Syncfusion
3+
title: Legend in .NET MAUI Pyramid Chart control | Syncfusion
44
description: This section explains about how to initialize legend and its customization in Syncfusion® .NET MAUI Chart (SfPyramidChart) control.
55
platform: maui
66
control: SfPyramidChart
@@ -213,6 +213,57 @@ this.Content = chart;
213213

214214
{% endtabs %}
215215

216+
## Floating legend
217+
218+
The floating legend feature allows you to position the legend inside the chart area based on its defined placement. When [IsFloating]() is set to true, the legend will start from the specified [Placement](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartLegend.html#Syncfusion_Maui_Charts_ChartLegend_Placement) (such as Top, Bottom, Left, or Right) and then move according to the offset values, enabling precise control over the legend’s location.
219+
220+
* [OffsetX](): Specifies the horizontal distance from the defined placement position.
221+
* [OffsetY](): Specifies the vertical distance from the defined placement position.
222+
223+
{% tabs %}
224+
225+
{% highlight xaml %}
226+
227+
<chart:SfPyramidChart ItemsSource="{Binding Data}"
228+
XBindingPath="Name"
229+
YBindingPath="Value">
230+
<chart:SfPyramidChart.Legend>
231+
<chart:ChartLegend Placement="Right"
232+
IsFloating="True"
233+
OffsetX="-300"
234+
OffsetY="80">
235+
</chart:ChartLegend>
236+
</chart:SfPyramidChart.Legend>
237+
</chart:SfPyramidChart>
238+
239+
{% endhighlight %}
240+
241+
{% highlight c# %}
242+
243+
SfPyramidChart chart = new SfPyramidChart()
244+
{
245+
XBindingPath = "Name",
246+
YBindingPath = "Value",
247+
ItemsSource = new ViewModel().Data,
248+
249+
};
250+
251+
chart.Legend = new ChartLegend()
252+
{
253+
Placement = LegendPlacement.Top
254+
IsFloating = true
255+
OffsetX = -170;
256+
OffsetY = 30;
257+
};
258+
259+
this.Content = chart;
260+
261+
{% endhighlight %}
262+
263+
{% endtabs %}
264+
265+
![Floating Legend support in MAUI Pyramid Chart](Legend-images/floating_legend.png)
266+
216267
## Toggle the series visibility
217268
The visibility of segments in the pyramid chart can be controlled by tapping the legend item using the [ToggleSeriesVisibility](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartLegend.html#Syncfusion_Maui_Charts_ChartLegend_ToggleSeriesVisibility) property. The default value of ToggleSeriesVisibility is `false`.
218269

0 commit comments

Comments
 (0)