Latest source merged from Syncfusion
This commit is contained in:
pipeline
Родитель
0eb74b14ad
Коммит
aae0c8888a
|
|
@ -0,0 +1,108 @@
|
|||
---
|
||||
layout: post
|
||||
title: Area Chart in .NET MAUI Chart control | Syncfusion
|
||||
description: Learn here all about the area chart types and its features in Syncfusion .NET MAUI Chart (SfCartesianChart) control.
|
||||
platform: maui
|
||||
control: SfCartesianChart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Area Chart in .NET MAUI Chart
|
||||
|
||||
## Area Chart
|
||||
|
||||
The area chart is rendered by using a collection of line segments connected to form a closed loop area, filled with the specified color. To render a area chart, create an instance of [AreaSeries](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.AreaSeries.html?tabs=tabid-1) and add it to the [Series](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html#Syncfusion_Maui_Charts_SfCartesianChart_Series) collection property of the chart.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
{% highlight xaml %}
|
||||
|
||||
<chart:SfCartesianChart>
|
||||
|
||||
<chart:SfCartesianChart.PrimaryAxis>
|
||||
<chart:CategoryAxis />
|
||||
</chart:SfCartesianChart.PrimaryAxis>
|
||||
|
||||
<chart:SfCartesianChart.SecondaryAxis>
|
||||
<chart:NumericalAxis />
|
||||
</chart:SfCartesianChart.SecondaryAxis>
|
||||
|
||||
<chart:SfCartesianChart.Series>
|
||||
<chart:AreaSeries ItemsSource="{Binding Data}" XBindingPath="Demand" YBindingPath="Year2010"/>
|
||||
</chart:SfCartesianChart.Series>
|
||||
|
||||
</chart:SfCartesianChart>
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# %}
|
||||
|
||||
SfCartesianChart chart = new SfCartesianChart();
|
||||
CategoryAxis primaryAxis = new CategoryAxis();
|
||||
chart.PrimaryAxis = primaryAxis;
|
||||
NumericalAxis secondaryAxis = new NumericalAxis();
|
||||
chart.SecondaryAxis = secondaryAxis;
|
||||
|
||||
AreaSeries series = new AreaSeries()
|
||||
{
|
||||
ItemsSource = new ViewModel().Data,
|
||||
XBindingPath = "Demand",
|
||||
YBindingPath = "Year2010",
|
||||
};
|
||||
|
||||
chart.Series.Add(series);
|
||||
this.Content = chart;
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% endtabs %}
|
||||
|
||||
## Spline Area Chart
|
||||
|
||||
The [SplineAreaSeries](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SplineAreaSeries.html?tabs=tabid-1) connects a series of data points using smooth bezier line curves, with the underlying areas filled.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
{% highlight xaml %}
|
||||
|
||||
<chart:SfCartesianChart>
|
||||
|
||||
<chart:SfCartesianChart.PrimaryAxis>
|
||||
<chart:CategoryAxis />
|
||||
</chart:SfCartesianChart.PrimaryAxis>
|
||||
|
||||
<chart:SfCartesianChart.SecondaryAxis>
|
||||
<chart:NumericalAxis />
|
||||
</chart:SfCartesianChart.SecondaryAxis>
|
||||
|
||||
<chart:SfCartesianChart.Series>
|
||||
<chart:SplineAreaSeries ItemsSource="{Binding Data}" XBindingPath="Demand" YBindingPath="Year2010"/>
|
||||
</chart:SfCartesianChart.Series>
|
||||
|
||||
</chart:SfCartesianChart>
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# %}
|
||||
|
||||
SfCartesianChart chart = new SfCartesianChart();
|
||||
CategoryAxis primaryAxis = new CategoryAxis();
|
||||
chart.PrimaryAxis = primaryAxis;
|
||||
NumericalAxis secondaryAxis = new NumericalAxis();
|
||||
chart.SecondaryAxis = secondaryAxis;
|
||||
|
||||
SplineAreaSeries series = new SplineAreaSeries()
|
||||
{
|
||||
ItemsSource = new ViewModel().Data,
|
||||
XBindingPath = "Demand",
|
||||
YBindingPath = "Year2010",
|
||||
};
|
||||
|
||||
chart.Series.Add(series);
|
||||
this.Content = chart;
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
---
|
||||
layout: post
|
||||
title: Column Chart in .NET MAUI Chart control | Syncfusion
|
||||
description: Learn here all about column and bar chart support in Syncfusion .NET MAUI Chart (SfCartesianChart) control.
|
||||
platform: maui
|
||||
control: SfCartesianChart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Column Chart in .NET MAUI Chart
|
||||
|
||||
Column chart is used to plot discrete rectangles for the given data point values. To render a column chart, create an instance of [ColumnSeries](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ColumnSeries.html?tabs=tabid-1), and add it to the [Series](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html#Syncfusion_Maui_Charts_SfCartesianChart_Series) collection property of [SfCartesianChart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html?tabs=tabid-1).
|
||||
|
||||
{% tabs %}
|
||||
|
||||
{% highlight xaml %}
|
||||
|
||||
<chart:SfCartesianChart>
|
||||
|
||||
<chart:SfCartesianChart.PrimaryAxis>
|
||||
<chart:CategoryAxis />
|
||||
</chart:SfCartesianChart.PrimaryAxis>
|
||||
|
||||
<chart:SfCartesianChart.SecondaryAxis>
|
||||
<chart:NumericalAxis />
|
||||
</chart:SfCartesianChart.SecondaryAxis>
|
||||
|
||||
<chart:SfCartesianChart.Series>
|
||||
<chart:ColumnSeries ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue"/>
|
||||
</chart:SfCartesianChart.Series>
|
||||
|
||||
</chart:SfCartesianChart>
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# %}
|
||||
|
||||
SfCartesianChart chart = new SfCartesianChart();
|
||||
CategoryAxis primaryAxis = new CategoryAxis();
|
||||
chart.PrimaryAxis = primaryAxis;
|
||||
NumericalAxis secondaryAxis = new NumericalAxis();
|
||||
chart.SecondaryAxis = secondaryAxis;
|
||||
|
||||
ColumnSeries series = new ColumnSeries()
|
||||
{
|
||||
ItemsSource = new ViewModel().Data,
|
||||
XBindingPath = "XValue",
|
||||
YBindingPath = "YValue",
|
||||
};
|
||||
|
||||
chart.Series.Add(series);
|
||||
this.Content = chart;
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% endtabs %}
|
||||
|
||||
## Spacing and Width
|
||||
|
||||
The [Spacing](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ColumnSeries.html#Syncfusion_Maui_Charts_ColumnSeries_Spacing) property is used to change the spacing between two segments. The default value of spacing is 0, and the value ranges from 0 to 1. Here, 1 and 0 correspond to 100% and 0% of the available space, respectively.
|
||||
|
||||
The [Width](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ColumnSeries.html#Syncfusion_Maui_Charts_ColumnSeries_Width) property is used to change the width of the rectangle. The default value of the width is 0.8, and the value ranges from 0 to 1.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
{% highlight xaml %}
|
||||
|
||||
<chart:SfCartesianChart>
|
||||
|
||||
<chart:SfCartesianChart.PrimaryAxis>
|
||||
<chart:CategoryAxis />
|
||||
</chart:SfCartesianChart.PrimaryAxis>
|
||||
|
||||
<chart:SfCartesianChart.SecondaryAxis>
|
||||
<chart:NumericalAxis />
|
||||
</chart:SfCartesianChart.SecondaryAxis>
|
||||
|
||||
<chart:SfCartesianChart.Series>
|
||||
<chart:ColumnSeries ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue" Spacing="0.5" Width="0.6"/>
|
||||
</chart:SfCartesianChart.Series>
|
||||
|
||||
</chart:SfCartesianChart>
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# %}
|
||||
|
||||
SfCartesianChart chart = new SfCartesianChart();
|
||||
CategoryAxis primaryAxis = new CategoryAxis();
|
||||
chart.PrimaryAxis = primaryAxis;
|
||||
NumericalAxis secondaryAxis = new NumericalAxis();
|
||||
chart.SecondaryAxis = secondaryAxis;
|
||||
|
||||
ColumnSeries series = new ColumnSeries()
|
||||
{
|
||||
ItemsSource = new ViewModel().Data,
|
||||
XBindingPath = "XValue",
|
||||
YBindingPath = "YValue",
|
||||
Spacing = 0.5,
|
||||
Width = "0.6"
|
||||
};
|
||||
|
||||
chart.Series.Add(series);
|
||||
this.Content = chart;
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% endtabs %}
|
||||
|
||||
|
|
@ -0,0 +1,146 @@
|
|||
---
|
||||
layout: post
|
||||
title: Data label in .NET MAUI Chart control | Syncfusion
|
||||
description: This section explains about how to configure the data labels and its features in .NET MAUI Chart (SfCartesianChart).
|
||||
platform: maui
|
||||
control: SfCartesianChart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Data Label in .NET MAUI Chart
|
||||
|
||||
Data labels are used to display values related to a chart segment. Values from data point(x, y) or other custom properties from a data source can be displayed.
|
||||
|
||||
Each data label can be represented by the following:
|
||||
|
||||
* Label - displays the segment label content at the (X, Y) point.
|
||||
* Connector line - used to connect the (X, Y) point and the label element.
|
||||
|
||||
## Enable Data Label
|
||||
|
||||
The [ShowDataLabels](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_ShowDataLabels) property of series is used to enable the data labels.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
{% highlight xaml %}
|
||||
|
||||
<chart:SfCartesianChart>
|
||||
. . .
|
||||
<chart:SfCartesianChart.Series>
|
||||
<chart:ColumnSeries ItemsSource="{Binding Data}"
|
||||
XBindingPath="Category"
|
||||
YBindingPath="Value" ShowDataLabels="True">
|
||||
</chart:ColumnSeries>
|
||||
</chart:SfCartesianChart.Series>
|
||||
|
||||
</chart:SfCartesianChart>
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# %}
|
||||
|
||||
SfCartesianChart chart = new SfCartesianChart();
|
||||
. . .
|
||||
ColumnSeries series = new ColumnSeries()
|
||||
{
|
||||
ItemsSource = viewModel.Data,
|
||||
XBindingPath = "Category",
|
||||
YBindingPath = "Value",
|
||||
ShowDataLabels = true
|
||||
};
|
||||
|
||||
chart.Series.Add(series);
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% endtabs %}
|
||||
|
||||
Data labels can be customized by using the [DataLabelSettings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.CartesianSeries.html#Syncfusion_Maui_Charts_CartesianSeries_DataLabelSettings) property of chart series. For customizing, need to create an instance of [CartesianDataLabelSettings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.CartesianDataLabelSettings.html) and set to the [DataLabelSettings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.CartesianSeries.html#Syncfusion_Maui_Charts_CartesianSeries_DataLabelSettings) property. Following properties are used to customize the data labels which are available in [CartesianDataLabelSettings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.CartesianDataLabelSettings.html).
|
||||
|
||||
* [BarAlignment](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.CartesianDataLabelSettings.html#Syncfusion_Maui_Charts_CartesianDataLabelSettings_BarAlignment) - Gets or sets the data label alignment top, middle or bottom.
|
||||
* [LabelPlacement](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartDataLabelSettings.html#Syncfusion_Maui_Charts_ChartDataLabelSettings_LabelPlacement) - Gets or sets the data label position inside, outside or default.
|
||||
* [LabelStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartDataLabelSettings.html#Syncfusion_Maui_Charts_ChartDataLabelSettings_LabelStyle) - Gets or sets the options for customizing the data labels.
|
||||
* [UseSeriesPalette](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartDataLabelSettings.html#Syncfusion_Maui_Charts_ChartDataLabelSettings_UseSeriesPalette) - Gets or sets a value indicating whether the data label should reflect the series interior.
|
||||
|
||||
## Alignment
|
||||
|
||||
The alignment of data labels inside the series is defined by using the [BarAlignment](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.CartesianDataLabelSettings.html#Syncfusion_Maui_Charts_CartesianDataLabelSettings_BarAlignment) property.
|
||||
|
||||
* [Top](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.Alignment.html#Syncfusion_Maui_Charts_Alignment_Top) - Positions the data label at the top edge point of a chart segment.
|
||||
* [Middle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.Alignment.html#Syncfusion_Maui_Charts_Alignment_Middle) - Positions the data label at the center point of a chart segment.
|
||||
* [Bottom](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.Alignment.html#Syncfusion_Maui_Charts_Alignment_Bottom) - Positions the data label at the bottom edge point of a chart segment.
|
||||
|
||||
N> This behavior varies based on the chart series type.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
{% highlight xaml %}
|
||||
|
||||
<chart:SfCartesianChart>
|
||||
. . .
|
||||
<chart:ColumnSeries ShowDataLabels="True">
|
||||
<chart:ColumnSeries.DataLabelSettings>
|
||||
<chart:CartesianDataLabelSettings BarAlignment="Middle"/>
|
||||
</chart:ColumnSeries.DataLabelSettings>
|
||||
</chart:ColumnSeries>
|
||||
</chart:SfCartesianChart>
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# %}
|
||||
|
||||
SfCartesianChart chart = new SfCartesianChart();
|
||||
ColumnSeries series = new ColumnSeries();
|
||||
. . .
|
||||
series.DataLabelSettings = new CartesianDataLabelSettings()
|
||||
{
|
||||
BarAlignment = Alignment.Middle,
|
||||
};
|
||||
|
||||
chart.Series.Add(series);
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% endtabs %}
|
||||
|
||||
## LabelPlacement
|
||||
|
||||
Other than the above alignment options, Chart providing additional customization option to position the data labels.
|
||||
|
||||
The [LabelPlacement](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartDataLabelSettings.html#Syncfusion_Maui_Charts_ChartDataLabelSettings_LabelPlacement) property is used to position the data labels at [Center](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.Placement.html#Syncfusion_Maui_Charts_Placement_Center), [Inner](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.Placement.html#Syncfusion_Maui_Charts_Placement_Inner) and [Outer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.Placement.html#Syncfusion_Maui_Charts_Placement_Outer) position of the actual data point position. By default, labels are positioned based on the series types for better readability.
|
||||
|
||||
## Applying Series Brush
|
||||
|
||||
[UseSeriesPalette](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartDataLabelSettings.html#Syncfusion_Maui_Charts_ChartDataLabelSettings_UseSeriesPalette) property is used to set the interior of the series to the data marker background.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
{% highlight xaml %}
|
||||
|
||||
<chart:SfCartesianChart>
|
||||
. . .
|
||||
<chart:ColumnSeries ShowDataLabels="True">
|
||||
<chart:ColumnSeries.DataLabelSettings>
|
||||
<chart:CartesianDataLabelSettings UseSeriesPalette="True"/>
|
||||
</chart:ColumnSeries.DataLabelSettings>
|
||||
</chart:ColumnSeries>
|
||||
|
||||
</chart:SfCartesianChart>
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# %}
|
||||
|
||||
SfCartesianChart chart = new SfCartesianChart();
|
||||
ColumnSeries series = new ColumnSeries();
|
||||
. . .
|
||||
series.DataLabelSettings = new CartesianDataLabelSettings()
|
||||
{
|
||||
UseSeriesPalette = true,
|
||||
};
|
||||
|
||||
chart.Series.Add(series);
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% endtabs %}
|
||||
|
|
@ -7,7 +7,7 @@ control: SfCartesianChart
|
|||
documentation: ug
|
||||
---
|
||||
|
||||
# Getting Started with .NET MAUI Chart (SfCartesianChart)
|
||||
# Getting Started with .NET MAUI Chart
|
||||
|
||||
This section explains how to populate the Cartesian chart with data, a title, data labels, a legend, and tooltips, as well as the essential aspects for getting started with the chart.
|
||||
|
||||
|
|
@ -16,7 +16,7 @@ This section explains how to populate the Cartesian chart with data, a title, da
|
|||
1. Create a new .NET MAUI application in Visual Studio.
|
||||
2. Syncfusion .NET MAUI components are available in [nuget.org](https://www.nuget.org/). To add SfCartesianChart to your project, open the NuGet package manager in Visual Studio, search for Syncfusion.Maui.Charts and then install it.
|
||||
3. To initialize the control, import the Chart namespace.
|
||||
4. Initialize [SfCartesianChart](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.SfCartesianChart.html).
|
||||
4. Initialize [SfCartesianChart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html?tabs=tabid-1).
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
@ -159,7 +159,7 @@ this.BindingContext = new ViewModel();
|
|||
|
||||
## Initialize Chart axis
|
||||
|
||||
`ChartAxis` is used to locate the data points inside the chart area. The `PrimaryAxis` and `SecondaryAxis` properties of the chart is used to initialize the axis for the chart.
|
||||
[ChartAxis](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartAxis.html) is used to locate the data points inside the chart area. The [PrimaryAxis](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html#Syncfusion_Maui_Charts_SfCartesianChart_PrimaryAxis) and [SecondaryAxis](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html#Syncfusion_Maui_Charts_SfCartesianChart_SecondaryAxis) properties of the chart is used to initialize the axis for the chart.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
@ -194,9 +194,10 @@ Run the project and check if you get following output to make sure you have conf
|
|||
|
||||
## Populate Chart with data
|
||||
|
||||
As we are going to visualize the comparison of heights in the data model, add `ColumnSeries` to `Series` property of chart, and then bind the `Data` property of the above `ViewModel` to the `ColumnSeries.ItemsSource` as follows.
|
||||
As we are going to visualize the comparison of heights in the data model, add [ColumnSeries](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ColumnSeries.html?tabs=tabid-1) to [Series](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html#Syncfusion_Maui_Charts_SfCartesianChart_Series) property of chart, and then bind the `Data` property of the above `ViewModel` to the `ColumnSeries.ItemsSource` as follows.
|
||||
|
||||
N> You need to set `XBindingPath` and `YBindingPath` properties so that chart will fetch values from the respective properties in the data model to plot the series.
|
||||
N> You need to set [XBindingPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_XBindingPath) and [YBindingPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.XYDataSeries.html#Syncfusion_Maui_Charts_XYDataSeries_YBindingPath)
|
||||
properties so that chart will fetch values from the respective properties in the data model to plot the series.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
@ -259,7 +260,7 @@ N> You need to set `XBindingPath` and `YBindingPath` properties so that chart wi
|
|||
|
||||
## Add a title
|
||||
|
||||
The title of the chart provide quick information to the user about the data being plotted in the chart. The `Title` property is used to set title for the chart as follows.
|
||||
The title of the chart provide quick information to the user about the data being plotted in the chart. The [Title](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartBase.html#Syncfusion_Maui_Charts_ChartBase_Title) property is used to set title for the chart as follows.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
@ -289,7 +290,7 @@ The title of the chart provide quick information to the user about the data bein
|
|||
|
||||
## Enable the data labels
|
||||
|
||||
The `ShowDataLabels` property of series can be used to enable the data labels to improve the readability of the chart. The label visibility is set to `False` by default.
|
||||
The [ShowDataLabels](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_ShowDataLabels) property of series can be used to enable the data labels to improve the readability of the chart. The label visibility is set to `False` by default.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
@ -317,7 +318,7 @@ The `ShowDataLabels` property of series can be used to enable the data labels to
|
|||
|
||||
## Enable a legend
|
||||
|
||||
The legend provides information about the data point displayed in the chart. The `Legend` property of the chart was used to enable it.
|
||||
The legend provides information about the data point displayed in the chart. The [Legend](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartBase.html#Syncfusion_Maui_Charts_ChartBase_Legend) property of the chart was used to enable it.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
@ -373,7 +374,7 @@ N> Additionally, set label for each series using the `Label` property of chart s
|
|||
|
||||
## Enable tooltip
|
||||
|
||||
Tooltips are used to show information about the segment, when a user hovers over a segment. Enable tooltip by setting series `ShowTooltip` property to true.
|
||||
Tooltips are used to show information about the segment, when a user hovers over a segment. Enable tooltip by setting series [ShowTooltip](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_ShowTooltip) property to true.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,258 @@
|
|||
---
|
||||
layout: post
|
||||
title: Line Chart in .NET MAUI Chart control | Syncfusion
|
||||
description: Learn here all about the line chart and its type in Syncfusion .NET MAUI Chart (SfCartesianChart) control.
|
||||
platform: maui
|
||||
control: SfCartesianChart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Line Chart in .NET MAUI Chart
|
||||
|
||||
## Line Chart
|
||||
|
||||
Line chart is used to represent the data trends at equal intervals by connecting points on a plot with straight lines. To render a line chart, create an instance of [LineSeries](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.LineSeries.html?tabs=tabid-1), and add it to the [Series](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html#Syncfusion_Maui_Charts_SfCartesianChart_Series) collection property of [SfCartesianChart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html?tabs=tabid-1)
|
||||
.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
{% highlight xaml %}
|
||||
|
||||
<chart:SfCartesianChart>
|
||||
|
||||
<chart:SfCartesianChart.PrimaryAxis>
|
||||
<chart:CategoryAxis />
|
||||
</chart:SfCartesianChart.PrimaryAxis>
|
||||
|
||||
<chart:SfCartesianChart.SecondaryAxis>
|
||||
<chart:NumericalAxis />
|
||||
</chart:SfCartesianChart.SecondaryAxis>
|
||||
|
||||
<chart:SfCartesianChart.Series>
|
||||
<chart:LineSeries XBindingPath="Demand" ItemsSource="{Binding Data}" YBindingPath="Year2010"/>
|
||||
<chart:LineSeries XBindingPath="Demand" ItemsSource="{Binding Data}" YBindingPath="Year2011"/>
|
||||
</chart:SfCartesianChart.Series>
|
||||
|
||||
</chart:SfCartesianChart>
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# %}
|
||||
|
||||
SfCartesianChart chart = new SfCartesianChart();
|
||||
CategoryAxis primaryAxis = new CategoryAxis();
|
||||
chart.PrimaryAxis = primaryAxis;
|
||||
NumericalAxis secondaryAxis = new NumericalAxis();
|
||||
chart.SecondaryAxis = secondaryAxis;
|
||||
|
||||
LineSeries series1 = new LineSeries()
|
||||
{
|
||||
ItemsSource = new ViewModel().Data,
|
||||
XBindingPath = "Demand",
|
||||
YBindingPath = "Year2010",
|
||||
};
|
||||
|
||||
LineSeries series2 = new LineSeries()
|
||||
{
|
||||
ItemsSource = new ViewModel().Data,
|
||||
XBindingPath = "Demand",
|
||||
YBindingPath = "Year2011",
|
||||
|
||||
};
|
||||
|
||||
chart.Series.Add(series1);
|
||||
chart.Series.Add(series2);
|
||||
|
||||
this.Content = chart;
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% endtabs %}
|
||||
|
||||
### Dashed line
|
||||
|
||||
The [StrokeDashArray](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.LineSeries.html#Syncfusion_Maui_Charts_LineSeries_StrokeDashArray) property of [LineSeries](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.LineSeries.html?tabs=tabid-1) is used to render the line series with dashes. Odd value is considered as rendering size and even value is considered as gap.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
{% highlight xaml %}
|
||||
|
||||
<chart:SfCartesianChart>
|
||||
|
||||
<chart:SfCartesianChart.Resources>
|
||||
<DoubleCollection x:Key="dashArray">
|
||||
<x:Double>5</x:Double>
|
||||
<x:Double>2</x:Double>
|
||||
</DoubleCollection>
|
||||
</chart:SfCartesianChart.Resources>
|
||||
|
||||
<chart:SfCartesianChart.PrimaryAxis>
|
||||
<chart:CategoryAxis />
|
||||
</chart:SfCartesianChart.PrimaryAxis>
|
||||
|
||||
<chart:SfCartesianChart.SecondaryAxis>
|
||||
<chart:NumericalAxis />
|
||||
</chart:SfCartesianChart.SecondaryAxis>
|
||||
|
||||
<chart:SfCartesianChart.Series>
|
||||
<chart:LineSeries XBindingPath="Demand" ItemsSource="{Binding Data}" YBindingPath="Year2010" StrokeDashArray="{StaticResource dashArray}"/>
|
||||
<chart:LineSeries XBindingPath="Demand" ItemsSource="{Binding Data}" YBindingPath="Year2011" StrokeDashArray="{StaticResource dashArray}"/>
|
||||
</chart:SfCartesianChart.Series>
|
||||
|
||||
</chart:SfCartesianChart>
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# %}
|
||||
|
||||
SfCartesianChart chart = new SfCartesianChart();
|
||||
CategoryAxis primaryAxis = new CategoryAxis();
|
||||
chart.PrimaryAxis = primaryAxis;
|
||||
NumericalAxis secondaryAxis = new NumericalAxis();
|
||||
chart.SecondaryAxis = secondaryAxis;
|
||||
|
||||
DoubleCollection doubleCollection = new DoubleCollection();
|
||||
doubleCollection.Add(5);
|
||||
doubleCollection.Add(2);
|
||||
. . .
|
||||
LineSeries series1 = new LineSeries()
|
||||
{
|
||||
ItemsSource = new ViewModel().Data,
|
||||
XBindingPath = "Demand",
|
||||
YBindingPath = "Year2010",
|
||||
StrokeDashArray = doubleCollection
|
||||
|
||||
};
|
||||
|
||||
LineSeries series2 = new LineSeries()
|
||||
{
|
||||
ItemsSource = new ViewModel().Data,
|
||||
XBindingPath = "Demand",
|
||||
YBindingPath = "Year2011",
|
||||
StrokeDashArray = doubleCollection
|
||||
};
|
||||
|
||||
chart.Series.Add(series1);
|
||||
chart.Series.Add(series2);
|
||||
|
||||
this.Content = chart;
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% endtabs %}
|
||||
|
||||
## Spline Chart
|
||||
|
||||
The [SplineSeries](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SplineSeries.html?tabs=tabid-1) resembles line series, but instead of connecting the data points with line segments, the data points are connected by smooth bezier curves.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
{% highlight xaml %}
|
||||
|
||||
<chart:SfCartesianChart>
|
||||
|
||||
<chart:SfCartesianChart.PrimaryAxis>
|
||||
<chart:CategoryAxis />
|
||||
</chart:SfCartesianChart.PrimaryAxis>
|
||||
|
||||
<chart:SfCartesianChart.SecondaryAxis>
|
||||
<chart:NumericalAxis />
|
||||
</chart:SfCartesianChart.SecondaryAxis>
|
||||
|
||||
<chart:SfCartesianChart.Series>
|
||||
<chart:SplineSeries XBindingPath="Demand" ItemsSource="{Binding Data}" YBindingPath="Year2010"/>
|
||||
<chart:SplineSeries XBindingPath="Demand" ItemsSource="{Binding Data}" YBindingPath="Year2011"/>
|
||||
</chart:SfCartesianChart.Series>
|
||||
|
||||
</chart:SfCartesianChart>
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# %}
|
||||
|
||||
SfCartesianChart chart = new SfCartesianChart();
|
||||
CategoryAxis primaryAxis = new CategoryAxis();
|
||||
chart.PrimaryAxis = primaryAxis;
|
||||
NumericalAxis secondaryAxis = new NumericalAxis();
|
||||
chart.SecondaryAxis = secondaryAxis;
|
||||
|
||||
SplineSeries series1 = new SplineSeries()
|
||||
{
|
||||
ItemsSource = new ViewModel().Data,
|
||||
XBindingPath = "Demand",
|
||||
YBindingPath = "Year2010",
|
||||
};
|
||||
|
||||
SplineSeries series2 = new SplineSeries()
|
||||
{
|
||||
ItemsSource = new ViewModel().Data,
|
||||
XBindingPath = "Demand",
|
||||
YBindingPath = "Year2011",
|
||||
};
|
||||
|
||||
chart.Series.Add(series1);
|
||||
chart.Series.Add(series2);
|
||||
|
||||
this.Content = chart;
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% endtabs %}
|
||||
|
||||
### Spline rendering types
|
||||
|
||||
The [Type](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SplineSeries.html#Syncfusion_Maui_Charts_SplineSeries_Type) property allows to change the rendering type of spline curve in series. The default value of [Type](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SplineSeries.html#Syncfusion_Maui_Charts_SplineSeries_Type) is [Natural](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SplineType.html#Syncfusion_Maui_Charts_SplineType_Natural).
|
||||
|
||||
The following types are used in SplineSeries:
|
||||
|
||||
* `Natural`
|
||||
* `Monotonic`
|
||||
* `Cardinal`
|
||||
* `Clamped`
|
||||
|
||||
{% tabs %}
|
||||
|
||||
{% highlight xaml %}
|
||||
|
||||
<chart:SfCartesianChart>
|
||||
|
||||
<chart:SfCartesianChart.PrimaryAxis>
|
||||
<chart:CategoryAxis />
|
||||
</chart:SfCartesianChart.PrimaryAxis>
|
||||
|
||||
<chart:SfCartesianChart.SecondaryAxis>
|
||||
<chart:NumericalAxis />
|
||||
</chart:SfCartesianChart.SecondaryAxis>
|
||||
|
||||
<chart:SfCartesianChart.Series>
|
||||
<chart:SplineSeries XBindingPath="Demand" ItemsSource="{Binding Data}" YBindingPath="Year2010" Type="Cardinal"/>
|
||||
</chart:SfCartesianChart.Series>
|
||||
|
||||
</chart:SfCartesianChart>
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# %}
|
||||
|
||||
SfCartesianChart chart = new SfCartesianChart();
|
||||
CategoryAxis primaryAxis = new CategoryAxis();
|
||||
chart.PrimaryAxis = primaryAxis;
|
||||
NumericalAxis secondaryAxis = new NumericalAxis();
|
||||
chart.SecondaryAxis = secondaryAxis;
|
||||
|
||||
SplineSeries series = new SplineSeries()
|
||||
{
|
||||
ItemsSource = new ViewModel().Data,
|
||||
XBindingPath = "Demand",
|
||||
YBindingPath = "Year2010",
|
||||
Type = SplineType.Cardinal
|
||||
};
|
||||
|
||||
chart.Series.Add(series);
|
||||
|
||||
this.Content = chart;
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% endtabs %}
|
||||
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
---
|
||||
layout: post
|
||||
title: Scatter Chart in .NET MAUI Chart control | Syncfusion
|
||||
description: Learn here all about the scatter chart and its features in Syncfusion .NET MAUI Chart (SfCartesianChart) control.
|
||||
platform: maui
|
||||
control: SfCartesianChart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Scatter Chart in .NET MAUI Chart
|
||||
|
||||
The scatter chart is used to represent the each data point by a dot or circle with equal size.
|
||||
|
||||
## Scatter Chart
|
||||
|
||||
To render a scatter chart, create an instance of [ScatterSeries](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ScatterSeries.html?tabs=tabid-1), and add it to the [Series](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html#Syncfusion_Maui_Charts_SfCartesianChart_Series) collection property of [SfCartesianChart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html?tabs=tabid-1)
|
||||
. The segment size can be defined by using the [Height](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ScatterSeries.html#Syncfusion_Maui_Charts_ScatterSeries_Height) and [Width](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ScatterSeries.html#Syncfusion_Maui_Charts_ScatterSeries_Width) properties.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
{% highlight xaml %}
|
||||
|
||||
<chart:SfCartesianChart>
|
||||
|
||||
<chart:SfCartesianChart.PrimaryAxis>
|
||||
<chart:NumericalAxis />
|
||||
</chart:SfCartesianChart.PrimaryAxis>
|
||||
|
||||
<chart:SfCartesianChart.SecondaryAxis>
|
||||
<chart:NumericalAxis />
|
||||
</chart:SfCartesianChart.SecondaryAxis>
|
||||
|
||||
<chart:SfCartesianChart.Series>
|
||||
<chart:ScatterSeries Height="7" Width="7" ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue"/>
|
||||
</chart:SfCartesianChart.Series>
|
||||
|
||||
</chart:SfCartesianChart>
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# %}
|
||||
|
||||
SfCartesianChart chart = new SfCartesianChart();
|
||||
NumericalAxis primaryAxis = new NumericalAxis();
|
||||
chart.PrimaryAxis = primaryAxis;
|
||||
NumericalAxis secondaryAxis = new NumericalAxis();
|
||||
chart.SecondaryAxis = secondaryAxis;
|
||||
|
||||
ScatterSeries series = new ScatterSeries()
|
||||
{
|
||||
ItemsSource = new ViewModel().Data,
|
||||
XBindingPath = "XValue",
|
||||
YBindingPath = "YValue",
|
||||
Height = 7,
|
||||
Width = 7,
|
||||
};
|
||||
|
||||
chart.Series.Add(series);
|
||||
this.Content = chart;
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% endtabs %}
|
||||
|
|
@ -0,0 +1,174 @@
|
|||
---
|
||||
layout: post
|
||||
title: Selection in .NET MAUI Chart control | Syncfusion
|
||||
description: Learn here all about selection and multi-selection support in Syncfusion .NET MAUI Chart (SfCartesianChart) control.
|
||||
platform: maui
|
||||
control: SfCartesianChart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Selection in .NET MAUI Chart
|
||||
|
||||
Cartesian chart supports selection that allows to select or highlight a segment in the chart by using [ChartSelectionBehavior](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSelectionBehavior.html).
|
||||
|
||||
## Enable Selection
|
||||
|
||||
To enable the selection in chart, create an instance of [ChartSelectionBehavior](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSelectionBehavior.html) and add it to the [ChartBehaviors](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartBase.html#Syncfusion_Maui_Charts_ChartBase_ChartBehaviors) collection of [SfCartesianChart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html?tabs=tabid-1). And also need to set the `SelectionBrush` property to highlight the segment in the chart.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
{% highlight xaml %}
|
||||
|
||||
<chart:SfCartesianChart>
|
||||
. . .
|
||||
<chart:SfCartesianChart.ChartBehaviors>
|
||||
<chart:ChartSelectionBehavior />
|
||||
</chart:SfCartesianChart.ChartBehaviors>
|
||||
|
||||
<chart:ColumnSeries ItemsSource="{Binding Data}"
|
||||
XBindingPath="Demand"
|
||||
YBindingPath="Year2010"
|
||||
SelectionBrush="Green"/>
|
||||
</chart:SfCartesianChart>
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# %}
|
||||
|
||||
SfCartesianChart chart = new SfCartesianChart();
|
||||
. . .
|
||||
ChartSelectionBehavior selection = new ChartSelectionBehavior();
|
||||
chart.ChartBehaviors.Add(selection);
|
||||
|
||||
ColumnSeries series = new ColumnSeries()
|
||||
{
|
||||
ItemsSource = new ViewModel().Data,
|
||||
XBindingPath = "Demand",
|
||||
YBindingPath = "Year2010",
|
||||
SelectionBrush = Brush.Green
|
||||
};
|
||||
|
||||
chart.Series.Add(series);
|
||||
this.Content = chart;
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% endtabs %}
|
||||
|
||||
## Selection Type
|
||||
|
||||
The [Type](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSelectionBehavior.html#Syncfusion_Maui_Charts_ChartSelectionBehavior_Type) property allows users to set selection type of series, which includes [Point](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SelectionType.html#Syncfusion_Maui_Charts_SelectionType_Point) and [None](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SelectionType.html#Syncfusion_Maui_Charts_SelectionType_None). [Type](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSelectionBehavior.html#Syncfusion_Maui_Charts_ChartSelectionBehavior_Type) property with [Point](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SelectionType.html#Syncfusion_Maui_Charts_SelectionType_Point) value is used to select segment in a series and [None](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SelectionType.html) is used to set deselect state for all segments.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
{% highlight xaml %}
|
||||
|
||||
<chart:SfCartesianChart>
|
||||
. . .
|
||||
<chart:SfCartesianChart.ChartBehaviors>
|
||||
<chart:ChartSelectionBehavior Type="Point"/>
|
||||
</chart:SfCartesianChart.ChartBehaviors>
|
||||
|
||||
<chart:SfCartesianChart.Series>
|
||||
<chart:ColumnSeries ItemsSource="{Binding Data}"
|
||||
XBindingPath="Demand"
|
||||
YBindingPath="Year2010"
|
||||
SelectionBrush="Green"/>
|
||||
</chart:SfCartesianChart.Series>
|
||||
|
||||
</chart:SfCartesianChart>
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# %}
|
||||
|
||||
SfCartesianChart chart = new SfCartesianChart();
|
||||
. . .
|
||||
ChartSelectionBehavior selection = new ChartSelectionBehavior();
|
||||
selection.Type = SelectionType.Point;
|
||||
chart.ChartBehaviors.Add(selection);
|
||||
|
||||
ColumnSeries series = new ColumnSeries()
|
||||
{
|
||||
ItemsSource = new ViewModel().Data,
|
||||
XBindingPath = "Demand",
|
||||
YBindingPath = "Year2010",
|
||||
SelectionBrush = Brush.Green
|
||||
};
|
||||
chart.Series.Add(series);
|
||||
this.Content = chart;
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% endtabs %}
|
||||
|
||||
## Selection on initial rendering
|
||||
|
||||
Cartesian chart provides support to select a point programmatically on a chart using the [SelectedIndex](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_SelectedIndex) property of series.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
{% highlight xaml %}
|
||||
|
||||
<chart:SfCartesianChart>
|
||||
. . .
|
||||
<chart:SfCartesianChart.ChartBehaviors>
|
||||
<chart:ChartSelectionBehavior/>
|
||||
</chart:SfCartesianChart.ChartBehaviors>
|
||||
|
||||
<chart:SfCartesianChart.Series>
|
||||
<chart:ColumnSeries ItemsSource="{Binding Data}"
|
||||
XBindingPath="Demand"
|
||||
YBindingPath="Year2010"
|
||||
SelectionBrush="Green"
|
||||
SelectedIndex="3"/>
|
||||
</chart:SfCartesianChart.Series>
|
||||
|
||||
</chart:SfCartesianChart>
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# %}
|
||||
|
||||
SfCartesianChart chart = new SfCartesianChart();
|
||||
. . .
|
||||
ChartSelectionBehavior selection = new ChartSelectionBehavior();
|
||||
chart.ChartBehaviors.Add(selection);
|
||||
|
||||
ColumnSeries series = new ColumnSeries()
|
||||
{
|
||||
ItemsSource = new ViewModel().Data,
|
||||
XBindingPath = "Demand",
|
||||
YBindingPath = "Year2010",
|
||||
SelectionBrush = Brush.Green,
|
||||
SelectedIndex = 3
|
||||
};
|
||||
chart.Series.Add(series);
|
||||
this.Content = chart;
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% endtabs %}
|
||||
|
||||
## Events
|
||||
|
||||
The following selection events are available in the [SfCartesianChart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html?tabs=tabid-1).
|
||||
|
||||
### SelectionChanging
|
||||
|
||||
The [SelectionChanging](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartBase.html#Syncfusion_Maui_Charts_ChartBase_SelectionChanging) event occurs before the data point is being selected. This is a cancelable event. This argument contains the following information.
|
||||
|
||||
* [CurrentIndex](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SelectionEventArgs.html#Syncfusion_Maui_Charts_SelectionEventArgs_CurrentIndex) - Gets the index of currently selected data point.
|
||||
* [PreviousIndex](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SelectionEventArgs.html#Syncfusion_Maui_Charts_SelectionEventArgs_PreviousIndex) - Gets the index of previously selected data point.
|
||||
* [Series](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SelectionEventArgs.html#Syncfusion_Maui_Charts_SelectionEventArgs_Series) - Gets the selected series.
|
||||
* [Cancel](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SelectionChangingEventArgs.html#Syncfusion_Maui_Charts_SelectionChangingEventArgs_Cancel) - Gets or sets a value indicating whether to continue the segment selection.
|
||||
|
||||
|
||||
### SelectionChanged
|
||||
|
||||
The [SelectionChanged](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartBase.html#Syncfusion_Maui_Charts_ChartBase_SelectionChanged) event occurs after a data point has been selected. This argument contains the following information.
|
||||
|
||||
* [CurrentIndex](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SelectionEventArgs.html#Syncfusion_Maui_Charts_SelectionEventArgs_CurrentIndex) - Gets the index of currently selected data point.
|
||||
* [PreviousIndex](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SelectionEventArgs.html#Syncfusion_Maui_Charts_SelectionEventArgs_PreviousIndex) - Gets the index of previously selected data point.
|
||||
* [Series](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SelectionEventArgs.html#Syncfusion_Maui_Charts_SelectionEventArgs_Series) - Gets the selected series.
|
||||
|
||||
|
|
@ -7,13 +7,13 @@ control: SfCartesianChart
|
|||
documentation: ug
|
||||
---
|
||||
|
||||
# Tooltip in .NET MAUI Chart (SfCartesianChart)
|
||||
# Tooltip in .NET MAUI Chart
|
||||
|
||||
`SfCartesianChart` provides tooltip support for all series. It is used to show information about the segment, when you tap on the segment.
|
||||
Tooltip is used to display any information or metadata of the tapped segment. The Cartesian chart provides tooltip support for all series.
|
||||
|
||||
## Define Tooltip
|
||||
|
||||
To define the tooltip in the series, set the `ShowTooltip` property to true. The default value of `ShowTooltip` property is `false`.
|
||||
To define the tooltip in the series, set the [ShowTooltip](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_ShowTooltip) property to true. The default value of [ShowTooltip](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_ShowTooltip) property is `false`.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
@ -64,12 +64,16 @@ To define the tooltip in the series, set the `ShowTooltip` property to true. The
|
|||
|
||||
{% 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:
|
||||
The [ChartTooltipBehavior](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartTooltipBehavior.html) is used to customize the tooltip. For customizing the tooltip, create an instance [ChartTooltipBehavior](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartTooltipBehavior.html) and add it to the [ChartBehaviors](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartBase.html#Syncfusion_Maui_Charts_ChartBase_ChartBehaviors) collection of [SfCircularChart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCircularChart.html). The following properties are used to customize the tooltip:
|
||||
|
||||
* [Background](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Charts_ChartTooltipBehavior_Background) - Gets or sets the background color to the tooltip label.
|
||||
* [FontAttributes](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Charts_ChartTooltipBehavior_FontAttributes) - Gets or sets the font style for the label.
|
||||
* [FontFamily](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Charts_ChartTooltipBehavior_FontFamily) - Gets or sets the font family name for the label.
|
||||
* [FontSize](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Charts_ChartTooltipBehavior_FontSize) - Gets or sets the font size for the label.
|
||||
* [Duration](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Charts_ChartTooltipBehavior_Duration) - Gets or sets the duration of the tooltip text in seconds.
|
||||
* [Margin](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Charts_ChartTooltipBehavior_Margin) - Gets or sets the margin of the label to customize the appearance of label.
|
||||
* [TextColor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Charts_ChartTooltipBehavior_TextColor) - Used to set the color for the text of the label.
|
||||
|
||||
* `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 %}
|
||||
|
||||
|
|
@ -93,7 +97,7 @@ The `ChartTooltipBehavior` is used to customize the tooltip. For customizing the
|
|||
|
||||
## Duration
|
||||
|
||||
The `Duration` property is used to specify the duration time in milliseconds for which tooltip will be displayed.
|
||||
The [Duration](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Charts_ChartTooltipBehavior_Duration) property is used to specify the duration time in milliseconds for which tooltip will be displayed.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
@ -155,7 +159,7 @@ The `Duration` property is used to specify the duration time in milliseconds for
|
|||
|
||||
## Template
|
||||
|
||||
The `SfCartesianChart` provides support to customize the appearance of the tooltip by using the `TooltipTemplate` property.
|
||||
The [SfCartesianChart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html?tabs=tabid-1) provides support to customize the appearance of the tooltip by using the [TooltipTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_TooltipTemplate) property.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,208 @@
|
|||
---
|
||||
layout: post
|
||||
title: Zooming and Panning in .NET MAUI Chart control | Syncfusion
|
||||
description: Learn here all about Zooming and Panning feature of Syncfusion .NET MAUI Chart(SfCartesianChart) control.
|
||||
platform: maui
|
||||
control: SfCartesianChart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Zooming and Panning in .NET MAUI Chart
|
||||
|
||||
[SfCartesianChart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html?tabs=tabid-1) allows you to zoom the chart area with the help of the zoom feature. This behavior is mostly used to view the data point in the specific area, when there are large number of data points inside the chart.
|
||||
|
||||
Zooming and panning provides you to take a close-up look of the data point plotted in the series
|
||||
|
||||
## Enable Zooming
|
||||
|
||||
To enable the zooming and panning in the chart, create an instance of [ChartZoomPanBehavior](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartZoomPanBehavior.html?tabs=tabid-1) and add it to the [ChartBehaviors](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartBase.html#Syncfusion_Maui_Charts_ChartBase_ChartBehaviors) collection of [SfCartesianChart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html?tabs=tabid-1).
|
||||
|
||||
{% tabs %}
|
||||
|
||||
{% highlight xml %}
|
||||
|
||||
<chart:SfCartesianChart>
|
||||
...
|
||||
<chart:SfCartesianChart.ChartBehaviors>
|
||||
<chart:ChartZoomPanBehavior />
|
||||
</chart:SfCartesianChart.ChartBehaviors>
|
||||
</chart:SfCartesianChart>
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# %}
|
||||
|
||||
SfCartesianChart chart = new SfCartesianChart();
|
||||
...
|
||||
ChartZoomPanBehavior zooming = new ChartZoomPanBehavior();
|
||||
chart.ChartBehaviors.Add(zooming);
|
||||
...
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% endtabs %}
|
||||
|
||||
## Zooming the Plot Area
|
||||
|
||||
Zooming the plot area can be achieved by pinch zooming, and also using the properties [ZoomFactor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartAxis.html#Syncfusion_Maui_Charts_ChartAxis_ZoomFactor) and [ZoomPosition](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartAxis.html#Syncfusion_Maui_Charts_ChartAxis_ZoomPosition).
|
||||
|
||||
### Pinch Zooming
|
||||
|
||||
Pinch zooming is enable by using the [EnablePinchZooming](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartZoomPanBehavior.html#Syncfusion_Maui_Charts_ChartZoomPanBehavior_EnablePinchZooming) property to `true` as shown in the below code snippet.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
{% highlight xml %}
|
||||
|
||||
<chart:SfCartesianChart>
|
||||
<chart:SfCartesianChart.ChartBehaviors>
|
||||
<chart:ChartZoomPanBehavior EnablePinchZooming="True"/>
|
||||
</chart:SfCartesianChart.ChartBehaviors>
|
||||
...
|
||||
</chart:SfCartesianChart>
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# %}
|
||||
|
||||
SfCartesianChart chart = new SfCartesianChart();
|
||||
...
|
||||
ChartZoomPanBehavior zooming = new ChartZoomPanBehavior()
|
||||
{
|
||||
EnablePinchZooming = true
|
||||
};
|
||||
|
||||
chart.ChartBehaviors.Add(zooming);
|
||||
...
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% endtabs %}
|
||||
|
||||
### Zooming by setting ZoomFactor and ZoomPosition
|
||||
|
||||
[ZoomFactor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartAxis.html#Syncfusion_Maui_Charts_ChartAxis_ZoomFactor) defines the percentage of visible range from the total range of axis values. [ZoomPosition](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartAxis.html#Syncfusion_Maui_Charts_ChartAxis_ZoomPosition) defines the position for ranges of values that need to be displayed as a result of [ZoomFactor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartAxis.html#Syncfusion_Maui_Charts_ChartAxis_ZoomFactor).
|
||||
|
||||
{% tabs %}
|
||||
|
||||
{% highlight xaml %}
|
||||
|
||||
<chart:SfCartesianChart>
|
||||
<chart:SfCartesianChart.PrimaryAxis>
|
||||
<chart:CategoryAxis ZoomFactor="0.3" ZoomPosition="0.5"/>
|
||||
</chart:SfCartesianChart.PrimaryAxis>
|
||||
...
|
||||
</chart:SfCartesianChart>
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# %}
|
||||
|
||||
SfCartesianChart chart = new SfCartesianChart();
|
||||
chart.PrimaryAxis = new CategoryAxis()
|
||||
{
|
||||
ZoomFactor = 0.3,
|
||||
ZoomPosition = 0.5
|
||||
};
|
||||
...
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% endtabs %}
|
||||
|
||||
## Zooming Mode
|
||||
|
||||
The zooming can be done both horizontally and vertically. The zooming direction is defined by using the [ZoomMode](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartZoomPanBehavior.html#Syncfusion_Maui_Charts_ChartZoomPanBehavior_ZoomMode) property.
|
||||
|
||||
Following code example illustrates how to restrict the chart to be zoomed only along horizontal axis.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
{% highlight xml %}
|
||||
|
||||
<chart:SfCartesianChart>
|
||||
<chart:SfCartesianChart.ChartBehaviors>
|
||||
<chart:ChartZoomPanBehavior ZoomMode="X" />
|
||||
</chart:SfCartesianChart.ChartBehaviors>
|
||||
...
|
||||
</chart:SfCartesianChart>
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# %}
|
||||
|
||||
SfCartesianChart chart = new SfCartesianChart();
|
||||
...
|
||||
ChartZoomPanBehavior zooming = new ChartZoomPanBehavior()
|
||||
{
|
||||
ZoomMode = ZoomMode.X
|
||||
};
|
||||
|
||||
chart.ChartBehaviors.Add(zooming);
|
||||
...
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% endtabs %}
|
||||
|
||||
Following code example illustrates how to restrict the chart to be zoomed only along vertical axis.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
{% highlight xml %}
|
||||
|
||||
<chart:SfCartesianChart>
|
||||
<chart:SfCartesianChart.ChartBehaviors>
|
||||
<chart:ChartZoomPanBehavior ZoomMode="Y" />
|
||||
</chart:SfCartesianChart.ChartBehaviors>
|
||||
...
|
||||
</chart:SfCartesianChart>
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# %}
|
||||
|
||||
SfCartesianChart chart = new SfCartesianChart();
|
||||
ChartZoomPanBehavior zooming = new ChartZoomPanBehavior()
|
||||
{
|
||||
ZoomMode = ZoomMode.Y
|
||||
};
|
||||
|
||||
chart.ChartBehaviors.Add(zooming);
|
||||
...
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% endtabs %}
|
||||
|
||||
## Enable Panning
|
||||
|
||||
Panning feature allows moving the visible area of the chart when it is zoomed in. To enable panning, you have to set [EnablePanning](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartZoomPanBehavior.html#Syncfusion_Maui_Charts_ChartZoomPanBehavior_EnablePanning) property to `true`.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
{% highlight xml %}
|
||||
|
||||
<chart:SfCartesianChart>
|
||||
<chart:SfCartesianChart.ChartBehaviors>
|
||||
<chart:ChartZoomPanBehavior EnablePanning="True"/>
|
||||
</chart:SfCartesianChart.ChartBehaviors>
|
||||
...
|
||||
</chart:SfCartesianChart>
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# %}
|
||||
|
||||
SfCartesianChart chart = new SfCartesianChart();
|
||||
ChartZoomPanBehavior zooming = new ChartZoomPanBehavior()
|
||||
{
|
||||
EnablePanning = true
|
||||
};
|
||||
|
||||
chart.ChartBehaviors.Add(zooming);
|
||||
...
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% endtabs %}
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
---
|
||||
layout: post
|
||||
title: Data label in .NET MAUI Chart control | .NET MAUI | Syncfusion
|
||||
description: This section explains about how to configure the data labels and its features in .NET MAUI Chart (SfCircularChart).
|
||||
platform: maui
|
||||
control: SfCircularChart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Data Label in .NET MAUI Chart
|
||||
|
||||
Data labels are used to display values related to a chart segment. Values from data point(x, y) or other custom properties from a data source can be displayed.
|
||||
|
||||
Each data label can be represented by the following:
|
||||
|
||||
* Label - displays the segment label content at the (X, Y) point.
|
||||
* Connector line - used to connect the (X, Y) point and the label element.
|
||||
|
||||
## Enable Data Label
|
||||
|
||||
[ShowDataLabels](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_ShowDataLabels) property of series is used to enable the data labels.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
{% highlight xaml %}
|
||||
|
||||
<chart:SfCircularChart>
|
||||
. . .
|
||||
<chart:PieSeries ShowDataLabels="True"
|
||||
ItemsSource="{Binding Data}"
|
||||
XBindingPath="Product"
|
||||
YBindingPath="SalesRate"/>
|
||||
. . .
|
||||
</chart:SfCircularChart>
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# %}
|
||||
|
||||
SfCircularChart chart = new SfCircularChart();
|
||||
. . .
|
||||
PieSeries series = new PieSeries();
|
||||
series.ShowDataLabels = true;
|
||||
. . .
|
||||
chart.Series.Add(series);
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% endtabs %}
|
||||
|
||||
Data labels can be customized by using the [DataLabelSettings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.CircularSeries.html#Syncfusion_Maui_Charts_CircularSeries_DataLabelSettings) property of chart series. For customizing, need to create an instance of [CircularDataLabelSettings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.CircularDataLabelSettings.html) and set to the [DataLabelSettings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.CircularSeries.html#Syncfusion_Maui_Charts_CircularSeries_DataLabelSettings) property. Following properties are used to customize the data labels which are available in [CircularDataLabelSettings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.CircularDataLabelSettings.html).
|
||||
|
||||
* [ConnectorType](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.CircularDataLabelSettings.html#Syncfusion_Maui_Charts_CircularDataLabelSettings_ConnectorType) - Gets or sets the type of connector line to be drawn.
|
||||
* [LabelStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartDataLabelSettings.html#Syncfusion_Maui_Charts_ChartDataLabelSettings_LabelStyle) - Gets or sets the options for customizing the data labels.
|
||||
* [UseSeriesPalette](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartDataLabelSettings.html#Syncfusion_Maui_Charts_ChartDataLabelSettings_UseSeriesPalette) - Gets or sets a value indicating whether the data label should reflect the series interior.
|
||||
|
||||
## Applying Series Brush
|
||||
|
||||
[UseSeriesPalette](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartDataLabelSettings.html#Syncfusion_Maui_Charts_ChartDataLabelSettings_UseSeriesPalette) property is used to set the interior of the series to the data label background.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
{% highlight xaml %}
|
||||
|
||||
<chart:SfCircularChart>
|
||||
. . .
|
||||
<chart:PieSeries ShowDataLabels="True">
|
||||
<chart:PieSeries.DataLabelSettings>
|
||||
<chart:CircularDataLabelSettings UseSeriesPalette="True"/>
|
||||
</chart:PieSeries.DataLabelSettings>
|
||||
</chart:PieSeries>
|
||||
|
||||
</chart:SfCircularChart>
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# %}
|
||||
|
||||
SfCircularChart chart = new SfCircularChart();
|
||||
. . .
|
||||
PieSeries series = new PieSeries();
|
||||
series.ShowDataLabels = true;
|
||||
series.DataLabelSettings = new CircularDataLabelSettings()
|
||||
{
|
||||
UseSeriesPalette = true,
|
||||
};
|
||||
|
||||
chart.Series.Add(series);
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% endtabs %}
|
||||
|
||||
|
|
@ -0,0 +1,112 @@
|
|||
---
|
||||
layout: post
|
||||
title: Doughnut chart in .NET MAUI Chart Chart control | Syncfusion
|
||||
description: Learn here all about doughnut chart and its features in Syncfusion .NET MAUI Chart Chart (SfCircularChart) control.
|
||||
platform: maui
|
||||
control: SfCircularChart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Doughnut Chart in .NET MAUI Chart Chart
|
||||
|
||||
[DoughnutSeries](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.DoughnutSeries.html) is similar to [PieSeries](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.PieSeries.html). It is used to show the relationship between parts of data and whole data. To render a [DoughnutSeries](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.DoughnutSeries.html) in circular chart, create an instance of the [DoughnutSeries](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.DoughnutSeries.html) and add it to the [Series](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCircularChart.html#Syncfusion_Maui_Charts_SfCircularChart_Series) collection property of [SfCircularChart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCircularChart.html).
|
||||
|
||||
{% tabs %}
|
||||
|
||||
{% highlight xaml %}
|
||||
|
||||
<chart:SfCircularChart>
|
||||
|
||||
<chart:SfCircularChart.Series>
|
||||
<chart:DoughnutSeries ItemsSource="{Binding Data}"
|
||||
XBindingPath="Product"
|
||||
YBindingPath="SalesRate" />
|
||||
</chart:SfCircularChart.Series>
|
||||
|
||||
</chart:SfCircularChart>
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# %}
|
||||
|
||||
SfCircularChart chart = new SfCircularChart();
|
||||
|
||||
DoughnutSeries series = new DoughnutSeries();
|
||||
series.XBindingPath = "Product";
|
||||
series.YBindingPath = "SalesRate";
|
||||
|
||||
chart.Series.Add(series);
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% endtabs %}
|
||||
|
||||
## Doughnut Coefficient
|
||||
|
||||
The [DoughnutCoefficient](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.DoughnutSeries.html#Syncfusion_Maui_Charts_DoughnutSeries_DoughnutCoefficient) property of doughnut series is used to define the inner circle.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
{% highlight xaml %}
|
||||
|
||||
<chart:SfCircularChart>
|
||||
|
||||
<chart:SfCircularChart.Series>
|
||||
<chart:DoughnutSeries ItemsSource="{Binding Data}" DoughnutCoefficient="0.7" XBindingPath="Product" YBindingPath="SalesRate" />
|
||||
</chart:SfCircularChart.Series>
|
||||
|
||||
</chart:SfCircularChart>
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# %}
|
||||
|
||||
SfCircularChart chart = new SfCircularChart();
|
||||
|
||||
DoughnutSeries series = new DoughnutSeries();
|
||||
series.XBindingPath = "Product";
|
||||
series.YBindingPath = "SalesRate";
|
||||
series.DoughnutCoefficient = 0.7;
|
||||
|
||||
chart.Series.Add(series);
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% endtabs %}
|
||||
|
||||
## Semi Doughnut
|
||||
|
||||
By using the [StartAngle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.CircularSeries.html#Syncfusion_Maui_Charts_CircularSeries_StartAngle) and [EndAngle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.CircularSeries.html#Syncfusion_Maui_Charts_CircularSeries_EndAngle) properties, you can draw doughnut series in different shapes such as semi-doughnut or quarter doughnut series.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
{% highlight xaml %}
|
||||
|
||||
<chart:SfCircularChart>
|
||||
|
||||
<chart:SfCircularChart.Series>
|
||||
<chart:DoughnutSeries StartAngle="180" EndAngle="360"
|
||||
ItemsSource="{Binding Data}"
|
||||
XBindingPath="Product"
|
||||
YBindingPath="SalesRate" />
|
||||
</chart:SfCircularChart.Series>
|
||||
|
||||
</chart:SfCircularChart>
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# %}
|
||||
|
||||
SfCircularChart chart = new SfCircularChart();
|
||||
|
||||
DoughnutSeries series = new DoughnutSeries();
|
||||
series.XBindingPath = "Product";
|
||||
series.YBindingPath = "SalesRate";
|
||||
series.StartAngle = 180;
|
||||
series.EndAngle = 360;
|
||||
|
||||
chart.Series.Add(series);
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% endtabs %}
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
---
|
||||
layout: post
|
||||
title: Explode segments in .NET MAUI Chart control | Syncfusion
|
||||
description: This section explains about how to explode single segment or all segments in Syncfusion .NET MAUI Chart (SfCircularChart) control.
|
||||
platform: maui
|
||||
control: SfCircularChart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Explode segments in .NET MAUI Chart
|
||||
|
||||
Exploding a segment is used to pull attention to a specific area of the circular chart. The following properties are used to explode the segments in the circular chart.
|
||||
|
||||
* [ExplodeIndex](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.PieSeries.html#Syncfusion_Maui_Charts_PieSeries_ExplodeIndex) - Used to explode any specific segment.
|
||||
* [ExplodeRadius](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.PieSeries.html#Syncfusion_Maui_Charts_PieSeries_ExplodeRadius) - Used to define the explode distance.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
{% highlight xaml %}
|
||||
|
||||
<chart:SfCircularChart>
|
||||
. . .
|
||||
<chart:PieSeries x:Name="PieSeries" ItemsSource="{Binding Data}" ExplodeIndex="2" ExplodeRadius="10" XBindingPath="Utilization" YBindingPath="ResponseTime" />
|
||||
|
||||
</chart:SfCircularChart>
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# %}
|
||||
|
||||
SfCircularChart chart = new SfCircularChart();
|
||||
. . .
|
||||
PieSeries series = new PieSeries()
|
||||
{
|
||||
ItemsSource = new ViewModel().Data,
|
||||
XBindingPath = "Utilization",
|
||||
YBindingPath = "ResponseTime",
|
||||
ExplodeIndex = 2,
|
||||
ExplodeRadius = 10
|
||||
};
|
||||
|
||||
chart.Series.Add(series);
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% endtabs %}
|
||||
|
||||
|
|
@ -7,7 +7,7 @@ control: SfCircularChart
|
|||
documentation: ug
|
||||
---
|
||||
|
||||
# Getting Started with .NET MAUI Charts (SfCircularChart)
|
||||
# Getting Started with .NET MAUI Chart
|
||||
|
||||
This section explains how to populate the circular chart with data, a title, data labels, a legend, and tooltips, as well as the essential aspects for getting started with the circular chart.
|
||||
|
||||
|
|
@ -16,7 +16,7 @@ This section explains how to populate the circular chart with data, a title, dat
|
|||
1. Create a new .NET MAUI application in Visual Studio.
|
||||
2. Syncfusion .NET MAUI components are available in [nuget.org](https://www.nuget.org/). To add SfCartesianChart to your project, open the NuGet package manager in Visual Studio, search for Syncfusion.Maui.Charts and then install it.
|
||||
3. To initialize the control, import the Chart namespace.
|
||||
4. Initialize `SfCircularChart`.
|
||||
4. Initialize [SfCircularChart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCircularChart.html).
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
@ -161,9 +161,9 @@ N> Add namespace of `ViewModel` class to your XAML Page, if you prefer to set `B
|
|||
|
||||
## Populate chart with data
|
||||
|
||||
Adding `PieSeries` to the charts' `Series` collection and binding `Data` to the series `ItemsSource` property from its BindingContext to create our own Product Sales Pie chart.
|
||||
Adding [PieSeries](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.PieSeries.html) to the charts [Series](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCircularChart.html#Syncfusion_Maui_Charts_SfCircularChart_Series) collection and binding `Data` to the series [ItemsSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_ItemsSource) property from its BindingContext to create our own Product Sales Pie chart.
|
||||
|
||||
N> To plot the series, the `XBindingPath` and `YBindingPath` properties must be configured so that the chart may get values from the respective properties in the data model.
|
||||
N> To plot the series, the [XBindingPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_XBindingPath) and [YBindingPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.CircularSeries.html#Syncfusion_Maui_Charts_CircularSeries_YBindingPath) properties must be configured so that the chart may get values from the respective properties in the data model.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
@ -197,7 +197,7 @@ N> To plot the series, the `XBindingPath` and `YBindingPath` properties must be
|
|||
|
||||
## Add a title
|
||||
|
||||
The title of the chart acts as the title to provide quick information to the user about the data being plotted in the chart. You can set title using the `Title` property of circular chart as follows.
|
||||
The title of the chart acts as the title to provide quick information to the user about the data being plotted in the chart. You can set title using the [Title](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartBase.html#Syncfusion_Maui_Charts_ChartBase_Title) property of circular chart as follows.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
@ -226,7 +226,7 @@ The title of the chart acts as the title to provide quick information to the use
|
|||
|
||||
## Enable the data labels
|
||||
|
||||
The `ShowDataLabels` property of `CircularSeries` can be used to enable data labels to improve the readability of the circular chart. The label visibility is set to `False` by default.
|
||||
The [ShowDataLabels](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_ShowDataLabels) property of series can be used to enable data labels to improve the readability of the circular chart. The label visibility is set to `False` by default.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
@ -253,7 +253,7 @@ The `ShowDataLabels` property of `CircularSeries` can be used to enable data lab
|
|||
|
||||
## Enable a legend
|
||||
|
||||
The legend provides information about the data point displayed in the circular chart. The `Legend` property of the chart was used to enable it.
|
||||
The legend provides information about the data point displayed in the circular chart. The [Legend](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartBase.html#Syncfusion_Maui_Charts_ChartBase_Legend) property of the chart was used to enable it.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
@ -280,7 +280,7 @@ The legend provides information about the data point displayed in the circular c
|
|||
|
||||
## Enable Tooltip
|
||||
|
||||
Tooltips are used to show information about the segment, when mouse over on it. Enable tooltip by setting series `ShowTooltip` property as true.
|
||||
Tooltips are used to show information about the segment, when mouse over on it. Enable tooltip by setting series [ShowTooltip](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_ShowTooltip) property as true.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ control: SfCircularChart
|
|||
documentation: ug
|
||||
---
|
||||
|
||||
# .NET MAUI Charts Overview (SfCircularChart)
|
||||
# .NET MAUI Chart Overview
|
||||
|
||||
Syncfusion .NET MAUI Charts (SfCircularChart) is used to create the chart with beautiful and enhanced UI visualization of data that are used in high-quality .NET MAUI applications.
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,112 @@
|
|||
---
|
||||
layout: post
|
||||
title: Pie Chart in .NET MAUI Chart control | Syncfusion
|
||||
description: Learn here all about the pie chart and its features in Syncfusion .NET MAUI Chart (SfCircularChart) control.
|
||||
platform: maui
|
||||
control: SfCircularChart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Pie Chart in .NET MAUI Chart
|
||||
|
||||
To render a [PieSeries](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.PieSeries.html) in circular chart, create an instance of the [PieSeries](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.PieSeries.html) and add it to the [Series](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCircularChart.html#Syncfusion_Maui_Charts_SfCircularChart_Series) collection property of [SfCircularChart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.CircularDataLabelSettings.html).
|
||||
|
||||
{% tabs %}
|
||||
|
||||
{% highlight xaml %}
|
||||
|
||||
<chart:SfCircularChart>
|
||||
|
||||
<chart:SfCircularChart.Series>
|
||||
<chart:PieSeries ItemsSource="{Binding Data}"
|
||||
XBindingPath="Product"
|
||||
YBindingPath="SalesRate"/>
|
||||
</chart:SfCircularChart.Series>
|
||||
|
||||
</chart:SfCircularChart>
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# %}
|
||||
|
||||
SfCircularChart chart = new SfCircularChart();
|
||||
|
||||
PieSeries series = new PieSeries();
|
||||
series.XBindingPath = "Product";
|
||||
series.YBindingPath = "SalesRate";
|
||||
|
||||
chart.Series.Add(series);
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% endtabs %}
|
||||
|
||||
## Circular Coefficient
|
||||
|
||||
The rendering size of the [PieSeries](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.PieSeries.html) can be controlled using the [CircularCoefficient](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.CircularSeries.html#Syncfusion_Maui_Charts_CircularSeries_CircularCoefficient) property as shown in the following code sample.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
{% highlight xaml %}
|
||||
|
||||
<chart:SfCircularChart>
|
||||
|
||||
<chart:SfCircularChart.Series>
|
||||
<chart:PieSeries ItemsSource="{Binding Data}"
|
||||
XBindingPath="Product"
|
||||
YBindingPath="SalesRate"
|
||||
CircularCoefficient = "0.9"/>
|
||||
</chart:SfCircularChart.Series>
|
||||
|
||||
</chart:SfCircularChart>
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# %}
|
||||
|
||||
SfCircularChart chart = new SfCircularChart();
|
||||
|
||||
PieSeries series = new PieSeries();
|
||||
series.XBindingPath = "Product";
|
||||
series.YBindingPath = "SalesRate";
|
||||
series.CircularCoefficient = 0.9;
|
||||
|
||||
chart.Series.Add(series);
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% endtabs %}
|
||||
|
||||
## Semi Pie
|
||||
|
||||
By using the [StartAngle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.CircularSeries.html#Syncfusion_Maui_Charts_CircularSeries_StartAngle) and [EndAngle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.CircularSeries.html#Syncfusion_Maui_Charts_CircularSeries_EndAngle) properties, you can draw pie series in different shapes such as semi-pie or quarter pie series.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
{% highlight xaml %}
|
||||
|
||||
<chart:SfCircularChart>
|
||||
|
||||
<chart:SfCircularChart.Series>
|
||||
<chart:PieSeries StartAngle="180" EndAngle="360" ItemsSource="{Binding Data} XBindingPath="Product" YBindingPath="SalesRate" />
|
||||
</chart:SfCircularChart.Series>
|
||||
|
||||
</chart:SfCircularChart>
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# %}
|
||||
|
||||
SfCircularChart chart = new SfCircularChart();
|
||||
|
||||
PieSeries series = new PieSeries();
|
||||
series.XBindingPath = "Product";
|
||||
series.YBindingPath = "SalesRate";
|
||||
series.StartAngle = 180;
|
||||
series.EndAngle = 360;
|
||||
|
||||
chart.Series.Add(series);
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% endtabs %}
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
---
|
||||
layout: post
|
||||
title: Selection in .NET MAUI Chart control | Syncfusion
|
||||
description: This section explains about how to configure the selection support and its features applying in .NET MAUI Chart (SfCircularChart).
|
||||
platform: maui
|
||||
control: SfCircularChart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Selection in .NET MAUI Chart
|
||||
|
||||
Circular chart supports selection that allows to select or highlight a segment in the chart by using [ChartSelectionBehavior](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSelectionBehavior.html).
|
||||
|
||||
## Enable Selection
|
||||
|
||||
To enable the selection in chart, create an instance of [ChartSelectionBehavior](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSelectionBehavior.html) and add it to the [ChartBehaviors](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartBase.html#Syncfusion_Maui_Charts_ChartBase_ChartBehaviors) collection of circular chart. And also need to set the `SelectionBrush` property to highlight the segment in the series.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
{% highlight xaml %}
|
||||
|
||||
<chart:SfCircularChart>
|
||||
<chart:SfCircularChart.ChartBehaviors>
|
||||
<chart:ChartSelectionBehavior />
|
||||
</chart:SfCircularChart.ChartBehaviors>
|
||||
<chart:SfCircularChart.Series>
|
||||
<chart:PieSeries SelectionBrush="BlueViolet"/>
|
||||
</chart:SfCircularChart.Series>
|
||||
</chart:SfCircularChart>
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# %}
|
||||
|
||||
SfCircularChart chart = new SfCircularChart();
|
||||
|
||||
ChartSelectionBehavior selection = new ChartSelectionBehavior();
|
||||
chart.ChartBehaviors.Add(selection);
|
||||
|
||||
PieSeries series = new PieSeries();
|
||||
series.SelectionBrush = Brush.BlueViolet;
|
||||
chart.Series.Add(series);
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% endtabs %}
|
||||
|
||||
## Selection Type
|
||||
|
||||
The [Type](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSelectionBehavior.html#Syncfusion_Maui_Charts_ChartSelectionBehavior_Type) property allows users to set selection type of series, which includes [Point](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SelectionType.html#Syncfusion_Maui_Charts_SelectionType_Point) and [None](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SelectionType.html#Syncfusion_Maui_Charts_SelectionType_None). [Type](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSelectionBehavior.html#Syncfusion_Maui_Charts_ChartSelectionBehavior_Type) property with [Point](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SelectionType.html#Syncfusion_Maui_Charts_SelectionType_Point) value is used to select segment in a series and [None](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SelectionType.html#Syncfusion_Maui_Charts_SelectionType_None) is used to set deselect state for all segments.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
{% highlight xml %}
|
||||
|
||||
<chart:SfCircularChart>
|
||||
. . .
|
||||
<chart:SfCircularChart.ChartBehaviors>
|
||||
<chart:ChartSelectionBehavior Type="Point"/>
|
||||
</chart:SfCircularChart.ChartBehaviors>
|
||||
|
||||
</chart:SfCircularChart>
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# %}
|
||||
|
||||
SfCircularChart chart = new SfCircularChart();
|
||||
. . .
|
||||
ChartSelectionBehavior selection = new ChartSelectionBehavior();
|
||||
selection.Type = SelectionType.Point;
|
||||
chart.ChartBehaviors.Add(selection);
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% endtabs %}
|
||||
|
||||
## Events
|
||||
|
||||
The following events are available in chart [SfCircularChart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCircularChart.html).
|
||||
|
||||
### SelectionChanging
|
||||
|
||||
The [SelectionChanging](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartBase.html#Syncfusion_Maui_Charts_ChartBase_SelectionChanging) event occurs before the data point is being selected. This is a cancelable event. This argument contains the following information.
|
||||
|
||||
* [CurrentIndex](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SelectionEventArgs.html#Syncfusion_Maui_Charts_SelectionEventArgs_CurrentIndex) - Gets the index of currently selected data point.
|
||||
* [PreviousIndex](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SelectionEventArgs.html#Syncfusion_Maui_Charts_SelectionEventArgs_PreviousIndex) - Gets the index of previously selected data point.
|
||||
* [Series](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SelectionEventArgs.html#Syncfusion_Maui_Charts_SelectionEventArgs_Series) - Gets the selected series.
|
||||
* [Cancel](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SelectionChangingEventArgs.html#Syncfusion_Maui_Charts_SelectionChangingEventArgs_Cancel) - Gets or sets a value indicating whether to continue the segment selection.
|
||||
|
||||
### SelectionChanged
|
||||
|
||||
The [SelectionChanged](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartBase.html#Syncfusion_Maui_Charts_ChartBase_SelectionChanged) event occurs after a data point has been selected. This argument contains the following information.
|
||||
|
||||
* [CurrentIndex](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SelectionEventArgs.html#Syncfusion_Maui_Charts_SelectionEventArgs_CurrentIndex) - Gets the index of currently selected data point.
|
||||
* [PreviousIndex](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SelectionEventArgs.html#Syncfusion_Maui_Charts_SelectionEventArgs_PreviousIndex) - Gets the index of previously selected data point.
|
||||
* [Series](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SelectionEventArgs.html#Syncfusion_Maui_Charts_SelectionEventArgs_Series) - Gets the selected series.
|
||||
|
|
@ -0,0 +1,121 @@
|
|||
---
|
||||
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 (SfCircularChart) control
|
||||
platform: maui
|
||||
control: SfCircularChart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Tooltip in .NET MAUI Chart
|
||||
|
||||
Tooltip is used to display any information or metadata of the tapped segment. The Circular Chart provides tooltip support for all series.
|
||||
|
||||
## Define Tooltip
|
||||
|
||||
To define the tooltip in the chart, set the [ShowTooltip](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_ShowTooltip) property of series to true. The default value of [ShowTooltip](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_ShowTooltip) property is false.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
{% highlight xaml %}
|
||||
|
||||
<chart:SfCircularChart>
|
||||
. . .
|
||||
<chart:PieSeries ShowTooltip="True">
|
||||
</chart:PieSeries>
|
||||
|
||||
</chart:SfCircularChart>
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# %}
|
||||
|
||||
SfCircularChart chart = new SfCircularChart();
|
||||
. . .
|
||||
PieSeries series = new PieSeries();
|
||||
series.ShowTooltip = true;
|
||||
chart.Series.Add(series);
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% endtabs %}
|
||||
|
||||
The [ChartTooltipBehavior](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartTooltipBehavior.html) is used to customize the tooltip. For customizing the tooltip, create an instance [ChartTooltipBehavior](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartTooltipBehavior.html) and add it to the [ChartBehaviors](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartBase.html#Syncfusion_Maui_Charts_ChartBase_ChartBehaviors) collection of [SfCircularChart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCircularChart.html). The following properties are used to customize the tooltip:
|
||||
|
||||
* [Background](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Charts_ChartTooltipBehavior_Background) - Gets or sets the background color to the tooltip label.
|
||||
* [FontAttributes](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Charts_ChartTooltipBehavior_FontAttributes) - Gets or sets the font style for the label.
|
||||
* [FontFamily](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Charts_ChartTooltipBehavior_FontFamily) - Gets or sets the font family name for the label.
|
||||
* [FontSize](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Charts_ChartTooltipBehavior_FontSize) - Gets or sets the font size for the label.
|
||||
* [Duration](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Charts_ChartTooltipBehavior_Duration) - Gets or sets the duration of the tooltip text in seconds.
|
||||
* [Margin](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Charts_ChartTooltipBehavior_Margin) - Gets or sets the margin of the label to customize the appearance of label.
|
||||
* [TextColor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Charts_ChartTooltipBehavior_TextColor) - Used to set the color for the text of the label.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
{% highlight xml %}
|
||||
|
||||
<chart:SfCircularChart>
|
||||
. . .
|
||||
<chart:SfCircularChart.ChartBehaviors>
|
||||
<chart:ChartTooltipBehavior/>
|
||||
</chart:SfCircularChart.ChartBehaviors>
|
||||
|
||||
</chart:SfCircularChart>
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# %}
|
||||
|
||||
SfCircularChart chart = new SfCircularChart();
|
||||
. . .
|
||||
ChartTooltipBehavior tooltip = new ChartTooltipBehavior();
|
||||
chart.ChartBehaviors.Add(tooltip);
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% endtabs %}
|
||||
|
||||
## Template
|
||||
|
||||
Circular chart provides support to customize the appearance of the tooltip by using the [TooltipTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_TooltipTemplate) property.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
{% highlight xaml %}
|
||||
|
||||
<chart:SfCircularChart>
|
||||
. . .
|
||||
<chart:SfCircularChart.Resources>
|
||||
<DataTemplate x:Key="tooltipTemplate">
|
||||
<StackLayout Orientation="Horizontal">
|
||||
<Label Text="{Binding Item.Product}" 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.SalesRate}" TextColor="Black" FontAttributes="Bold" FontSize="12" HorizontalOptions="Center" VerticalOptions="Center"/>
|
||||
</StackLayout>
|
||||
</DataTemplate>
|
||||
</chart:SfCircularChart.Resources>
|
||||
|
||||
<chart:SfCircularChart.Series>
|
||||
<chart:PieSeries ShowTooltip="True"
|
||||
ItemsSource="{Binding Data}"
|
||||
XBindingPath="Product"
|
||||
YBindingPath="SalesRate"
|
||||
TooltipTemplate="{StaticResource tooltipTemplate}"/>
|
||||
</chart:SfCircularChart.Series>
|
||||
. . .
|
||||
</chart:SfCircularChart>
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# %}
|
||||
|
||||
SfCircularChart chart = new SfCircularChart();
|
||||
. . .
|
||||
PieSeries series = new PieSeries();
|
||||
series.ShowTooltip = true;
|
||||
series.TooltipTemplate = chart.Resources["tooltipTemplate"] as DataTemplate;
|
||||
. . .
|
||||
{% endhighlight %}
|
||||
|
||||
{% endtabs %}
|
||||
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
---
|
||||
title: Essential Studio for MAUI Weekly Nuget Release Release Notes
|
||||
description: Essential Studio for MAUI Weekly Nuget Release Release Notes
|
||||
platform: maui
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Essential Studio for MAUI Release Notes
|
||||
|
||||
{% include release-info.html date="October 05, 2021" version="v19.3.0.44" %}
|
||||
|
||||
|
||||
{% directory path: _includes/release-notes/v19.3.0.44 %}
|
||||
|
||||
{% include {{file.url}} %}
|
||||
|
||||
{% enddirectory %}
|
||||
|
|
@ -83,6 +83,6 @@
|
|||
</li>
|
||||
<li>
|
||||
Release Notes
|
||||
<ul><li>2021 volume 3 - v19.3.0.*<ul><li><a href="/maui/release-notes/v19.3.0.43">v19.3.0.43 Main Release</a></li></ul></li></ul>
|
||||
<ul><li>2021 volume 3 - v19.3.0.*<ul><li> Weekly Nuget Release <ul><li><a href="/maui/release-notes/v19.3.0.44">v19.3.0.44</a></li></ul></li><li><a href="/maui/release-notes/v19.3.0.43">v19.3.0.43 Main Release</a></li></ul></li></ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче