Latest source merged from Syncfusion

MAUI/Cartesian-Charts/Tooltip.md

@@ -0,0 +1,210 @@
+---
+layout: post
+title: Tooltip in .NET MAUI Chart control | Syncfusion
+description: This section explains about how to enable tooltip and its customization in Syncfusion .NET MAUI Chart (SfCartesianChart) control.
+platform: maui
+control: SfCartesianChart
+documentation: ug
+---
+
+# Tooltip in .NET MAUI Chart (SfCartesianChart)
+
+`SfCartesianChart` provides tooltip support for all series. It is used to show information about the segment, when you tap on the segment. 
+
+## Define Tooltip
+
+To define the tooltip in the series, set the `ShowTooltip` property to true. The default value of `ShowTooltip` property is `false`.
+
+{% tabs %}
+
+{% highlight xaml %}
+
+    <chart:SfCartesianChart>
+    . . .
+        <chart:SfCartesianChart.Series>
+            <chart:ColumnSeries ItemsSource="{Binding Data}" 
+                                XBindingPath="Demand"
+                                YBindingPath="Year2010" 
+                                ShowTooltip="True"/>
+
+            <chart:ColumnSeries ItemsSource="{Binding Data}" 
+                                XBindingPath="Demand"
+                                YBindingPath="Year2011"
+                                ShowTooltip="True"/>
+        </chart:SfCartesianChart.Series>
+    </chart:SfCartesianChart>
+
+{% endhighlight %}
+
+{% highlight c# %}
+
+    SfCartesianChart chart = new SfCartesianChart();
+    . . .
+    ColumnSeries series1 = new ColumnSeries()
+    {
+        ItemsSource = new ViewModel().Data,
+        XBindingPath = "Demand",
+        YBindingPath = "Year2010",
+        ShowTooltip = true
+    };
+
+    ColumnSeries series2 = new ColumnSeries()
+    {
+        ItemsSource = new ViewModel().Data,
+        XBindingPath = "Demand",
+        YBindingPath = "Year2011",
+        ShowTooltip = true
+    };
+
+    chart.Series.Add(series1);
+    chart.Series.Add(series2);
+    this.Content = chart;
+
+{% endhighlight %}
+
+{% endtabs %}
+
+The `ChartTooltipBehavior` is used to customize the tooltip. For customizing the tooltip, create an instance `ChartTooltipBehavior` and add it to the `ChartBehaviors` collection of `SfCartesianChart`. The following properties are used to customize the tooltip:
+
+* `Background` - Used to customize the fill and stroke of the tooltip.
+* `Duration` - Used to set the amount of time that the tooltip remains visible in milliseconds.
+* `TextColor` - Used to set the color for the text of the label.
+* `Margin` - Used to set the margin of the label to customize the appearance of label.
+
+{% tabs %}
+
+{% highlight xaml %}
+
+    <chart:SfCartesianChart.ChartBehaviors>
+        <chart:ChartTooltipBehavior/>
+    </chart:SfCartesianChart.ChartBehaviors>
+
+{% endhighlight %}
+
+{% highlight c# %}
+
+    SfCartesianChart chart = new SfCartesianChart();
+    ChartTooltipBehavior behavior = new ChartTooltipBehavior();
+    chart.ChartBehaviors.Add(behavior);
+
+{% endhighlight %}
+
+{% endtabs %}
+
+## Duration
+
+The `Duration` property is used to specify the duration time in milliseconds for which tooltip will be displayed.
+
+{% tabs %}
+
+{% highlight xaml %}
+
+    <chart:SfCartesianChart>
+    . . .
+        <chart:SfCartesianChart.ChartBehaviors>
+            <chart:ChartTooltipBehavior Duration="5000"/>
+        </chart:SfCartesianChart.ChartBehaviors>
+
+        <chart:SfCartesianChart.Series>
+            <chart:ColumnSeries ItemsSource="{Binding Data}" 
+                                XBindingPath="Demand"
+                                YBindingPath="Year2010" 
+                                ShowTooltip="True"/>
+                    
+            <chart:ColumnSeries ItemsSource="{Binding Data}" 
+                                XBindingPath="Demand"
+                                YBindingPath="Year2011"
+                                ShowTooltip="True"/>
+        </chart:SfCartesianChart.Series>
+
+    </chart:SfCartesianChart>
+
+{% endhighlight %}
+
+{% highlight c# %}
+
+    SfCartesianChart chart = new SfCartesianChart();
+    . . .
+    ChartTooltipBehavior tooltipBehavior = new ChartTooltipBehavior();
+    tooltipBehavior.Duration = 5000;
+    chart.ChartBehaviors.Add(tooltipBehavior);
+
+    ColumnSeries series1 = new ColumnSeries()
+    {
+        ItemsSource = new ViewModel().Data,
+        XBindingPath = "Demand",
+        YBindingPath = "Year2010",
+        ShowTooltip = true
+    };
+
+    ColumnSeries series2 = new ColumnSeries()
+    {
+        ItemsSource = new ViewModel().Data,
+        XBindingPath = "Demand",
+        YBindingPath = "Year2011",
+        ShowTooltip = true
+    };
+
+    chart.Series.Add(series1);
+    chart.Series.Add(series2);
+    this.Content = chart;
+
+{% endhighlight %}
+
+{% endtabs %}
+
+## Template
+
+The `SfCartesianChart` provides support to customize the appearance of the tooltip by using the `TooltipTemplate` property.
+
+{% tabs %}
+
+{% highlight xaml %}
+
+    <chart:SfCartesianChart >
+        <chart:SfCartesianChart.Resources>
+            <DataTemplate x:Key="tooltipTemplate1">
+                <StackLayout Orientation="Horizontal">
+                    <Label Text="{Binding Item.Category}" TextColor="Black" FontAttributes="Bold" FontSize="12" HorizontalOptions="Center" VerticalOptions="Center"/>
+                    <Label Text=" : " TextColor="Black" FontAttributes="Bold" FontSize="12" HorizontalOptions="Center" VerticalOptions="Center"/>
+                    <Label Text="{Binding Item.Value}" TextColor="Black" FontAttributes="Bold" FontSize="12" HorizontalOptions="Center" VerticalOptions="Center"/>
+                </StackLayout>
+            </DataTemplate>
+            . . .
+                
+        </chart:SfCartesianChart.Resources>
+    . . .
+        <chart:SfCartesianChart.Behaviors>
+            <chart:ChartTooltipBehavior/>
+        </chart:SfCartesianChart.Behaviors>
+
+        <chart:SfCartesianChart.Series>
+            <chart:ColumnSeries ItemsSource="{Binding Data}" TooltipTemplate="{StaticResource tooltipTemplate1}"
+                                XBindingPath="Demand"
+                                YBindingPath="Year2010" 
+                                ShowTooltip="True"/>
+        </chart:SfCartesianChart.Series>
+
+    </chart:SfCartesianChart>
+
+{% endhighlight %}
+
+{% highlight c# %}
+
+    SfCartesianChart chart = new SfCartesianChart();
+    . . .
+    ColumnSeries series1 = new ColumnSeries()
+    {
+        ItemsSource = new ViewModel().Data,
+        XBindingPath = "Demand",
+        YBindingPath = "Year2010",
+        ShowTooltip = true,
+        TooltipTemplate = chart.Resources["tooltipTemplate1"] as DataTemplate
+    };
+
+    chart.Series.Add(series1);
+    this.Content = chart;
+        
+{% endhighlight %}
+
+{% endtabs %}

MAUI/RadialGauge/animation.md

@@ -11,7 +11,7 @@ documentation: ug
 
 ## Pointer animation
 
-The `EnableAnimation` property of pointer allows to enable or disable animation for pointer.
+The `EnableAnimation` property of pointer allows you to enable or disable animation for pointer.
 
 {% tabs %}
 
@@ -84,10 +84,11 @@ SfRadialGauge sfRadialGauge = new SfRadialGauge();
 
 {% endtabs %}
 
+![MAUI Radial Gauge Animation](images/animation/maui-radial-gauge-animation.gif)
 
 ## Animation duration
 
-The `AnimationDuration` property of pointer allows to control the animation duration (in milliseconds). The default value of animation duration is 1000ms.
+The pointers `AnimationDuration` property allows you to control the animation duration (in milliseconds). The default value of animation duration is 1000ms.
 
 {% tabs %}
 
@@ -164,9 +165,35 @@ SfRadialGauge sfRadialGauge = new SfRadialGauge();
 
 {% endtabs %}
 
-## Animation Easing
+![MAUI Radial Gauge Animation Duration](images/animation/maui-radial-gauge-animation-duration.gif)
 
-The `AnimationEasing` property of pointer allows you to use different type of easing function. The default value `AnimationEasing` property is `Linear`.
+## Animation easing
+
+The `AnimationEasing` property of pointer allows you to use below type of easing function in pointer animation. 
+
+* `Linear`
+
+* `SinOut`
+
+* `SinIn`
+
+* `SinInOut`
+
+* `CubicIn`
+
+* `CubicOut`
+
+* `CubicInOut`
+
+* `BounceOut`
+
+* `BounceIn`
+
+* `SpringIn`
+
+* `SpringOut`
+
+The default value of `AnimationEasing` property is `Linear`.
 
 {% tabs %}
 

MAUI/RadialGauge/annotation.md

@@ -11,13 +11,13 @@ documentation: ug
 
 Radial axis allows you to add multiple views such as text, icon and image etc., as an annotation to a specific point of interest in the radial gauge.
 
-The following properties are available in `Annotation` to customizes the position and alignment.
+The following properties are available in `Annotation` to customize the position and alignment.
 
 * `DirectionValue` –  Specifies the value that indicates the direction of the annotation based on `DirectionUnit` property. 
 
 * `DirectionUnit` – Specifies the value that indicates the direction of the annotation to be calculated on the basis of `Axis value` or `Angle`.
 
-* `PositionFactor` – Specifies the factor value(from 0 to 1) to adjusts the annotation distance from center point.
+* `PositionFactor` – Specifies the factor value (from 0 to 1) to adjust the annotation distance from the center point.
 
 * `HorizontalAlignment` – Specifies the horizontal alignment for positioning the annotation.
 
@@ -136,9 +136,9 @@ The following example shows how to position the annotation using angle.
 
 ![.NET MAUI Radial Gauge Annotation Position with Angle](images/annotation/maui-radial-gauge-annotation-position-with-angle.png)
 
-### Positioning annotation using axis value
+### Positioning annotation using the axis value
 
-The following example shows how to position the annotation using axis value.
+The following example shows how to position the annotation using the axis value.
 
 {% tabs %}
 
@@ -193,7 +193,7 @@ SfRadialGauge sfRadialGauge = new SfRadialGauge();
 
 ![.NET MAUI Radial Gauge Annotation Position with Axis](images/annotation/maui-radial-gauge-annotation-position-with-axis.png)
 
-`PositionFactor` is used to move the annotation from the center of axis to the edge of the axis. For example, when you specify the `PositionFactor` as 0.5, the annotation will be moved from the center towards the corresponding direction with the distance of half of the radius value of axis.
+`PositionFactor` is used to move the annotation from the center of axis to the edge of the axis. For example, if you specify the `PositionFactor` as 0.5, the annotation will be moved from the center to the corresponding direction by half the radius value of the axis.
 
 By default, the value of `PositionFactor` is 0.
 

MAUI/RadialGauge/axes.md

@@ -1066,7 +1066,7 @@ If the `OffsetUnit` is set as a factor, the provided factor value in the `TickOf
 
 <gauge:SfRadialGauge>
     <gauge:SfRadialGauge.Axes>
-        <gauge:RadialAxis TickOffset="0.5"
+        <gauge:RadialAxis TickOffset="0.1"
                           OffsetUnit="Factor" />
     </gauge:SfRadialGauge.Axes>
 </gauge:SfRadialGauge>
@@ -1078,7 +1078,7 @@ If the `OffsetUnit` is set as a factor, the provided factor value in the `TickOf
 SfRadialGauge sfRadialGauge = new SfRadialGauge();
 
 RadialAxis radialAxis = new RadialAxis();
-radialAxis.TickOffset = 0.5;
+radialAxis.TickOffset = 0.1;
 radialAxis.OffsetUnit = SizeUnit.Factor;
 sfRadialGauge.Axes.Add(radialAxis);
 
@@ -1126,7 +1126,7 @@ The `radial gauge` allows you to add n number of radial axis in its axes collect
                             Maximum="100"
                             Interval="10"
                             MinorTicksPerInterval="5"
-                            RadiusFactor="0.95">
+                            RadiusFactor="0.63">
                     <gauge:RadialAxis.AxisLineStyle>
                         <gauge:RadialLineStyle Fill="#8f1502" Thickness="3"/>
                     </gauge:RadialAxis.AxisLineStyle>
@@ -1180,7 +1180,7 @@ The `radial gauge` allows you to add n number of radial axis in its axes collect
             outerRadialAxis.Maximum = 100;
             outerRadialAxis.Interval = 10;
             outerRadialAxis.MinorTicksPerInterval = 5;
-            outerRadialAxis.RadiusFactor = 0.95;
+            outerRadialAxis.RadiusFactor = 0.63;
             outerRadialAxis.MajorTickStyle.LengthUnit = SizeUnit.Factor;
             outerRadialAxis.MinorTickStyle.LengthUnit = SizeUnit.Factor;
 

MAUI/RadialGauge/getting-started.md

@@ -13,11 +13,11 @@ This section explains the steps required to add the `.NET MAUI Radial Gauge` con
 
 ## Creating an application with .NET MAUI Radial Gauge
 
-1. Create a new .NET MAUI application in the Visual Studio.
+* Create a new .NET MAUI application in the Visual Studio.
 
-2. Syncfusion .NET MAUI components are available in [nuget.org](https://www.nuget.org/). To add SfRadialGauge to your project, open the NuGet package manager in Visual Studio, search for [Syncfusion.Maui.Gauges] and then install it.
+* Syncfusion .NET MAUI components are available in [nuget.org](https://www.nuget.org/). To add SfRadialGauge to your project, open the NuGet package manager in Visual Studio, search for [Syncfusion.Maui.Gauges] and then install it.
 
-3. Import the control namespace `Syncfusion.Maui.Gauges` in XAML or C# code.
+* Import the control namespace `Syncfusion.Maui.Gauges` in XAML or C# code.
 
 {% tabs %}
 
@@ -35,7 +35,7 @@ using Syncfusion.Maui.Gauges;
 
 {% endtabs %}
 
-4. Initialize the SfRadialGauge control
+* Initialize the SfRadialGauge control
 
 {% tabs %}
 
@@ -54,7 +54,7 @@ this.Content = sfRadialGauge;
 
 {% endtabs %}
 
-5. Register the handler
+* Register the handler
 
 Syncfusion.Maui.Core nuget is a dependent package for all Syncfusion controls of .NET MAUI. In the MauiProgram.cs file register the handler for Syncfusion core.
 

MAUI/RadialGauge/overview.md

@@ -16,8 +16,10 @@ The Syncfusion .NET MAUI Radial Gauge is a multi-purpose data visualization cont
 ## Key Features
 
 * **Axes** - The radial gauge axis is a circular arc in which a set of values are displayed along a linear or custom scale based on the design requirements. Axis elements, such as labels, ticks, and axis line, can be easily customized with built-in properties
-* **Ranges** - Gauge range is a visual element that helps to quickly visualize a value where it falls on the axis.
+* **Ranges** - Radial range is a visual element that helps to quickly visualize a value where it falls on the axis.
 * **Pointers** - Pointer is used to indicate values on an axis. Radial gauge has three types of pointers: needle pointer, marker pointer, and range pointer. All the pointers can be customized as needed.
 * **Pointer animation** - Animates the pointer in a visually appealing way when the pointer moves from one value to another.
 * **Pointer interaction** - Radial gauge provides an option to drag a pointer from one value to another. It is used to change the value at run time.
-* **Annotations** - Add multiple controls such as text and image as an annotation to a specific point of interest in a radial gauge.
+* **Annotations** - Add multiple views such as text and image as an annotation to a specific point of interest in a radial gauge.
+
+N> You can get the samples in the [GitHub](https://github.com/syncfusion/maui-demos) link

MAUI/RadialGauge/pointers.md

@@ -112,6 +112,8 @@ this.Content = sfRadialGauge;
 
 {% endtabs %}
 
+![MAUI Radial Gauge Pointer Dragging](images/pointers/maui-radial-gauge-pointer-dragging.gif)
+
 ## Event
 
 `ValueChangeStarted` - Occurs whenever the pointer starts to drag.

MAUI/RadialGauge/ranges.md

@@ -331,7 +331,7 @@ You can set range color to axis labels and ticks using the `UseRangeColorForAxis
                           StartAngle="270"
                           EndAngle="270"
                           UseRangeColorForAxis="True"
-                          RadiusFactor="0.95"
+                          RadiusFactor="0.65"
                           Interval="10"
                           ShowFirstLabel="False"
                           IsInversed="True"
@@ -388,7 +388,7 @@ SfRadialGauge sfRadialGauge = new SfRadialGauge();
             radialAxis.StartAngle = 270;
             radialAxis.EndAngle = 270;
             radialAxis.UseRangeColorForAxis = true;
-            radialAxis.RadiusFactor = 0.95;
+            radialAxis.RadiusFactor = 0.65;
             radialAxis.Interval = 10;
             radialAxis.ShowFirstLabel = false;
             radialAxis.IsInversed = true;

maui-toc.html

@@ -12,6 +12,20 @@
         <ul>
             <li><a href="/maui/cartesian-charts/overview">Overview</a></li>
             <li><a href="/maui/cartesian-charts/getting-started">Getting Started</a></li>
+			 <li>
+                <a href="/maui/cartesian-charts/axis/overview">Axis</a>
+                <ul>
+                    <li><a href="/maui/cartesian-charts/axis/types">Types</a></li>
+                    <li><a href="/maui/cartesian-charts/axis/title">Title</a></li>
+                    <li><a href="/maui/cartesian-charts/axis/axislabels">Axis Labels</a></li>
+                    <li><a href="/maui/cartesian-charts/axis/gridlines">Grid Lines</a></li>
+                    <li><a href="/maui/cartesian-charts/axis/ticklines">Tick Lines</a></li>
+                    <li><a href="/maui/cartesian-charts/axis/axisline">Axis Line</a></li>
+                    <li><a href="/maui/cartesian-charts/axis/padding">Axis Padding</a></li>
+                    <li><a href="/maui/cartesian-charts/axis/range-padding">Axis Range Padding</a></li>
+                </ul>
+            </li>
+            <li><a href="/maui/cartesian-charts/tooltip">Tooltip</a></li>
         </ul>
     </li>
     <li>