From 6498153adf0ecacb261673a7765b99709fd1cf3d Mon Sep 17 00:00:00 2001 From: KompelliSravanSyncfusion Date: Thu, 22 May 2025 16:00:56 +0530 Subject: [PATCH] Improved ug content --- winui/Polar-Chart/Appearance.md | 16 +++++---- winui/Polar-Chart/Axis-Header.md | 9 ++--- winui/Polar-Chart/Axis-Labels.md | 12 +++---- winui/Polar-Chart/Axis-Types.md | 39 +++++++++++----------- winui/Polar-Chart/DataLabel.md | 40 +++++++++++----------- winui/Polar-Chart/Getting-Started.md | 50 ++++++++++++++-------------- winui/Polar-Chart/Legend.md | 42 +++++++++++------------ winui/Polar-Chart/Overview.md | 19 +++++------ winui/Polar-Chart/Polar-Area.md | 12 +++---- winui/Polar-Chart/Polar-Line.md | 12 +++---- winui/Polar-Chart/StartAngle.md | 6 ++-- winui/Polar-Chart/Title.md | 10 +++--- 12 files changed, 133 insertions(+), 134 deletions(-) diff --git a/winui/Polar-Chart/Appearance.md b/winui/Polar-Chart/Appearance.md index fdb95a892..0daae462e 100644 --- a/winui/Polar-Chart/Appearance.md +++ b/winui/Polar-Chart/Appearance.md @@ -1,7 +1,7 @@ --- layout: post -title: Appearance in WinUI Chart control | Syncfusion -description: This section explains about how to apply palettes and gradient in the Syncfusion® WinUI Chart (SfPolarChart) control +title: Appearance in WinUI Chart Control | Syncfusion +description: This section explains how to apply palettes and gradients in the Syncfusion® WinUI Chart (SfPolarChart) control. platform: WinUI control: SfPolarChart documentation: ug @@ -9,11 +9,11 @@ documentation: ug # Appearance in WinUI Chart (SfPolarChart) -The appearance of the [SfPolarChart](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.SfPolarChart.html) can be customized by using the predefined palettes, custom palettes, and gradient which allows enriching the application. +The appearance of the [SfPolarChart](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.SfPolarChart.html) can be customized using predefined palettes, custom palettes, and gradients, which enhance the application's visual appeal. ## Default PaletteBrushes -Currently, the [SfPolarChart](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.SfPolarChart.html) supports only one predefined [PaletteBrushes](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.SfPolarChart.html#Syncfusion_UI_Xaml_Charts_SfPolarChart_PaletteBrushes) and it is the default brushes for the SfPolarChart. The following screenshot shows the default appearance of multiple series. +Currently, the [SfPolarChart](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.SfPolarChart.html) supports only one predefined [PaletteBrushes](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.SfPolarChart.html#Syncfusion_UI_Xaml_Charts_SfPolarChart_PaletteBrushes), which serve as the default brushes for the SfPolarChart. The following screenshot shows the default appearance of multiple series. {% tabs %} @@ -76,7 +76,7 @@ this.Content = chart; ## Custom PaletteBrushes -The [SfPolarChart](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.SfPolarChart.html) provides support to define own brushes for the chart with preferred order by using the [PaletteBrushes](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.SfPolarChart.html#Syncfusion_UI_Xaml_Charts_SfPolarChart_PaletteBrushes) property, as shown in the following code example. +The [SfPolarChart](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.SfPolarChart.html) allows users to define their own brushes for the chart in a preferred order using the [PaletteBrushes](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.SfPolarChart.html#Syncfusion_UI_Xaml_Charts_SfPolarChart_PaletteBrushes) property, as shown in the following code example. {% tabs %} @@ -125,7 +125,7 @@ this.Content = chart; ## Applying Gradient -Gradient for the polar chart can be set by using the [PaletteBrushes](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.SfPolarChart.html#Syncfusion_UI_Xaml_Charts_SfPolarChart_PaletteBrushes) property of the funnel chart with the help of the `LinearGradientBrush` or `RadialGradientBrush`. +Gradients for the polar chart can be set using the [PaletteBrushes](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.SfPolarChart.html#Syncfusion_UI_Xaml_Charts_SfPolarChart_PaletteBrushes) property with the aid of `LinearGradientBrush` or `RadialGradientBrush`. {% tabs %} @@ -185,7 +185,9 @@ chart.PaletteBrushes = customBrushes; ![Gradient support in WinUI Chart](Appearance_Images/WinUI_Chart_Series_Gradient.png) -Gradient color using the [Fill](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartSeries.html#Syncfusion_UI_Xaml_Charts_ChartSeries_Fill) property of series with `LinearGradientBrush`. +## Gradient Color Using the Fill Property + +Gradient colors can be applied using the [Fill](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartSeries.html#Syncfusion_UI_Xaml_Charts_ChartSeries_Fill) property of the series with `LinearGradientBrush`. {% tabs %} diff --git a/winui/Polar-Chart/Axis-Header.md b/winui/Polar-Chart/Axis-Header.md index 8e28e3116..c68cd9795 100644 --- a/winui/Polar-Chart/Axis-Header.md +++ b/winui/Polar-Chart/Axis-Header.md @@ -1,7 +1,7 @@ --- layout: post -title: Axis title in WinUI Chart control | Syncfusion -description: Learn here all about the chart axis title of Syncfusion® WinUI Chart (SfPolarChart) control and its customization. +title: Axis Title in WinUI Chart Control | Syncfusion +description: Learn about the chart axis title of the Syncfusion® WinUI Chart (SfPolarChart) control and its customization options. platform: WinUI control: SfPolarChart documentation: ug @@ -41,13 +41,14 @@ chart.SecondaryAxis = new NumericalAxis() {% endtabs %} -N> Polar chart supports title for secondary axis only. +N> The polar chart supports titles for the secondary axis only. + ![Axis title in WinUI Chart](Axis_Images/WinUI_Chart_AxisHeader.png) ## Style -The [HeaderStyle](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_HeaderStyle) property is used to provide style for the axis header. +The [HeaderStyle](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_HeaderStyle) property is used to style the axis header. {% tabs %} diff --git a/winui/Polar-Chart/Axis-Labels.md b/winui/Polar-Chart/Axis-Labels.md index fd95d8810..33782cd28 100644 --- a/winui/Polar-Chart/Axis-Labels.md +++ b/winui/Polar-Chart/Axis-Labels.md @@ -1,15 +1,15 @@ --- layout: post -title: Axis labels in WinUI Chart control | Syncfusion -description: Learn here all about the chart axis lables and its customization in Syncfusion® WinUI Chart (SfPolarChart) control. +title: Axis Labels in WinUI Chart Control | Syncfusion +description: Learn all about chart axis labels and their customization in the Syncfusion® WinUI Chart (SfPolarChart) control. platform: WinUI control: SfPolarChart documentation: ug --- -# Axis labels in WinUI Chart +# Axis Labels in WinUI Chart -The axis labels are used to show the units, measures, or category values of the axis to visualize the data. It will be generated based on the range and values binded to the series in the chart. +The axis labels display the units, measures, or category values of the axis to visualize the data. They are generated based on the range and values bound to the series in the chart. ## Rotation @@ -48,7 +48,7 @@ chart.SecondaryAxis = new NumericalAxis() ## Format -Axis labels can be formatted by predefined formatting types by using the [LabelFormat](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.LabelStyle.html#Syncfusion_UI_Xaml_Charts_LabelStyle_LabelFormat) property based on the axis types. +Axis labels can be formatted using predefined formatting types with the [LabelFormat](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.LabelStyle.html#Syncfusion_UI_Xaml_Charts_LabelStyle_LabelFormat) property based on the axis types. {% tabs %} @@ -93,7 +93,7 @@ chart.SecondaryAxis = new NumericalAxis() ## Template -The appearance of the axis labels can be customized by using the [LabelTemplate](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_LabelTemplate) property of axis. +The appearance of the axis labels can be customized using the [LabelTemplate](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_LabelTemplate) property. {% tabs %} diff --git a/winui/Polar-Chart/Axis-Types.md b/winui/Polar-Chart/Axis-Types.md index 4c9955a13..a134a7aba 100644 --- a/winui/Polar-Chart/Axis-Types.md +++ b/winui/Polar-Chart/Axis-Types.md @@ -1,15 +1,15 @@ --- layout: post -title: Axis types in WinUI Chart control | Syncfusion -description: Learn here all about the axis types and its features in Syncfusion® WinUI Chart (SfPolarChart) control. +title: Axis Types in WinUI Chart Control | Syncfusion +description: Learn about the axis types and their features in the Syncfusion® WinUI Chart (SfPolarChart) control. platform: WinUI control: SfPolarChart documentation: ug --- -# Types of Axis in WinUI Chart (SfPolarChart) +# Types of Axis in WinUI Chart (SfPolarChart) -Polar chart supports the following types of chart axis. +The Polar Chart supports the following types of chart axes: * CategoryAxis * NumericalAxis @@ -18,7 +18,7 @@ Polar chart supports the following types of chart axis. ## Category Axis -The [CategoryAxis](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.CategoryAxis.html) is an indexed based axis that plots values based on the index of the data point collection. The points are equally spaced here. +The [CategoryAxis](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.CategoryAxis.html) is an index-based axis that plots values based on the index of the data point collection. The points are equally spaced. {% tabs %} @@ -54,7 +54,7 @@ chart.SecondaryAxis = new NumericalAxis(); ## Numerical Axis -The [NumericalAxis](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.NumericalAxis.html) is used to plot the numerical values to the chart. [NumericalAxis](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.NumericalAxis.html) can be defined for both [PrimaryAxis](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.SfPolarChart.html#Syncfusion_UI_Xaml_Charts_SfPolarChart_PrimaryAxis) and [SecondaryAxis](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.SfPolarChart.html#Syncfusion_UI_Xaml_Charts_SfPolarChart_SecondaryAxis). +The [NumericalAxis](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.NumericalAxis.html) is used to plot numerical values on the chart. It can be defined for both [PrimaryAxis](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.SfPolarChart.html#Syncfusion_UI_Xaml_Charts_SfPolarChart_PrimaryAxis) and [SecondaryAxis](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.SfPolarChart.html#Syncfusion_UI_Xaml_Charts_SfPolarChart_SecondaryAxis). {% tabs %} @@ -89,11 +89,11 @@ chart.SecondaryAxis = new NumericalAxis(); ![Numerical Axis support in WinUI Chart](Axis_Images/WinUI_Chart_NumericalAxis.png) -### Customizing the range +### Customizing the Range -[Maximum](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.NumericalAxis.html#Syncfusion_UI_Xaml_Charts_NumericalAxis_Maximum) and [Minimum](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.NumericalAxis.html#Syncfusion_UI_Xaml_Charts_NumericalAxis_Minimum) properties of axis is used for setting the maximum and minimum value of the axis range respectively. +The [Maximum](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.NumericalAxis.html#Syncfusion_UI_Xaml_Charts_NumericalAxis_Maximum) and [Minimum](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.NumericalAxis.html#Syncfusion_UI_Xaml_Charts_NumericalAxis_Minimum) properties of the axis are used to set the maximum and minimum values of the axis range, respectively. -N> If minimum or maximum value is set, the other value is calculated by default internally. +N> If either the minimum or maximum value is set, the other value is automatically calculated internally. {% tabs %} @@ -130,7 +130,7 @@ chart.SecondaryAxis = new NumericalAxis() ## DateTime Axis -The [DateTimeAxis](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html) is used to plot the chart with `DateTime` values. +The [DateTimeAxis](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html) is used to plot charts with `DateTime` values. {% tabs %} @@ -209,7 +209,7 @@ chart.SecondaryAxis.Add(secondaryAxis); ### Interval -The Axis interval can be customized using the [Interval](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.LogarithmicAxis.html#Syncfusion_UI_Xaml_Charts_LogarithmicAxis_Interval) property of the axis. By default, the interval is calculated based on the minimum and maximum values of the provided data, with a default value of `1`. +The axis interval can be customized using the [Interval](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.LogarithmicAxis.html#Syncfusion_UI_Xaml_Charts_LogarithmicAxis_Interval) property. By default, the interval is calculated based on the minimum and maximum values of the provided data, with a default value of `1`. {% tabs %} @@ -241,7 +241,7 @@ chart.SecondaryAxis.Add(secondaryAxis); ### Customizing the Range -The range of the logarithmic axis can be customized using the [Minimum](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.LogarithmicAxis.html#Syncfusion_UI_Xaml_Charts_LogarithmicAxis_Minimum) and [Maximum](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.LogarithmicAxis.html#Syncfusion_UI_Xaml_Charts_LogarithmicAxis_Maximum) properties of the LogarithmicAxis. By default, the range is automatically calculated to align with the provided data. +The range of the logarithmic axis can be customized using the [Minimum](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.LogarithmicAxis.html#Syncfusion_UI_Xaml_Charts_LogarithmicAxis_Minimum) and [Maximum](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.LogarithmicAxis.html#Syncfusion_UI_Xaml_Charts_LogarithmicAxis_Maximum) properties. By default, the range is automatically calculated to align with the provided data. {% tabs %} @@ -272,7 +272,7 @@ chart.SecondaryAxis.Add(secondaryAxis); {% endhighlight %} {% endtabs %} -### Customizing the Logarithmic base +### Customizing the Logarithmic Base The logarithmic axis base can be customized using the [LogarithmicBase](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.LogarithmicAxis.html#Syncfusion_UI_Xaml_Charts_LogarithmicAxis_LogarithmicBase) property. The default base value is `10`. @@ -307,17 +307,18 @@ chart.SecondaryAxis.Add(secondaryAxis); ![LogarithmicAxis base customization support in WinUI Chart](Axis_Images/WinUI_Chart_LogarithmicAxis_LogarithmicBase.png) ## Events + ### ActualRangeChanged -The [ActualRangeChanged](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_ActualRangeChanged) event is triggered when the actual range of the axis is changed. The argument contains the following information: +The [ActualRangeChanged](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_ActualRangeChanged) event is triggered when the actual range of the axis changes. The event argument contains the following information: -* [ActualMinimum](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ActualRangeChangedEventArgs.html#Syncfusion_UI_Xaml_Charts_ActualRangeChangedEventArgs_ActualMinimum) - used to get the actual minimum value of the axis. -* [ActualMaximum](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ActualRangeChangedEventArgs.html#Syncfusion_UI_Xaml_Charts_ActualRangeChangedEventArgs_ActualMaximum) - used to get the actual maximum value of the axis. +* [ActualMinimum](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ActualRangeChangedEventArgs.html#Syncfusion_UI_Xaml_Charts_ActualRangeChangedEventArgs_ActualMinimum) - Retrieves the actual minimum value of the axis. +* [ActualMaximum](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ActualRangeChangedEventArgs.html#Syncfusion_UI_Xaml_Charts_ActualRangeChangedEventArgs_ActualMaximum) - Retrieves the actual maximum value of the axis. ### LabelCreated -The [LabelCreated](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_LabelCreated) event is triggered when the axis label is created. The argument contains the following information: +The [LabelCreated](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_LabelCreated) event is triggered when an axis label is created. The event argument contains the following information: -* [Label](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartAxisLabelEventArgs.html#Syncfusion_UI_Xaml_Charts_ChartAxisLabelEventArgs_Label) - Used to get or set the text of axis label. -* [Position](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartAxisLabelEventArgs.html#Syncfusion_UI_Xaml_Charts_ChartAxisLabelEventArgs_Position) - Used to get the position of label. +* [Label](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartAxisLabelEventArgs.html#Syncfusion_UI_Xaml_Charts_ChartAxisLabelEventArgs_Label) - Used to get or set the text of the axis label. +* [Position](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartAxisLabelEventArgs.html#Syncfusion_UI_Xaml_Charts_ChartAxisLabelEventArgs_Position) - Used to get the position of the label. * [LabelStyle](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartAxisLabelEventArgs.html#Syncfusion_UI_Xaml_Charts_ChartAxisLabelEventArgs_LabelStyle) - Used to customize the appearance of axis labels. diff --git a/winui/Polar-Chart/DataLabel.md b/winui/Polar-Chart/DataLabel.md index d7065583e..fa8d82247 100644 --- a/winui/Polar-Chart/DataLabel.md +++ b/winui/Polar-Chart/DataLabel.md @@ -1,7 +1,7 @@ --- layout: post -title: Data labels in WinUI Chart control | Syncfusion -description: This section explains about how to configure the data labels and its features in Syncfusion® WinUI Chart (SfPolarChart) control. +title: Data Labels in WinUI Chart Control | Syncfusion +description: This section explains how to configure data labels and their features in the Syncfusion® WinUI Chart (SfPolarChart) control. platform: WinUI control: SfPolarChart documentation: ug @@ -9,16 +9,16 @@ documentation: ug # Data Label in WinUI Chart (SfPolarChart) -Data labels are used to display values related to a chart segment. Values from data points(x, y) or other custom properties from a data source can be displayed. +Data labels are used to display values related to a chart segment. Values from data points (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. +* `Connector line` - connects the (X, Y) point and the label element. -## Enable Data Label +## Enable Data Labels -The [ShowDataLabels](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartSeries.html#Syncfusion_UI_Xaml_Charts_ChartSeries_ShowDataLabels) property of a series is used to enable the data labels. +The [ShowDataLabels](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartSeries.html#Syncfusion_UI_Xaml_Charts_ChartSeries_ShowDataLabels) property of a series is used to enable data labels. {% tabs %} @@ -50,7 +50,7 @@ series.ShowDataLabels = true; ## Context -To customize the content of data labels, need to define [DataLabelSettings](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.PolarSeries.html#Syncfusion_UI_Xaml_Charts_PolarSeries_DataLabelSettings) of series and set [Context](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartDataLabelSettings.html#Syncfusion_UI_Xaml_Charts_ChartDataLabelSettings_Context) property of [DataLabelSettings](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.PolarSeries.html#Syncfusion_UI_Xaml_Charts_PolarSeries_DataLabelSettings) to define the value to be displayed as label content. +To customize the content of data labels, define the [DataLabelSettings](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.PolarSeries.html#Syncfusion_UI_Xaml_Charts_PolarSeries_DataLabelSettings) of the series and set the [Context](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartDataLabelSettings.html#Syncfusion_UI_Xaml_Charts_ChartDataLabelSettings_Context) property of [DataLabelSettings](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.PolarSeries.html#Syncfusion_UI_Xaml_Charts_PolarSeries_DataLabelSettings) to define the value to be displayed as label content. {% tabs %} @@ -89,14 +89,14 @@ series.DataLabelSettings = new PolarDataLabelSettings() {Context = LabelContext. The following properties are used to customize the data label. -* [BorderBrush](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartDataLabelSettings.html#Syncfusion_UI_Xaml_Charts_ChartDataLabelSettings_BorderBrush)- used to change the border color. -* [BorderThickness](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartDataLabelSettings.html#Syncfusion_UI_Xaml_Charts_ChartDataLabelSettings_BorderThickness)- used to change the thickness of the border. -* [Margin](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartDataLabelSettings.html#Syncfusion_UI_Xaml_Charts_ChartDataLabelSettings_Margin)- used to change the margin size for label. -* [FontStyle](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartDataLabelSettings.html#Syncfusion_UI_Xaml_Charts_ChartDataLabelSettings_FontStyle)- used to change font style of the label. -* [FontSize](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartDataLabelSettings.html#Syncfusion_UI_Xaml_Charts_ChartDataLabelSettings_FontSize)- used to change font size of the label. -* [Foreground](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartDataLabelSettings.html#Syncfusion_UI_Xaml_Charts_ChartDataLabelSettings_Foreground)- used to change the text color of the label. -* [FontFamily](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartDataLabelSettings.html#Syncfusion_UI_Xaml_Charts_ChartDataLabelSettings_FontFamily)- used to change the font family of the label. -* [Background](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartDataLabelSettings.html#Syncfusion_UI_Xaml_Charts_ChartDataLabelSettings_Background)- used to change the label background color. +* [BorderBrush](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartDataLabelSettings.html#Syncfusion_UI_Xaml_Charts_ChartDataLabelSettings_BorderBrush) - used to change the border color. +* [BorderThickness](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartDataLabelSettings.html#Syncfusion_UI_Xaml_Charts_ChartDataLabelSettings_BorderThickness) - used to change the thickness of the border. +* [Margin](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartDataLabelSettings.html#Syncfusion_UI_Xaml_Charts_ChartDataLabelSettings_Margin) - used to change the margin size for the label. +* [FontStyle](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartDataLabelSettings.html#Syncfusion_UI_Xaml_Charts_ChartDataLabelSettings_FontStyle) - used to change the font style of the label. +* [FontSize](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartDataLabelSettings.html#Syncfusion_UI_Xaml_Charts_ChartDataLabelSettings_FontSize) - used to change the font size of the label. +* [Foreground](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartDataLabelSettings.html#Syncfusion_UI_Xaml_Charts_ChartDataLabelSettings_Foreground) - used to change the text color of the label. +* [FontFamily](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartDataLabelSettings.html#Syncfusion_UI_Xaml_Charts_ChartDataLabelSettings_FontFamily) - used to change the font family of the label. +* [Background](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartDataLabelSettings.html#Syncfusion_UI_Xaml_Charts_ChartDataLabelSettings_Background) - used to change the label background color. {% tabs %} @@ -252,7 +252,7 @@ series.DataLabelSettings = new PolarDataLabelSettings() ## Rotation -[Rotation](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartDataLabelSettings.html#Syncfusion_UI_Xaml_Charts_ChartDataLabelSettings_Rotation) property is used to define the angle to which the label has to rotate. +The [Rotation](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartDataLabelSettings.html#Syncfusion_UI_Xaml_Charts_ChartDataLabelSettings_Rotation) property is used to define the angle to which the label has to rotate. {% tabs %} @@ -294,7 +294,7 @@ series.DataLabelSettings = new PolarDataLabelSettings() ## Applying Series Fill -The [UseSeriesPalette](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartDataLabelSettings.html#Syncfusion_UI_Xaml_Charts_ChartDataLabelSettings_UseSeriesPalette) property is used to set the [Fill](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartSeries.html#Syncfusion_UI_Xaml_Charts_ChartSeries_Fill) of the series to the data label background. +The [UseSeriesPalette](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartDataLabelSettings.html#Syncfusion_UI_Xaml_Charts_ChartDataLabelSettings_UseSeriesPalette) property is used to set the [Fill](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartSeries.html#Syncfusion_UI_Xaml_Charts_ChartSeries_Fill) of the series to the data label background. {% tabs %} @@ -335,12 +335,12 @@ series.DataLabelSettings = new PolarDataLabelSettings() ## Connector Line -Connector line is used to connect label and data point using a line. [ShowConnectorLine](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartDataLabelSettings.html#Syncfusion_UI_Xaml_Charts_ChartDataLabelSettings_ShowConnectorLine) property of [PolarDataLabelSettings](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.PolarDataLabelSettings.html) is used to enable the connector line in the polar chart. +A connector line is used to connect the label and data point using a line. The [ShowConnectorLine](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartDataLabelSettings.html#Syncfusion_UI_Xaml_Charts_ChartDataLabelSettings_ShowConnectorLine) property of [PolarDataLabelSettings](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.PolarDataLabelSettings.html) is used to enable the connector line in the polar chart. The connector line can be customized using the following properties: -* [ConnectorHeight](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartDataLabelSettings.html#Syncfusion_UI_Xaml_Charts_ChartDataLabelSettings_ConnectorHeight) - used to set height for connector line. -* [ConnectorLineStyle](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartDataLabelSettings.html#Syncfusion_UI_Xaml_Charts_ChartDataLabelSettings_ConnectorLineStyle) - used to customize the style of line. +* [ConnectorHeight](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartDataLabelSettings.html#Syncfusion_UI_Xaml_Charts_ChartDataLabelSettings_ConnectorHeight) - used to set height for the connector line. +* [ConnectorLineStyle](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartDataLabelSettings.html#Syncfusion_UI_Xaml_Charts_ChartDataLabelSettings_ConnectorLineStyle) - used to customize the style of the line. * [ConnectorRotation](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartDataLabelSettings.html#Syncfusion_UI_Xaml_Charts_ChartDataLabelSettings_ConnectorRotation) - used to rotate the connector line at any angle. {% tabs %} diff --git a/winui/Polar-Chart/Getting-Started.md b/winui/Polar-Chart/Getting-Started.md index 95e7dd949..b92870ff2 100644 --- a/winui/Polar-Chart/Getting-Started.md +++ b/winui/Polar-Chart/Getting-Started.md @@ -1,7 +1,7 @@ --- layout: post -title: Getting Started with WinUI Polar Chart control | Syncfusion -description: Learn here all about getting started with the Syncfusion® WinUI Polar Chart (SfPolarChart) control and its elements, and more. +title: Getting Started with WinUI Polar Chart Control | Syncfusion +description: Learn all about getting started with the Syncfusion® WinUI Polar Chart (SfPolarChart) control and its elements, and more. platform: WinUI control: SfPolarChart documentation: ug @@ -9,14 +9,14 @@ documentation: ug # Getting Started with WinUI Polar Chart (SfPolarChart) -This section explains how to populate the [WinUI Polar Chart](https://www.syncfusion.com/winui-controls/charts/winui-polar-chart) with data, header, data labels, legend, and tooltips, as well as the essential aspects for getting started with the chart. +This section explains how to populate the [WinUI Polar Chart](https://www.syncfusion.com/winui-controls/charts/winui-polar-chart) with data, headers, data labels, legends, and tooltips, as well as the essential aspects for getting started with the chart. -## Creating an application with WinUI Chart +## Creating an Application with WinUI Chart 1. Create a [WinUI 3 desktop app for C# and .NET 5](https://docs.microsoft.com/en-us/windows/apps/winui/winui3/get-started-winui3-for-desktop). -2. Add reference to [Syncfusion.Chart.WinUI](https://www.nuget.org/packages/Syncfusion.Chart.WinUI/) NuGet. -3. Import the control namespace `Syncfusion.UI.Xaml.Charts` in XAML or C# to initialize the control. -4. Initialize [SfPolarChart](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.SfPolarChart.html) control. +2. Add a reference to [Syncfusion.Chart.WinUI](https://www.nuget.org/packages/Syncfusion.Chart.WinUI/) NuGet. +3. Import the control namespace `Syncfusion.UI.Xaml.Charts` in XAML or C# to initialize the control. +4. Initialize the [SfPolarChart](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.SfPolarChart.html) control. {% capture codesnippet1 %} {% tabs %} @@ -59,7 +59,7 @@ public sealed partial class MainWindow : Window ## Initialize View Model -Now, let us define a simple data model that represents a data point in chart. +Now, let us define a simple data model that represents a data point in the chart. {% tabs %} @@ -106,7 +106,7 @@ public class ChartViewModel {% endtabs %} Create a `ChartViewModel` instance and set it as the chart's `DataContext`. This enables property binding from the `ChartViewModel` class. - + N> If you prefer to set `DataContext` in XAML, add the namespace of the `ViewModel` class to your XAML Page. {% tabs %} @@ -140,7 +140,7 @@ chart.DataContext = viewModel; ## Initialize Chart Axis -[ChartAxis](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartAxis.html) is used to locate the data points inside the chart area. The [PrimaryAxis](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.SfPolarChart.html#Syncfusion_UI_Xaml_Charts_SfPolarChart_PrimaryAxis) and [SecondaryAxis](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.SfPolarChart.html#Syncfusion_UI_Xaml_Charts_SfPolarChart_SecondaryAxis) properties of the chart is used to initialize the axis for the chart. +[ChartAxis](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartAxis.html) is used to locate data points inside the chart area. The [PrimaryAxis](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.SfPolarChart.html#Syncfusion_UI_Xaml_Charts_SfPolarChart_PrimaryAxis) and [SecondaryAxis](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.SfPolarChart.html#Syncfusion_UI_Xaml_Charts_SfPolarChart_SecondaryAxis) properties of the chart are used to initialize the axes for the chart. {% tabs %} @@ -173,9 +173,9 @@ chart.SecondaryAxis = secondaryAxis; ## Populate Chart with Data -Adding [PolarAreaSeries](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.PolarAreaSeries.html) to the polar chart [Series](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.SfPolarChart.html#Syncfusion_UI_Xaml_Charts_SfPolarChart_Series) collection and binding `Data` to the series [ItemsSource](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartSeries.html#Syncfusion_UI_Xaml_Charts_ChartSeries_ItemsSource) property from its `DataContext` for creating polar chart. +Add [PolarAreaSeries](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.PolarAreaSeries.html) to the polar chart [Series](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.SfPolarChart.html#Syncfusion_UI_Xaml_Charts_SfPolarChart_Series) collection and bind `Data` to the series [ItemsSource](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartSeries.html#Syncfusion_UI_Xaml_Charts_ChartSeries_ItemsSource) property from its `DataContext` for creating the polar chart. -N> To plot the series, the [XBindingPath](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartSeries.html#Syncfusion_UI_Xaml_Charts_ChartSeries_XBindingPath) and [YBindingPath](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.PolarSeries.html#Syncfusion_UI_Xaml_Charts_PolarSeries_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/winui/Syncfusion.UI.Xaml.Charts.ChartSeries.html#Syncfusion_UI_Xaml_Charts_ChartSeries_XBindingPath) and [YBindingPath](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.PolarSeries.html#Syncfusion_UI_Xaml_Charts_PolarSeries_YBindingPath) properties must be configured so that the chart can get values from the respective properties in the data model. {% tabs %} @@ -228,7 +228,7 @@ chart.Series.Add(series); ## Add Title -The title of the chart provide quick information to the user about the data being plotted in the chart. The [Header](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartBase.html#Syncfusion_UI_Xaml_Charts_ChartBase_Header) property is used to set title for polar chart as follows. +The title of the chart provides quick information to the user about the data being plotted in the chart. The [Header](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartBase.html#Syncfusion_UI_Xaml_Charts_ChartBase_Header) property is used to set the title for the polar chart as follows. {% tabs %} @@ -252,7 +252,7 @@ chart.Header = "Polar Chart"; ## Enable Data Labels -The [ShowDataLabels](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartSeries.html#Syncfusion_UI_Xaml_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. +The [ShowDataLabels](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartSeries.html#Syncfusion_UI_Xaml_Charts_ChartSeries_ShowDataLabels) property of a series can be used to enable data labels to improve the readability of the chart. The label visibility is set to `False` by default. {% tabs %} @@ -282,7 +282,7 @@ series.ShowDataLabels = true; ## Enable Legend -The legend provides information about the data point displayed in the polar chart. The [Legend](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartBase.html#Syncfusion_UI_Xaml_Charts_ChartBase_Legend) property of the chart was used to enable it. +The legend provides information about the data points displayed in the polar chart. The [Legend](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartBase.html#Syncfusion_UI_Xaml_Charts_ChartBase_Legend) property of the chart is used to enable it. {% tabs %} @@ -309,7 +309,7 @@ chart.Legend = new ChartLegend(); {% endtabs %} -N> Additionally, set label for each series using the [Label](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartSeries.html#Syncfusion_UI_Xaml_Charts_ChartSeries_Label) property of chart series, which will be displayed in corresponding legend. +N> Additionally, set a label for each series using the [Label](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartSeries.html#Syncfusion_UI_Xaml_Charts_ChartSeries_Label) property of the chart series, which will be displayed in the corresponding legend. {% tabs %} @@ -362,17 +362,17 @@ The following code example gives you the complete code of above configurations. + LegendIcon="Pentagon"> - @@ -431,10 +431,10 @@ public sealed partial class MainWindow : Window {% endtabs %} -The following chart is created as a result of the previous codes. +The following chart is created as a result of the above code. ![Getting Started WinUI Chart](Getting-Started_Images/WinUI_Chart.png) -N> Download demo application from [GitHub](https://github.com/SyncfusionExamples/GettingStartedChartWinUI/tree/main/PolarChartGettingStarted) +N> Download the demo application from [GitHub](https://github.com/SyncfusionExamples/GettingStartedChartWinUI/tree/main/PolarChartGettingStarted) -N> You can also explore our [WinUI Polar Chart example](https://github.com/syncfusion/winui-demos/tree/master/chart/Views/Polar%20Charts) that shows how to easily configure with built-in support for creating stunning visual effects. +N> You can also explore our [WinUI Polar Chart example](https://github.com/syncfusion/winui-demos/tree/master/chart/Views/Polar%20Charts), which shows how to easily configure with built-in support for creating stunning visual effects. diff --git a/winui/Polar-Chart/Legend.md b/winui/Polar-Chart/Legend.md index 1a5d573c7..c5f23181e 100644 --- a/winui/Polar-Chart/Legend.md +++ b/winui/Polar-Chart/Legend.md @@ -1,7 +1,7 @@ --- layout: post -title: Legend in WinUI Chart control | Syncfusion -description: This sections explains about how to configure the legend and its features title, icons, labels, and template in WinUI Chart (SfPolarChart). +title: Legend in WinUI Chart Control | Syncfusion +description: This section explains how to configure the legend and its features, such as title, icons, labels, and template in WinUI Chart (SfPolarChart). platform: WinUI control: SfPolarChart documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Legend in WinUI Chart (SfPolarChart) -The legend contains list of series in the chart. The information provided in each legend item helps to identify the corresponding series in the chart. +The legend contains a list of series in the chart. The information provided in each legend item helps identify the corresponding series in the chart. {% tabs %} @@ -39,7 +39,7 @@ chart.Legend = new ChartLegend(); ## Title -Polar chart provides support to add any `UIElement` as a title for legend. [Header](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartLegend.html#Syncfusion_UI_Xaml_Charts_ChartLegend_Header) property of [ChartLegend](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartLegend.html) is used to define the title for the legend. +The polar chart provides support to add any `UIElement` as a title for the legend. The [Header](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartLegend.html#Syncfusion_UI_Xaml_Charts_ChartLegend_Header) property of [ChartLegend](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartLegend.html) is used to define the title for the legend. {% tabs %} @@ -87,9 +87,8 @@ chart.Legend = legend; ## Icon The legend icon represents a symbol associated with each legend item. The appearance of the legend icon can be customized using the following properties: - -* [IconWidth](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartLegend.html#Syncfusion_UI_Xaml_Charts_ChartLegend_IconWidth) - Gets or sets the double value that represents the legend icon(s) width. -* [IconHeight](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartLegend.html#Syncfusion_UI_Xaml_Charts_ChartLegend_IconHeight) - Gets or sets the double value that represents that legend icon(s) height. +* [IconWidth](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartLegend.html#Syncfusion_UI_Xaml_Charts_ChartLegend_IconWidth) - Gets or sets the double value that represents the legend icon's width. +* [IconHeight](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartLegend.html#Syncfusion_UI_Xaml_Charts_ChartLegend_IconHeight) - Gets or sets the double value that represents the legend icon's height. * [IconVisibility](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartLegend.html#Syncfusion_UI_Xaml_Charts_ChartLegend_IconVisibility) - Gets or sets the visibility of the legend icon. {% tabs %} @@ -125,9 +124,9 @@ chart.Legend = new ChartLegend() ![Legend icon in WinUI Chart](Legend_images/WinUI_Chart_chart_Legend_Customize.png) -## Item spacing +## Item Spacing -[ItemMargin](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartLegend.html#Syncfusion_UI_Xaml_Charts_ChartLegend_ItemMargin) property of the [ChartLegend](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartLegend.html) is used to provide spacing between each legend items. +The [ItemMargin](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartLegend.html#Syncfusion_UI_Xaml_Charts_ChartLegend_ItemMargin) property of the [ChartLegend](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartLegend.html) is used to provide spacing between each legend item. {% tabs %} @@ -157,9 +156,9 @@ chart.Legend = new ChartLegend() ![Legend item spacing support in WinUI Chart](Legend_images/WinUI_Chart_Legend_item_spacing.png) -## Checkbox for legend +## Checkbox for Legend -Polar chart provides support to enable the checkbox for each legend item to visible or collapse the corresponding series. By default, the value of [CheckBoxVisibility](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartLegend.html#Syncfusion_UI_Xaml_Charts_ChartLegend_CheckBoxVisibility) property is `Collapsed`. +The polar chart provides support to enable the checkbox for each legend item to show or hide the corresponding series. By default, the value of [CheckBoxVisibility](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartLegend.html#Syncfusion_UI_Xaml_Charts_ChartLegend_CheckBoxVisibility) property is `Collapsed`. {% tabs %} @@ -189,7 +188,7 @@ chart.Legend = new ChartLegend() ![Checkbox support for legend in WinUI Chart](Legend_images/WinUI_Chart_Legend_CheckBox.png) -## Toggle Series Visibility +## Toggle Series Visibility By enabling the [ToggleSeriesVisibility](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartLegend.html#Syncfusion_UI_Xaml_Charts_ChartLegend_ToggleSeriesVisibility) property, the visibility of the series can be controlled by tapping the legend item. By default, the value of [ToggleSeriesVisibility](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartLegend.html#Syncfusion_UI_Xaml_Charts_ChartLegend_ToggleSeriesVisibility) property is `False`. @@ -222,11 +221,11 @@ chart.Legend = new ChartLegend() ![ToggleSeriesVisibility support for legend in WinUI Chart](Legend_images/WinUI_Chart_Legend_ToggleSeriesVisibility.png) -## Placement +# Placement -By using the [Placement](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartLegend.html#Syncfusion_UI_Xaml_Charts_ChartLegend_Placement) property, legends can be docked to the left, right, and top or bottom of the chart area. By default, the chart legend is docked at the top of the chart as mentioned earlier. +By using the [Placement](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartLegend.html#Syncfusion_UI_Xaml_Charts_ChartLegend_Placement) property, legends can be docked to the left, right, top, or bottom of the chart area. By default, the chart legend is docked at the top of the chart. -To display the legend at the right, set the [Placement](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartLegend.html#Syncfusion_UI_Xaml_Charts_ChartLegend_Placement) as [Right](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.LegendPlacement.html#Syncfusion_UI_Xaml_Charts_LegendPlacement_Right) as in the following code sample. +To display the legend on the right, set the [Placement](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartLegend.html#Syncfusion_UI_Xaml_Charts_ChartLegend_Placement) to [Right](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.LegendPlacement.html#Syncfusion_UI_Xaml_Charts_LegendPlacement_Right) as in the following code sample. {% tabs %} @@ -257,14 +256,13 @@ chart.Legend = new ChartLegend() ![Positioning the legend at right in WinUI Chart](Legend_images/WinUI_Chart_Legend_Dock_Right.png) -## Background customization - -The legend background appearance can be customized by using the following properties: +## Background Customization -[BorderThickness](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartLegend.html#Syncfusion_UI_Xaml_Charts_ChartLegend_BorderThickness) - used to change the stroke width of the legend. -[BorderBrush](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartLegend.html#Syncfusion_UI_Xaml_Charts_ChartLegend_BorderBrush) - used to change the stroke color of the legend. -[Background](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartLegend.html#Syncfusion_UI_Xaml_Charts_ChartLegend_Background) - used to change the background color of legend. -[CornerRadius](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartLegend.html#Syncfusion_UI_Xaml_Charts_ChartLegend_CornerRadius) - used to change the corner radius of the legend. +The legend's background appearance can be customized using the following properties: +* [BorderThickness](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartLegend.html#Syncfusion_UI_Xaml_Charts_ChartLegend_BorderThickness) - used to change the stroke width of the legend. +* [BorderBrush](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartLegend.html#Syncfusion_UI_Xaml_Charts_ChartLegend_BorderBrush) - used to change the stroke color of the legend. +* [Background](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartLegend.html#Syncfusion_UI_Xaml_Charts_ChartLegend_Background) - used to change the background color of the legend. +* [CornerRadius](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartLegend.html#Syncfusion_UI_Xaml_Charts_ChartLegend_CornerRadius) - used to change the corner radius of the legend. {% tabs %} diff --git a/winui/Polar-Chart/Overview.md b/winui/Polar-Chart/Overview.md index b5772376f..61b043689 100644 --- a/winui/Polar-Chart/Overview.md +++ b/winui/Polar-Chart/Overview.md @@ -1,7 +1,7 @@ --- layout: post -title: About WinUI Chart control | Syncfusion -description: Learn here all about introduction of Syncfusion® WinUI Chart (SfPolarChart) control with key features and more. +title: About WinUI Chart Control | Syncfusion +description: Learn all about the introduction of the Syncfusion® WinUI Chart (SfPolarChart) control with key features and more. platform: WinUI control: SfPolarChart documentation: ug @@ -9,17 +9,14 @@ documentation: ug # WinUI Chart (SfPolarChart) Overview -Syncfusion® WinUI Polar Chart is used to create the beautiful polar series to visualize the data in terms of values and angles, which are used in high quality WinUI applications. Polar chart is also known as star chart, spider chart, web chart, spider web chart, cobweb chart and radar chart. +The Syncfusion® WinUI Polar Chart is used to create beautiful polar series to visualize data in terms of values and angles, which are utilized in high-quality WinUI applications. The polar chart is also known as a star chart, spider chart, web chart, spider web chart, cobweb chart, and radar chart. ![Polar Chart in WinUI Chart](Getting-Started_Images/winui_polar_chart.png) -## Key features +## Key Features -* It supports line and area series for data representation and greater UI visualization. - -* Legends provide more information about the segments. The legend can also be used to collapse the segments. If an item exceeds the available bounds, the legends can be wrapped or scrolled. - -* Polar chart provides support for rendering multiple series at same time, with options to compare and visualize two different series simultaneously. - -* User friendly and provides various options for you to customize chart features like axis, title, data labels, and legends. +* Supports line and area series for data representation and enhanced UI visualization. +* Legends provide more information about the segments. The legend can also be used to collapse segments. If an item exceeds the available bounds, the legends can be wrapped or scrolled. +* The polar chart offers support for rendering multiple series at the same time, with options to compare and visualize two different series simultaneously. +* User-friendly and provides various options to customize chart features like axis, title, data labels, and legends. diff --git a/winui/Polar-Chart/Polar-Area.md b/winui/Polar-Chart/Polar-Area.md index 3fd775839..6b0060cb4 100644 --- a/winui/Polar-Chart/Polar-Area.md +++ b/winui/Polar-Chart/Polar-Area.md @@ -1,7 +1,7 @@ --- layout: post -title: Polar area chart | SfPolarChart | Syncfusion -description: Learn here all about the polar area chart and its features in Syncfusion® WinUI Chart (SfPolarChart) control. +title: Polar Area Chart | SfPolarChart | Syncfusion +description: Learn all about the polar area chart and its features in the Syncfusion® WinUI Chart (SfPolarChart) control. platform: WinUI control: SfPolarChart documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Polar Area Chart in WinUI Charts (SfPolarChart) -To render a area series in polar chart, create an instance of the [PolarAreaSeries](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.PolarAreaSeries.html) and add it to the [Series](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.SfPolarChart.html#Syncfusion_UI_Xaml_Charts_SfPolarChart_Series) collection property of [SfPolarChart](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.SfPolarChart.html). +To render an area series in a polar chart, create an instance of the [PolarAreaSeries](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.PolarAreaSeries.html) and add it to the [Series](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.SfPolarChart.html#Syncfusion_UI_Xaml_Charts_SfPolarChart_Series) collection property of [SfPolarChart](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.SfPolarChart.html). {% tabs %} @@ -65,9 +65,9 @@ chart.Series.Add(series3); ![PolarAreaSeries in WinUI chart](PolarArea_Images/WinUI_Chart_PolarAreaSeries.png) -## Grid line type +## Grid Line Type -The [GridLineType](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.SfPolarChart.html#Syncfusion_UI_Xaml_Charts_SfPolarChart_GridLineType) property is used to change the rendering type of axis grid lines. The default value of [GridLineType](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.SfPolarChart.html#Syncfusion_UI_Xaml_Charts_SfPolarChart_GridLineType) is [Circle](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.PolarChartGridLineType.html#Syncfusion_UI_Xaml_Charts_PolarChartGridLineType_Circle). By changing the grid line type as [Polygon](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.PolarChartGridLineType.html#Syncfusion_UI_Xaml_Charts_PolarChartGridLineType_Polygon), we can shown the polar chart similar like spider chart or web chart. +The [GridLineType](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.SfPolarChart.html#Syncfusion_UI_Xaml_Charts_SfPolarChart_GridLineType) property is used to change the rendering type of axis grid lines. The default value of [GridLineType](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.SfPolarChart.html#Syncfusion_UI_Xaml_Charts_SfPolarChart_GridLineType) is [Circle](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.PolarChartGridLineType.html#Syncfusion_UI_Xaml_Charts_PolarChartGridLineType_Circle). By changing the grid line type to [Polygon](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.PolarChartGridLineType.html#Syncfusion_UI_Xaml_Charts_PolarChartGridLineType_Polygon), the polar chart can resemble a spider chart or web chart. {% tabs %} @@ -106,7 +106,7 @@ chart.Series.Add(series); ## Closing Path -[IsClosed](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.PolarSeries.html#Syncfusion_UI_Xaml_Charts_PolarSeries_IsClosed) property is used to render the series with or without closed path. The default value of [IsClosed](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.PolarSeries.html#Syncfusion_UI_Xaml_Charts_PolarSeries_IsClosed) is `true`. +The [IsClosed](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.PolarSeries.html#Syncfusion_UI_Xaml_Charts_PolarSeries_IsClosed) property is used to render the series with or without a closed path. The default value of [IsClosed](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.PolarSeries.html#Syncfusion_UI_Xaml_Charts_PolarSeries_IsClosed) is `true`. {% tabs %} diff --git a/winui/Polar-Chart/Polar-Line.md b/winui/Polar-Chart/Polar-Line.md index 9e1b8fcb6..3697c5636 100644 --- a/winui/Polar-Chart/Polar-Line.md +++ b/winui/Polar-Chart/Polar-Line.md @@ -1,7 +1,7 @@ --- layout: post -title: Polar line chart | SfPolarChart | Syncfusion -description: Learn here all about the polar line chart and its features in Syncfusion® WinUI Chart (SfPolarChart) control. +title: Polar Line Chart | SfPolarChart | Syncfusion +description: Learn all about the polar line chart and its features in the Syncfusion® WinUI Chart (SfPolarChart) control. platform: WinUI control: SfPolarChart documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Polar Line Chart in WinUI Charts (SfPolarChart) -To render a line series in polar chart, create an instance of the [PolarLineSeries](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.PolarLineSeries.html) and add it to the [Series](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.SfPolarChart.html#Syncfusion_UI_Xaml_Charts_SfPolarChart_Series) collection property of [SfPolarChart](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.SfPolarChart.html). +To render a line series in a polar chart, create an instance of the [PolarLineSeries](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.PolarLineSeries.html) and add it to the [Series](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.SfPolarChart.html#Syncfusion_UI_Xaml_Charts_SfPolarChart_Series) collection property of [SfPolarChart](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.SfPolarChart.html). {% tabs %} @@ -64,9 +64,9 @@ chart.Series.Add(series3); ![PolarLineSeries in WinUI chart](PolarLine_Images/WinUI_Chart_PolarLineSeries.png) -## Grid line type +## Grid Line Type -The [GridLineType](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.SfPolarChart.html#Syncfusion_UI_Xaml_Charts_SfPolarChart_GridLineType) property is used to change the rendering type of axis grid lines. The default value of [GridLineType](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.SfPolarChart.html#Syncfusion_UI_Xaml_Charts_SfPolarChart_GridLineType) is [Circle](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.PolarChartGridLineType.html#Syncfusion_UI_Xaml_Charts_PolarChartGridLineType_Circle). By changing the grid line type as [Polygon](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.PolarChartGridLineType.html#Syncfusion_UI_Xaml_Charts_PolarChartGridLineType_Polygon), we can shown the polar chart similar like radar chart or spider chart or web chart. +The [GridLineType](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.SfPolarChart.html#Syncfusion_UI_Xaml_Charts_SfPolarChart_GridLineType) property is used to change the rendering type of axis grid lines. The default value of [GridLineType](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.SfPolarChart.html#Syncfusion_UI_Xaml_Charts_SfPolarChart_GridLineType) is [Circle](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.PolarChartGridLineType.html#Syncfusion_UI_Xaml_Charts_PolarChartGridLineType_Circle). By changing the grid line type to [Polygon](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.PolarChartGridLineType.html#Syncfusion_UI_Xaml_Charts_PolarChartGridLineType_Polygon), the polar chart can resemble a radar chart, spider chart, or web chart. {% tabs %} @@ -104,7 +104,7 @@ chart.Series.Add(series); ## Closing Path -[IsClosed](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.PolarSeries.html#Syncfusion_UI_Xaml_Charts_PolarSeries_IsClosed) property is used to render the series with or without closed path. The default value of [IsClosed](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.PolarSeries.html#Syncfusion_UI_Xaml_Charts_PolarSeries_IsClosed) is `true`. +The [IsClosed](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.PolarSeries.html#Syncfusion_UI_Xaml_Charts_PolarSeries_IsClosed) property is used to render the series with or without a closed path. The default value of [IsClosed](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.PolarSeries.html#Syncfusion_UI_Xaml_Charts_PolarSeries_IsClosed) is `true`. {% tabs %} diff --git a/winui/Polar-Chart/StartAngle.md b/winui/Polar-Chart/StartAngle.md index a2f0ea505..15490a3ae 100644 --- a/winui/Polar-Chart/StartAngle.md +++ b/winui/Polar-Chart/StartAngle.md @@ -1,7 +1,7 @@ --- layout: post -title: Start angle in WinUI Chart control | Syncfusion -description: This sections explains about how to change the angle position of rendering in Syncfusion® WinUI Chart (SfPolarChart) control. +title: Start Angle in WinUI Chart Control | Syncfusion +description: This section explains how to change the angle position of rendering in the Syncfusion® WinUI Chart (SfPolarChart) control. platform: WinUI control: SfPolarChart documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Rendering Position in WinUI Chart (SfPolarChart) -By using the [StartAngle](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.SfPolarChart.html#Syncfusion_UI_Xaml_Charts_SfPolarChart_StartAngle) property of polar chart, you can modify the rendering position of the series on four degree values: 0, 90, 180, and 270. The default value of [StartAngle](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.SfPolarChart.html#Syncfusion_UI_Xaml_Charts_SfPolarChart_StartAngle) property is [Rotate270](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartPolarAngle.html#Syncfusion_UI_Xaml_Charts_ChartPolarAngle_Rotate270). +By using the [StartAngle](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.SfPolarChart.html#Syncfusion_UI_Xaml_Charts_SfPolarChart_StartAngle) property of the polar chart, you can modify the rendering position of the series at four different degree values: 0, 90, 180, and 270. The default value of the [StartAngle](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.SfPolarChart.html#Syncfusion_UI_Xaml_Charts_SfPolarChart_StartAngle) property is [Rotate270](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartPolarAngle.html#Syncfusion_UI_Xaml_Charts_ChartPolarAngle_Rotate270). {% tabs %} diff --git a/winui/Polar-Chart/Title.md b/winui/Polar-Chart/Title.md index 068784f2f..d8e353d7b 100644 --- a/winui/Polar-Chart/Title.md +++ b/winui/Polar-Chart/Title.md @@ -1,7 +1,7 @@ --- layout: post -title: Title in WinUI Chart control | Syncfusion -description: Learn here all about the title in Syncfusion® WinUI Chart (SfPolarChart) control and its customization. +title: Title in WinUI Chart Control | Syncfusion +description: Learn all about the title in Syncfusion® WinUI Chart (SfPolarChart) control and its customization. platform: WinUI control: SfPolarChart documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Chart Title in WinUI Chart (SfPolarChart) -[Header](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartBase.html#Syncfusion_UI_Xaml_Charts_ChartBase_Header) property is used to define the title for the chart. +The [Header](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartBase.html#Syncfusion_UI_Xaml_Charts_ChartBase_Header) property is used to define the title for the chart. {% tabs %} @@ -36,7 +36,7 @@ this.Content = chart; ## Customization -Chart provides support to add any `UIElement` as a title. The following code example defines `TextBlock` as chart header. +The chart provides support to add any `UIElement` as a title. The following code example defines `TextBlock` as the chart header. {% tabs %} @@ -84,7 +84,7 @@ this.Content = chart; ## Alignment -The title text content can be aligned horizontally to the left, center or right of the chart using the [HorizontalHeaderAlignment](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartBase.html#Syncfusion_UI_Xaml_Charts_ChartBase_HorizontalHeaderAlignment) property of the [SfPolarChart](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.SfPolarChart.html). +The title text content can be aligned horizontally to the left, center, or right of the chart using the [HorizontalHeaderAlignment](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartBase.html#Syncfusion_UI_Xaml_Charts_ChartBase_HorizontalHeaderAlignment) property of the [SfPolarChart](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.SfPolarChart.html). {% tabs %}