diff --git a/wpf/SfChart3D/3DSeries.md b/wpf/SfChart3D/3DSeries.md index 0a2f9effa5..e50f1eeaa6 100644 --- a/wpf/SfChart3D/3DSeries.md +++ b/wpf/SfChart3D/3DSeries.md @@ -9,7 +9,7 @@ documentation: ug # Series in WPF SfChart3D -ChartSeries is the visual representation of the data. SfChart3D offers eight types of series. Based on your requirements and specifications, any type of Series can be added for data visualization. +ChartSeries is the visual representation of the data. SfChart3D offers eleven types of series. Based on your requirements and specifications, any type of Series can be added for data visualization. * Column * Bar @@ -19,15 +19,14 @@ ChartSeries is the visual representation of the data. SfChart3D offers eight typ * Stacking column * Stacking column 100 * Stacking bar -* Stacking bar +* Stacking bar 100 * Pie * Doughnut -The following APIs are common for the most of the series types: +The following APIs are common for most of the series types: * [`XBindingPath`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_XBindingPath) – A string property that represents the X values for the series. * [`YBindingPath`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.XyDataSeries3D.html#Syncfusion_UI_Xaml_Charts_XyDataSeries3D_YBindingPath) – A string property that represents the Y values for the series. -Eight types of chart [`Series`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfChart3D.html#Syncfusion_UI_Xaml_Charts_SfChart3D_Series). * [`Interior`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_Interior) – Represents the brush to fill the series. @@ -63,7 +62,7 @@ chart3D.Series.Add(series); ## Bar Charts -[`BarSeries3D`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.BarSeries3D.html) are similar to column series, excepts its orientation. +[`BarSeries3D`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.BarSeries3D.html) are similar to column series, except for their orientation. {% tabs %} @@ -93,7 +92,7 @@ chart3D.Series.Add(series); ### Spacing -[`Spacing`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_SpacingProperty) property of series is used to decide the width of a segment. [`Spacing`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_SpacingProperty) value ranges from 0 to 1. The following code illustrates how to set [`Spacing`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_SpacingProperty) property of the series, +[`Spacing`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_SpacingProperty) property of series is used to decide the width of a segment. [`Spacing`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_SpacingProperty) value ranges from 0 to 1. The following code illustrates how to set [`Spacing`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_SpacingProperty) property of the series: {% tabs %} @@ -124,7 +123,7 @@ chart3D.Series.Add(series); **Segment Spacing** -[`SegmentSpacing`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ColumnSeries.html#Syncfusion_UI_Xaml_Charts_ColumnSeries_SegmentSpacing) property is used to set the spacing among the segments, when multiple series are added in chart. Its value ranges from 0 to 1. The following code illustrates how to use the [`SegmentSpacing`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ColumnSeries.html#Syncfusion_UI_Xaml_Charts_ColumnSeries_SegmentSpacing) property in series, +[`SegmentSpacing`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ColumnSeries.html#Syncfusion_UI_Xaml_Charts_ColumnSeries_SegmentSpacing) property is used to set the spacing among the segments when multiple series are added in chart. Its value ranges from 0 to 1. The following code illustrates how to use the [`SegmentSpacing`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ColumnSeries.html#Syncfusion_UI_Xaml_Charts_ColumnSeries_SegmentSpacing) property in series: {% tabs %} @@ -145,16 +144,16 @@ chart3D.Series.Add(series); { ItemsSource = new CategoryDataViewModel().CategoricalData, XBindingPath = "Year", - YBindingPath = "Plastic" - SegmentSpacing = 0.6, + YBindingPath = "Plastic", + SegmentSpacing = 0.6 }; ColumnSeries3D series1 = new ColumnSeries3D() { ItemsSource = new CategoryDataViewModel().CategoricalData, XBindingPath = "Year", - YBindingPath = "Iron" - SegmentSpacing = 0.6, + YBindingPath = "Iron", + SegmentSpacing = 0.6 }; chart3D.Series.Add(series); @@ -167,7 +166,7 @@ chart3D.Series.Add(series); ![Spacing support in WPF 3D Chart](3D-Charts_images/Series/Column_SegmentSpacing.png) ## Line Charts -[`LineSeries3D`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.LineSeries3D.html#) join points on a plot by straight lines, showing data trends at equal intervals. +[`LineSeries3D`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.LineSeries3D.html#) joins points on a plot by straight lines, showing data trends at equal intervals. {% tabs %} @@ -187,19 +186,19 @@ chart3D.Series.Add(series); YBindingPath = "Metal" }; -chart3D.Series.Add(series); +chart3D.Series.Add(line); {% endhighlight %} {% endtabs %} -![Column Charts support in WPF 3D Chart](3D-Charts_images/Series/LineSeries3D.png) +![Line Charts support in WPF 3D Chart](3D-Charts_images/Series/LineSeries3D.png) ## Scatter Chart -[`ScatterSeries3D`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ScatterSeries3D.html#) will represent each point by a Rectangle with equal size. +[`ScatterSeries3D`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ScatterSeries3D.html#) represents each point by a Rectangle with equal size. -This size can be defined by using below properties. +This size can be defined by using the following properties: * [`ScatterHeight`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ScatterSeries3D.html#Syncfusion_UI_Xaml_Charts_ScatterSeries3D_ScatterHeight) * [`ScatterWidth`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ScatterSeries3D.html#Syncfusion_UI_Xaml_Charts_ScatterSeries3D_ScatterWidth) @@ -208,7 +207,7 @@ This size can be defined by using below properties. {% highlight xaml %} - {% endhighlight %} @@ -238,7 +237,7 @@ This size can be defined by using below properties. {% highlight xaml %} - {% endhighlight %} @@ -259,7 +258,7 @@ This size can be defined by using below properties. {% endtabs %} -![Scatter chart support in WPF 3D Chart](3D-Charts_images/Series/AreaSeries3D.png) +![Area chart support in WPF 3D Chart](3D-Charts_images/Series/AreaSeries3D.png) ## Stacking Charts @@ -273,13 +272,13 @@ The following code example illustrates how to use StackingColumnSeries3D: {% highlight xaml %} - - - {% endhighlight %} @@ -327,10 +326,10 @@ The following code example illustrates how to use StackingColumn100Series3D: {% highlight xaml %} - - + {% endhighlight %} @@ -348,7 +347,7 @@ The following code example illustrates how to use StackingColumn100Series3D: ItemsSource = new CategoryDataViewModel().CategoricalData, XBindingPath = "Year", YBindingPath = "Iron", - Interior=new SolidColorBrush(Colors.Brown) + Interior = new SolidColorBrush(Colors.Brown) }; chart3D.Series.Add(stack1); @@ -370,13 +369,13 @@ The following code example illustrates how to use StackingBarSeries3D: {% highlight xaml %} - - - {% endhighlight %} @@ -424,10 +423,10 @@ The following code example illustrates how to use StackingBar100Series3D: {% highlight xaml %} - - {% endhighlight %} @@ -461,13 +460,13 @@ The following code example illustrates how to use StackingBar100Series3D: [`PieSeries3D`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.PieSeries3D.html#) is divided into sectors, illustrating numerical proportion. -The following code example illustrates the PieSeries3D. +The following code example illustrates the PieSeries3D: {% tabs %} {% highlight xaml %} - {% endhighlight %} @@ -495,13 +494,13 @@ The following code example illustrates the PieSeries3D. [`DoughnutSeries3D`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DoughnutSeries3D.html#) is similar to PieSeries. It is used to show the relationship between parts of data and whole data. -The DoughnutSeries3D can be added to chart as in below code example: +The DoughnutSeries3D can be added to chart as in the below code example: {% tabs %} {% highlight xaml %} - + {% endhighlight %} @@ -524,14 +523,14 @@ The DoughnutSeries3D can be added to chart as in below code example: ### Coefficient -The [`DoughnutCoefficient`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DoughnutSeries3D.html#Syncfusion_UI_Xaml_Charts_DoughnutSeries3D_DoughnutCoefficient) and [`CircleCoefficient`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CircularSeriesBase3D.html#Syncfusion_UI_Xaml_Charts_CircularSeriesBase3D_CircleCoefficient) property to define the inner circle of Doughnut and Pie Charts. +The [`DoughnutCoefficient`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DoughnutSeries3D.html#Syncfusion_UI_Xaml_Charts_DoughnutSeries3D_DoughnutCoefficient) and [`CircleCoefficient`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CircularSeriesBase3D.html#Syncfusion_UI_Xaml_Charts_CircularSeriesBase3D_CircleCoefficient) properties define the inner circle of Doughnut and Pie Charts. {% tabs %} {% highlight xaml %} + XBindingPath="Year" YBindingPath="Iron"> {% endhighlight %} @@ -542,7 +541,7 @@ The [`DoughnutCoefficient`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xam ItemsSource = new CategoryDataViewModel().CategoricalData, XBindingPath = "Year", YBindingPath = "Iron", - DoughnutCoefficient=0.5 + DoughnutCoefficient = 0.5 }; chart.Series.Add(series); @@ -562,7 +561,7 @@ By using custom [`StartAngle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI. {% highlight xaml %} + DoughnutCoefficient="0.7" XBindingPath="Year" YBindingPath="Iron"> {% endhighlight %} @@ -573,9 +572,9 @@ By using custom [`StartAngle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI. ItemsSource = new CategoryDataViewModel().CategoricalData, XBindingPath = "Year", YBindingPath = "Iron", - DoughnutCoefficient=0.7, - StartAngle=180, - EndAngle=360 + DoughnutCoefficient = 0.7, + StartAngle = 180, + EndAngle = 360 }; chart.Series.Add(series); @@ -592,7 +591,7 @@ By using custom [`StartAngle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI. {% highlight xaml %} + CircleCoefficient="0.7" XBindingPath="Year" YBindingPath="Iron"> {% endhighlight %} @@ -603,9 +602,9 @@ By using custom [`StartAngle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI. ItemsSource = new CategoryDataViewModel().CategoricalData, XBindingPath = "Year", YBindingPath = "Iron", - CircleCoefficient=0.7, - StartAngle=180, - EndAngle=360 + CircleCoefficient = 0.7, + StartAngle = 180, + EndAngle = 360 }; chart.Series.Add(series); @@ -614,20 +613,20 @@ By using custom [`StartAngle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI. {% endtabs %} -![Doughnut support in WPF 3D Chart](3D-Charts_images/Series/Semi_Pie.png) +![Pie support in WPF 3D Chart](3D-Charts_images/Series/Semi_Pie.png) ## Dynamic explode This feature allows users to explode a particular segment in a circular series using [`ExplodeOnMouseClick`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.PieSeries3D.html#Syncfusion_UI_Xaml_Charts_PieSeries3D_ExplodeOnMouseClick). This can also be achieved by setting the [`ExplodeIndex`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CircularSeriesBase3D.html#Syncfusion_UI_Xaml_Charts_CircularSeriesBase3D_ExplodeIndex) or [`ExplodeAll`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CircularSeriesBase3D.html#Syncfusion_UI_Xaml_Charts_CircularSeriesBase3D_ExplodeAll) property. -The following code example illustrates how to enable dynamic explode for circular series, for data please refer series category in 3D charts. +The following code example illustrates how to enable dynamic explode for circular series, for data please refer to series category in 3D charts. {% tabs %} {% highlight xaml %} - @@ -640,7 +639,7 @@ The following code example illustrates how to enable dynamic explode for circula - + @@ -648,4 +647,4 @@ The following code example illustrates how to enable dynamic explode for circula {% endtabs %} -![Dynamic explode support in WPF 3D Chart](3D-Charts_images/Series/Dynamicexplode3D.png) +![Dynamic explode support in WPF 3D Chart](3D-Charts_images/Series/Dynamicexplode3D.png) \ No newline at end of file diff --git a/wpf/SfChart3D/Adornments.md b/wpf/SfChart3D/Adornments.md index d4a113fc19..81d8176131 100644 --- a/wpf/SfChart3D/Adornments.md +++ b/wpf/SfChart3D/Adornments.md @@ -1,7 +1,7 @@ --- layout: post -title: Adornments | SfChart | Wpf | Syncfusion -description: This section explains about adornments behavior and its customization properties in WPF Chart (SfChart3D) +title: Adornments | SfChart | WPF | Syncfusion +description: Learn about adornments behavior and customization properties in WPF Chart (SfChart3D) control platform: wpf control: SfChart3D documentation: ug @@ -9,45 +9,40 @@ documentation: ug # Adornments in WPF Chart (SfChart3D) -Adornments are used to provide information about the data points to the user. Values from data point(x, y) or other custom properties from a data source can be displayed.You can add a shape and label to adorn each data point. +Adornments are used to provide information about data points to the user. Values from data points (x, y) or other custom properties from a data source can be displayed. You can add a shape and label to adorn each data point. Each adornment can be represented by the following: - * Marker- Displays the desired symbol at the (X, Y) point. - * Label - Displays the segment label content at the (X, Y) point. - * ConnectorLine - Line used to connect the (X, Y) point and the label element. +* **Marker** - Displays the desired symbol at the (X, Y) point. +* **Label** - Displays the segment label content at the (X, Y) point. +* **ConnectorLine** - Line used to connect the (X, Y) point and the label element. - -The following code example illustrates how to initialize the adornment. +The following code example illustrates how to initialize adornments: {% tabs %} {% highlight xaml %} - - - - - - - - + + + + + + {% endhighlight %} {% highlight C# %} +StackingBarSeries3D series = new StackingBarSeries3D() +{ + ItemsSource = new ViewModel().CategoricalData, + XBindingPath = "Year", + YBindingPath = "Plastic" +}; - StackingBarSeries3D series = new StackingBarSeries3D() - { - ItemsSource = new ViewModel().CategoricalData, - XBindingPath = "Year", - YBindingPath = "Plastic" - }; - - ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() { ShowLabel = true }; +ChartAdornmentInfo3D adornmentInfo = new ChartAdornmentInfo3D() { ShowLabel = true }; - series.AdornmentsInfo = adornmentInfo; - - chart.Series.Add(series); +series.AdornmentsInfo = adornmentInfo; +chart.Series.Add(series); {% endhighlight %} {% endtabs %} @@ -56,44 +51,39 @@ The following code example illustrates how to initialize the adornment. ## Marker -To enable the marker in adornments you have to set the [`ShowMarker`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_ShowMarker) property as True. By default, there is no symbol displayed, you have to add the desired symbol using Symbol property. +To enable the marker in adornments, set the [`ShowMarker`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_ShowMarker) property to True. By default, there is no symbol displayed, you need to add the desired symbol using the Symbol property. The following code example demonstrates the column series with [`Diamond`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSymbol.html) symbol: - {% tabs %} {% highlight xaml %} - - - - - - - + + + + + {% endhighlight %} {% highlight c# %} - - ColumnSeries3D series = new ColumnSeries3D() - { - ItemsSource = new CategoryDataViewModel().CategoricalData, - XBindingPath = "Year", - YBindingPath = "Plastic" - }; - - ChartAdornmentInfo3D adornmentInfo = new ChartAdornmentInfo3D() - { - ShowMarker = true, - SymbolInterior = new SolidColorBrush(Colors.Brown), - Symbol = ChartSymbol.Diamond - }; - - series.AdornmentsInfo = adornmentInfo; - - chart.Series.Add(series); - +ColumnSeries3D series = new ColumnSeries3D() +{ + ItemsSource = new CategoryDataViewModel().CategoricalData, + XBindingPath = "Year", + YBindingPath = "Plastic" +}; + +ChartAdornmentInfo3D adornmentInfo = new ChartAdornmentInfo3D() +{ + ShowMarker = true, + SymbolInterior = new SolidColorBrush(Colors.Brown), + Symbol = ChartSymbol.Diamond +}; + +series.AdornmentsInfo = adornmentInfo; + +chart.Series.Add(series); {% endhighlight %} {% endtabs %} @@ -102,7 +92,7 @@ The following code example demonstrates the column series with [`Diamond`](https ### Customization of Symbol -SfChart3D provides support more customization for symbol in adornments. +SfChart3D provides extensive customization options for symbols in adornments: * [`SymbolHeight`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_SymbolHeight) * [`SymbolWidth`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_SymbolWidth) @@ -110,208 +100,190 @@ SfChart3D provides support more customization for symbol in adornments. * [`SymbolStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_SymbolStroke) * [`SymbolTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_SymbolTemplate) -The following code example demonstrates the basic customization of symbol size and appearance. +The following code example demonstrates basic customization of symbol size and appearance: {% tabs %} {% highlight xaml %} - - - - - - - + + + + + {% endhighlight %} {% highlight c# %} - - ColumnSeries3D series = new ColumnSeries3D() - { - ItemsSource = new CategoryDataViewModel().CategoricalData, - XBindingPath = "Year", - YBindingPath = "Plastic" - }; - - ChartAdornmentInfo3D adornmentInfo = new ChartAdornmentInfo3D() - { - ShowMarker = true, - SymbolInterior = new SolidColorBrush(Colors.Brown), - SymbolStroke=new SolidColorBrush(Colors.DarkGray), - Symbol = ChartSymbol.Triangle, - AdornmentsPosition = AdornmentsPosition.Top, - SymbolHeight = 15, - SymbolWidth = 15, - }; - - series.AdornmentsInfo = adornmentInfo; - - chart.Series.Add(series); - +ColumnSeries3D series = new ColumnSeries3D() +{ + ItemsSource = new CategoryDataViewModel().CategoricalData, + XBindingPath = "Year", + YBindingPath = "Plastic" +}; + +ChartAdornmentInfo3D adornmentInfo = new ChartAdornmentInfo3D() +{ + ShowMarker = true, + SymbolInterior = new SolidColorBrush(Colors.Brown), + SymbolStroke = new SolidColorBrush(Colors.DarkGray), + Symbol = ChartSymbol.Triangle, + AdornmentsPosition = AdornmentsPosition.Top, + SymbolHeight = 15, + SymbolWidth = 15, +}; + +series.AdornmentsInfo = adornmentInfo; + +chart.Series.Add(series); {% endhighlight %} {% endtabs %} -![ Custom Symbol in Adornment](3D-Charts_images/Adornments/SymblBasic.png) +![Custom Symbol in Adornment](3D-Charts_images/Adornments/SymblBasic.png) **SymbolTemplate** -The following code example demonstrates how to use SymbolTemplate. +The following code example demonstrates how to use SymbolTemplate: {% tabs %} {% highlight xaml %} - - - - - - - - - - - - - - - - - - - - + + + + - - - + + + + + + + + + + + + + + + + - - - ... - + . . . + - - - + + + - - ... - + . . . + - {% endhighlight %} {% endtabs %} -![ Custom Symbol in Adornment](3D-Charts_images/Adornments/SymbolCustom.png) +![Custom Symbol in Adornment](3D-Charts_images/Adornments/SymbolCustom.png) ## Label -SfChart provides the support to customize the label content using [`SegmentLabelContent`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_SegmentLabelContent) property. This property allows you to define the value to be displayed as adornment label. +SfChart provides support to customize the label content using the [`SegmentLabelContent`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_SegmentLabelContent) property. This property allows you to define the value to be displayed as the adornment label. {% tabs %} {% highlight xaml %} - - - - - - - + + + + + {% endhighlight %} {% highlight c# %} - - ColumnSeries3D series = new ColumnSeries3D() - { - ItemsSource = new CategoryDataViewModel().CategoricalData, - XBindingPath = "Year", - YBindingPath = "Plastic" - }; - - ChartAdornmentInfo3D adornmentInfo = new ChartAdornmentInfo3D() - { - ShowLabel = true, - SegmentLabelContent=LabelContent.LabelContentPath, - AdornmentsPosition=AdornmentsPosition.Top - }; - - series.AdornmentsInfo = adornmentInfo; - - chart.Series.Add(series); - +ColumnSeries3D series = new ColumnSeries3D() +{ + ItemsSource = new CategoryDataViewModel().CategoricalData, + XBindingPath = "Year", + YBindingPath = "Plastic" +}; + +ChartAdornmentInfo3D adornmentInfo = new ChartAdornmentInfo3D() +{ + ShowLabel = true, + SegmentLabelContent = LabelContent.LabelContentPath, + AdornmentsPosition = AdornmentsPosition.Top +}; + +series.AdornmentsInfo = adornmentInfo; + +chart.Series.Add(series); {% endhighlight %} {% endtabs %} | SegmentLabelContent values | Description | Output | |---|--|---| -| DateTime | Displays LabelContent.DateTime value | ![ DateTime in Adornment](3D-Charts_images/Adornments/Adorn_DateTime.png) | -|LabelContentPath | Displays the y value|![ LabelContentPath in Adornment](3D-Charts_images/Adornments/Adorn_LabelContent.png)| -| Percentage | Displays the percentage value of series' point among other points |![ Percentage in Adornment](3D-Charts_images/Adornments/Adorn_Percentage.png) | -| XValue | Displays the X value of series' point|![ XValue in Adornment](3D-Charts_images/Adornments/Adorn_Xvalue.png) | -| YofTot | Displays the value of Y of total values' point|![ YofTot in Adornment](3D-Charts_images/Adornments/Adorn_YofTop.png) | -| YValue | Displays the Y value of series' point| ![ YValue in Adornment](3D-Charts_images/Adornments/Adorn_YValue.png) | +| DateTime | Displays LabelContent.DateTime value | ![DateTime in Adornment](3D-Charts_images/Adornments/Adorn_DateTime.png) | +| LabelContentPath | Displays the y value | ![LabelContentPath in Adornment](3D-Charts_images/Adornments/Adorn_LabelContent.png) | +| Percentage | Displays the percentage value of series' point among other points | ![Percentage in Adornment](3D-Charts_images/Adornments/Adorn_Percentage.png) | +| XValue | Displays the X value of series' point | ![XValue in Adornment](3D-Charts_images/Adornments/Adorn_Xvalue.png) | +| YofTot | Displays the value of Y of total values' point | ![YofTot in Adornment](3D-Charts_images/Adornments/Adorn_YofTop.png) | +| YValue | Displays the Y value of series' point | ![YValue in Adornment](3D-Charts_images/Adornments/Adorn_YValue.png) | ### Label Rotation -[`LabelRotationAngle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_LabelRotationAngle) property is used to define the angle to which the label has to rotate. The following code demonstrates the label rotating angle. +The [`LabelRotationAngle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_LabelRotationAngle) property is used to define the angle to which the label should rotate. The following code demonstrates the label rotation angle: {% tabs %} {% highlight xaml %} - - - - - - - + + + + + {% endhighlight %} {% highlight c# %} - - ColumnSeries3D series = new ColumnSeries3D() - { - ItemsSource = new CategoryDataViewModel().CategoricalData, - XBindingPath = "Year", - YBindingPath = "Plastic", - }; - - ChartAdornmentInfo3D adornmentInfo = new ChartAdornmentInfo3D() - { - ShowLabel = true, - LabelRotationAngle=45, - LabelPosition=AdornmentsLabelPosition.Outer - }; - - series.AdornmentsInfo = adornmentInfo; - - chart.Series.Add(series); - +ColumnSeries3D series = new ColumnSeries3D() +{ + ItemsSource = new CategoryDataViewModel().CategoricalData, + XBindingPath = "Year", + YBindingPath = "Plastic", +}; + +ChartAdornmentInfo3D adornmentInfo = new ChartAdornmentInfo3D() +{ + ShowLabel = true, + LabelRotationAngle = 45, + LabelPosition = AdornmentsLabelPosition.Outer +}; + +series.AdornmentsInfo = adornmentInfo; + +chart.Series.Add(series); {% endhighlight %} {% endtabs %} @@ -320,7 +292,7 @@ SfChart provides the support to customize the label content using [`SegmentLabel ### Customization -The following properties are used to customize the adornment label. +The following properties are used to customize the adornment label: * [`BorderBrush`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_BorderBrush) * [`BorderThickness`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_BorderThickness) @@ -331,50 +303,46 @@ The following properties are used to customize the adornment label. * [`FontFamily`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_FontFamily) * [`Background`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_Background) -The following code example demonstrates the customization of label using the above properties: +The following code example demonstrates the customization of labels using the above properties: {% tabs %} {% highlight xaml %} - - - - - - + + + + + {% endhighlight %} {% highlight c# %} - - ColumnSeries3D series = new ColumnSeries3D() - { - ItemsSource = new CategoryDataViewModel().CategoricalData, - XBindingPath = "Year", - YBindingPath = "Plastic", - }; - - ChartAdornmentInfo3D adornmentInfo = new ChartAdornmentInfo3D() - { - - ShowLabel = true, - LabelPosition = AdornmentsLabelPosition.Outer, - Foreground = new SolidColorBrush(Colors.Black), - BorderBrush = new SolidColorBrush(Colors.Aqua), - Background = new SolidColorBrush(Colors.SkyBlue), - BorderThickness = new Thickness(1), - Margin = new Thickness(1), - FontStyle = FontStyles.Italic, - FontFamily = new FontFamily("Calibri"), - FontSize = 11 - - }; - - series.AdornmentsInfo = adornmentInfo; - - chart.Series.Add(series); - +ColumnSeries3D series = new ColumnSeries3D() +{ + ItemsSource = new CategoryDataViewModel().CategoricalData, + XBindingPath = "Year", + YBindingPath = "Plastic", +}; + +ChartAdornmentInfo3D adornmentInfo = new ChartAdornmentInfo3D() +{ + ShowLabel = true, + LabelPosition = AdornmentsLabelPosition.Outer, + Foreground = new SolidColorBrush(Colors.Black), + BorderBrush = new SolidColorBrush(Colors.Aqua), + Background = new SolidColorBrush(Colors.SkyBlue), + BorderThickness = new Thickness(1), + Margin = new Thickness(1), + FontStyle = FontStyles.Italic, + FontFamily = new FontFamily("Calibri"), + FontSize = 11 +}; + +series.AdornmentsInfo = adornmentInfo; + +chart.Series.Add(series); {% endhighlight %} {% endtabs %} @@ -383,44 +351,40 @@ The following code example demonstrates the customization of label using the abo ## Applying Series Brush -[`UseSeriesPalette`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_UseSeriesPalette) property is used to set the interior of the series to the adornment background. +The [`UseSeriesPalette`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_UseSeriesPalette) property is used to set the interior of the series to the adornment background. -For Accumulation like Pie, Doughnut, Funnel and Pyramid the segment interior color will be reflected in adornment background. +For accumulation series like Pie, Doughnut, Funnel, and Pyramid, the segment interior color will be reflected in the adornment background. {% tabs %} {% highlight xaml %} - - - - - - + + + + + {% endhighlight %} {% highlight c# %} - - ColumnSeries3D series = new ColumnSeries3D() - { - ItemsSource = new CategoryDataViewModel().CategoricalData, - XBindingPath = "Year", - YBindingPath = "Plastic", - }; - - ChartAdornmentInfo3D adornmentInfo = new ChartAdornmentInfo3D() - { - - ShowLabel = true, - LabelPosition = AdornmentsLabelPosition.Outer, - UseSeriesPalette=true - }; - - series.AdornmentsInfo = adornmentInfo; - - chart.Series.Add(series); - +ColumnSeries3D series = new ColumnSeries3D() +{ + ItemsSource = new CategoryDataViewModel().CategoricalData, + XBindingPath = "Year", + YBindingPath = "Plastic", +}; + +ChartAdornmentInfo3D adornmentInfo = new ChartAdornmentInfo3D() +{ + ShowLabel = true, + LabelPosition = AdornmentsLabelPosition.Outer, + UseSeriesPalette = true +}; + +series.AdornmentsInfo = adornmentInfo; + +chart.Series.Add(series); {% endhighlight %} {% endtabs %} @@ -429,93 +393,82 @@ For Accumulation like Pie, Doughnut, Funnel and Pyramid the segment interior col ## Label Format -[`SegmentLabelFormat`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_SegmentLabelFormat) property allows you to provide formatting for the labels. - +The [`SegmentLabelFormat`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_SegmentLabelFormat) property allows you to provide formatting for the labels. The following code example demonstrates the label having three decimal digits: {% tabs %} {% highlight xaml %} - - - - - - - + + + + + {% endhighlight %} {% highlight c# %} - - ColumnSeries3D series = new ColumnSeries3D() - { - ItemsSource = new CategoryDataViewModel().CategoricalData, - XBindingPath = "Year", - YBindingPath = "Plastic", - }; - - ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() - { - ShowLabel = true, - AdornmentsPosition = AdornmentsPosition.Top, - SegmentLabelFormat = "0.000" - }; - - series.AdornmentsInfo = adornmentInfo; - - chart.Series.Add(series); - +ColumnSeries3D series = new ColumnSeries3D() +{ + ItemsSource = new CategoryDataViewModel().CategoricalData, + XBindingPath = "Year", + YBindingPath = "Plastic", +}; + +ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() +{ + ShowLabel = true, + AdornmentsPosition = AdornmentsPosition.Top, + SegmentLabelFormat = "0.000" +}; + +series.AdornmentsInfo = adornmentInfo; + +chart.Series.Add(series); {% endhighlight %} {% endtabs %} ![Adornments label format support in WPF Chart](3D-Charts_images/Adornments/Label_Format.png) - ## ConnectorLine -You can add connector line for the adornments using [`ShowConnectorLine`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_ShowConnectorLine) property. Also this connector line can be customized using [`ConnectorHeight`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_ConnectorHeight), [`ConnectorLineStyle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_ConnectorLineStyle) and [`ConnectorRotationAngle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_ConnectorRotationAngle) properties. - +You can add a connector line for the adornments using the [`ShowConnectorLine`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_ShowConnectorLine) property. This connector line can be customized using [`ConnectorHeight`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_ConnectorHeight), [`ConnectorLineStyle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_ConnectorLineStyle), and [`ConnectorRotationAngle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_ConnectorRotationAngle) properties. -The following code example shows the how to add connector line: +The following code example shows how to add a connector line: {% tabs %} {% highlight xaml %} - - - - - - - + + + + + {% endhighlight %} {% highlight c# %} - - ColumnSeries3D series = new ColumnSeries3D() - { - ItemsSource = new CategoryDataViewModel().CategoricalData, - XBindingPath = "Year", - YBindingPath = "Plastic" - }; - - ChartAdornmentInfo3D adornmentInfo = new ChartAdornmentInfo3D() - { - ShowLabel = true, - LabelPosition = AdornmentsLabelPosition.Outer, - ShowConnectorLine = true, - ConnectorHeight = 10 - }; - - series.AdornmentsInfo = adornmentInfo; - - chart.Series.Add(series); - +ColumnSeries3D series = new ColumnSeries3D() +{ + ItemsSource = new CategoryDataViewModel().CategoricalData, + XBindingPath = "Year", + YBindingPath = "Plastic" +}; + +ChartAdornmentInfo3D adornmentInfo = new ChartAdornmentInfo3D() +{ + ShowLabel = true, + LabelPosition = AdornmentsLabelPosition.Outer, + ShowConnectorLine = true, + ConnectorHeight = 10 +}; + +series.AdornmentsInfo = adornmentInfo; + +chart.Series.Add(series); {% endhighlight %} {% endtabs %} @@ -524,50 +477,46 @@ The following code example shows the how to add connector line: ### Connector Type -[`ConnectorType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CircularSeriesBase.html#Syncfusion_UI_Xaml_Charts_CircularSeriesBase_ConnectorType) property in AccumulationSeries is used to specify the connector line type such as [`Line`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ConnectorMode.html) or [`Bezier`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ConnectorMode.html). This property is only for AccumulationSeries like PieSeries and DoughnutSeries. +The [`ConnectorType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CircularSeriesBase.html#Syncfusion_UI_Xaml_Charts_CircularSeriesBase_ConnectorType) property in AccumulationSeries is used to specify the connector line type such as [`Line`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ConnectorMode.html) or [`Bezier`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ConnectorMode.html). This property is only for AccumulationSeries like PieSeries and DoughnutSeries. -The following code example shows the how to specify connector type: +The following code example shows how to specify connector type: {% tabs %} {% highlight xaml %} - - - - - - - + + + + + {% endhighlight %} {% highlight c# %} - - PieSeries3D series = new PieSeries3D() - { - ItemsSource = new CategoryDataViewModel().CategoricalData, - XBindingPath = "Year", - YBindingPath = "Plastic", - LabelPosition=CircularSeriesLabelPosition.OutsideExtended, - ConnectorType=ConnectorMode.Line, - CircleCoefficient=0.7, - EnableSmartLabels=true - }; - - ChartAdornmentInfo3D adornmentInfo = new ChartAdornmentInfo3D() - { - ShowLabel = true, - SegmentLabelContent = LabelContent.LabelContentPath, - LabelPosition=AdornmentsLabelPosition.Outer, - ShowConnectorLine = true, - ConnectorHeight=80 - }; - - series.AdornmentsInfo = adornmentInfo; - - chart.Series.Add(series); - +PieSeries3D series = new PieSeries3D() +{ + ItemsSource = new CategoryDataViewModel().CategoricalData, + XBindingPath = "Year", + YBindingPath = "Plastic", + LabelPosition = CircularSeriesLabelPosition.OutsideExtended, + ConnectorType = ConnectorMode.Line, + CircleCoefficient = 0.7, + EnableSmartLabels = true +}; + +ChartAdornmentInfo3D adornmentInfo = new ChartAdornmentInfo3D() +{ + ShowLabel = true, + SegmentLabelContent = LabelContent.LabelContentPath, + LabelPosition = AdornmentsLabelPosition.Outer, + ShowConnectorLine = true, + ConnectorHeight = 80 +}; + +series.AdornmentsInfo = adornmentInfo; + +chart.Series.Add(series); {% endhighlight %} {% endtabs %} @@ -577,7 +526,7 @@ The following code example shows the how to specify connector type: | Line | ![Connector Line in WPF Chart](3D-Charts_images/Adornments/Adorn_Line.png) | | Bezier | ![Bezier in WPF Chart](3D-Charts_images/Adornments/Adorn_Bezier.png)| -N> ConnectorType.StraightLine behavior does not applicable for 3D series. +N> ConnectorType.StraightLine behavior does not apply to 3D series. ### Customization of ConnectorLine Appearance @@ -688,7 +637,6 @@ The following section shows few examples for this LabelPosition behavior with re | Outer | ![Outer Position in WPF Chart](3D-Charts_images/Adornments/Label_Outer_Column.png) | ![Auto Position in WPF Chart](3D-Charts_images/Adornments/Label_Outer_Line.png) | | Center | ![Auto Position in WPF Chart](3D-Charts_images/Adornments/Label_Center_Column.png) | ![Auto Position in WPF Chart](3D-Charts_images/Adornments/Label_Center_Line.png) | - ## Smart Labels When you have more datapoints in Pie or Doughnut series, the adornment labels might get overlap with each other. SfChart provides built-in support to avoid these overlapping by using [`EnableSmartLabels`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CircularSeriesBase.html#Syncfusion_UI_Xaml_Charts_CircularSeriesBase_EnableSmartLabels) property. @@ -739,4 +687,4 @@ The following code example demonstrates the EnableSmartLabels property: ![Smart Labels in WPF Chart](3D-Charts_images/Adornments/SmartLabels.png) -N> For circular series, the adornment position can be changed to [`Inside`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CircularSeriesLabelPosition.html), [`Outside`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CircularSeriesLabelPosition.html) or [`OutsideExtended`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CircularSeriesLabelPosition.html) using the [`LabelPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CircularSeriesBase.html#Syncfusion_UI_Xaml_Charts_CircularSeriesBase_LabelPosition) property. +N> For circular series, the adornment position can be changed to [`Inside`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CircularSeriesLabelPosition.html), [`Outside`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CircularSeriesLabelPosition.html) or [`OutsideExtended`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CircularSeriesLabelPosition.html) using the [`LabelPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CircularSeriesBase.html#Syncfusion_UI_Xaml_Charts_CircularSeriesBase_LabelPosition) property. \ No newline at end of file diff --git a/wpf/SfChart3D/Adornments/DataMarkers.md b/wpf/SfChart3D/Adornments/DataMarkers.md index 9ed0a73461..6e2ced6c93 100644 --- a/wpf/SfChart3D/Adornments/DataMarkers.md +++ b/wpf/SfChart3D/Adornments/DataMarkers.md @@ -9,48 +9,46 @@ documentation: ug # Data Markers in WPF SfChart3D -Adornments (Data Markers) are used to provide information about the data points to the user. Values from data point(x, y) or other custom properties from a data source can be displayed.You can add a shape and label to adorn each data point. +Adornments (Data Markers) are used to provide information about the data points to the user. Values from data points (x, y) or other custom properties from a data source can be displayed. You can add a shape and label to adorn each data point. Each adornment can be represented by the following: -* Marker- Displays the desired symbol at the (X, Y) point. +* Marker - Displays the desired symbol at the (X, Y) point. * Label - Displays the segment label content at the (X, Y) point. * ConnectorLine - Line used to connect the (X, Y) point and the label element. - -The following code example illustrates how to initialize the adornment. +The following code example illustrates how to initialize the adornment: {% tabs %} {% highlight xaml %} - - - - - - + + + + + + {% endhighlight %} {% highlight C# %} - ColumnSeries3D series = new ColumnSeries3D() - { - ItemsSource = new ViewModel().CategoricalData, - XBindingPath = "Year", - YBindingPath = "Plastic" - }; +ColumnSeries3D series = new ColumnSeries3D() +{ + ItemsSource = new ViewModel().CategoricalData, + XBindingPath = "Year", + YBindingPath = "Plastic" +}; - ChartAdornmentInfo3D adornmentInfo = new ChartAdornmentInfo3D() { ShowLabel = true }; +ChartAdornmentInfo3D adornmentInfo = new ChartAdornmentInfo3D() { ShowLabel = true }; - series.AdornmentsInfo = adornmentInfo; +series.AdornmentsInfo = adornmentInfo; - chart.Series.Add(series); +chart.Series.Add(series); {% endhighlight %} {% endtabs %} -![Chart 3D support in WPF](Adornments-Images/Chart-3D-Adornment.png) - +![Chart 3D support in WPF](Adornments-Images/Chart-3D-Adornment.png) \ No newline at end of file diff --git a/wpf/SfChart3D/Adornments/Labels.md b/wpf/SfChart3D/Adornments/Labels.md index af7a4ac59a..5f716f3127 100644 --- a/wpf/SfChart3D/Adornments/Labels.md +++ b/wpf/SfChart3D/Adornments/Labels.md @@ -9,12 +9,12 @@ documentation: ug # Data Label in WPF SfChart3D - Data points can be easily annotated with labels to help improve the readability of data. +Data points can be easily annotated with labels to help improve the readability of data. ## Define Label Content -To enable the marker in adornments you have to set the [`ShowLabel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_ShowLabel) property as True. +To enable labels in adornments, set the [`ShowLabel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_ShowLabel) property to True. - [`SegmentLabelContent`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_SegmentLabelContent) property allows you to define the value to be displayed as adornment label. +The [`SegmentLabelContent`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_SegmentLabelContent) property allows you to define the value to be displayed as the adornment label. {% tabs %} @@ -41,8 +41,8 @@ To enable the marker in adornments you have to set the [`ShowLabel`](https://hel ChartAdornmentInfo3D adornmentInfo = new ChartAdornmentInfo3D() { ShowLabel = true, - SegmentLabelContent=LabelContent.DateTime, - AdornmentsPosition=AdornmentsPosition.Top + SegmentLabelContent = LabelContent.DateTime, + AdornmentsPosition = AdornmentsPosition.Top }; series.AdornmentsInfo = adornmentInfo; @@ -64,27 +64,27 @@ To enable the marker in adornments you have to set the [`ShowLabel`](https://hel ## Customizing the label -The following properties are used to customize the adornment label. +The following properties are used to customize the adornment label: -* [`BorderBrush`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_BorderBrush) - used to change the border color. -* [`BorderThickness`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_BorderThickness) - used to change the thickness of the border. -* [`Margin`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_Margin) - used to change the margin size for label. -* [`FontStyle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_FontStyle) - used to change font family of the label. -* [`FontSize`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_FontSize) - used to change font size of the label. -* [`Foreground`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_Foreground) - used to change the color of the label. -* [`FontFamily`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_FontFamily) - used to change the font family of the label. -* [`Background`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_Background) - used to change the label background color. +* [`BorderBrush`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_BorderBrush) - Used to change the border color. +* [`BorderThickness`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_BorderThickness) - Used to change the thickness of the border. +* [`Margin`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_Margin) - Used to change the margin size for the label. +* [`FontStyle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_FontStyle) - Used to change the font style of the label. +* [`FontSize`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_FontSize) - Used to change the font size of the label. +* [`Foreground`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_Foreground) - Used to change the color of the label. +* [`FontFamily`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_FontFamily) - Used to change the font family of the label. +* [`Background`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_Background) - Used to change the label background color. -The following code example demonstrates the customization of label using the above properties: +The following code example demonstrates the customization of labels using the above properties: {% tabs %} {% highlight xaml %} - - + @@ -124,13 +124,13 @@ The following code example demonstrates the customization of label using the abo ## Label Rotation -[`LabelRotationAngle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_LabelRotationAngle) property is used to define the angle to which the label has to rotate. The following code demonstrates the label rotating angle. +The [`LabelRotationAngle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_LabelRotationAngle) property is used to define the angle to which the label should rotate. The following code demonstrates the label rotation: {% tabs %} {% highlight xaml %} - @@ -151,9 +151,9 @@ The following code example demonstrates the customization of label using the abo ChartAdornmentInfo3D adornmentInfo = new ChartAdornmentInfo3D() { ShowLabel = true, - LabelRotationAngle=45, - LabelPosition=AdornmentsLabelPosition.Outer, - UseSeriesPalette=true, + LabelRotationAngle = 45, + LabelPosition = AdornmentsLabelPosition.Outer, + UseSeriesPalette = true, BorderBrush = new SolidColorBrush(Colors.White), BorderThickness = new Thickness(1), }; @@ -170,16 +170,15 @@ The following code example demonstrates the customization of label using the abo ## Label Format -[`SegmentLabelFormat`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_SegmentLabelFormat) property allows you to provide formatting for the labels. - +The [`SegmentLabelFormat`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_SegmentLabelFormat) property allows you to provide formatting for the labels. -The following code example demonstrates the label having three decimal digits: +The following code example demonstrates a label with three decimal digits: {% tabs %} {% highlight xaml %} - ConnectorType.StraightLine behavior does not applicable for 3D series. +N> ConnectorType.StraightLine behavior does not apply to 3D series. ### Customization of ConnectorLine Appearance -You can define the style for the connector line using [`ConnectorLineStyle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_ConnectorLineStyle) properties. +You can define the style for the connector line using the [`ConnectorLineStyle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_ConnectorLineStyle) property. {% tabs %} @@ -349,9 +346,9 @@ You can define the style for the connector line using [`ConnectorLineStyle`](htt ## Applying Series Brush -The [`UseSeriesPalette`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_UseSeriesPalette) property is used to apply the series color to background color of data marker labels. +The [`UseSeriesPalette`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_UseSeriesPalette) property is used to apply the series color to the background color of data marker labels. -For Accumulation like Pie, Doughnut, Funnel and Pyramid the segment interior color will be reflected in adornment background. +For Accumulation series like Pie, Doughnut, Funnel, and Pyramid, the segment interior color will be reflected in the adornment background. {% tabs %} @@ -368,7 +365,7 @@ For Accumulation like Pie, Doughnut, Funnel and Pyramid the segment interior col { ShowLabel = true, LabelPosition = AdornmentsLabelPosition.Outer, - UseSeriesPalette=true + UseSeriesPalette = true }; {% endhighlight %} @@ -377,7 +374,7 @@ For Accumulation like Pie, Doughnut, Funnel and Pyramid the segment interior col ## Smart Labels -When you have more datapoints in Pie or Doughnut series, the adornment labels might get overlap with each other. SfChart3D provides built-in support to avoid these overlapping by using [`EnableSmartLabels`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CircularSeriesBase.html#Syncfusion_UI_Xaml_Charts_CircularSeriesBase_EnableSmartLabels) property. +When you have more datapoints in Pie or Doughnut series, the adornment labels might overlap with each other. SfChart3D provides built-in support to avoid these overlaps by using the [`EnableSmartLabels`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CircularSeriesBase.html#Syncfusion_UI_Xaml_Charts_CircularSeriesBase_EnableSmartLabels) property. The following code example demonstrates the EnableSmartLabels property: @@ -385,7 +382,7 @@ The following code example demonstrates the EnableSmartLabels property: {% highlight xaml %} - @@ -404,16 +401,16 @@ The following code example demonstrates the EnableSmartLabels property: LabelPosition = CircularSeriesLabelPosition.OutsideExtended, ConnectorType = ConnectorMode.StraightLine, EnableSmartLabels = true, - ExplodeAll=true, - ExplodeRadius=3 + ExplodeAll = true, + ExplodeRadius = 3 }; ChartAdornmentInfo3D adornmentInfo = new ChartAdornmentInfo3D() { ShowLabel = true, ShowConnectorLine = true, - HorizontalAlignment=HorizontalAlignment.Center, - VerticalAlignment=VerticalAlignment.Center + HorizontalAlignment = HorizontalAlignment.Center, + VerticalAlignment = VerticalAlignment.Center }; series.AdornmentsInfo = adornmentInfo; @@ -425,4 +422,4 @@ The following code example demonstrates the EnableSmartLabels property: ![Smart Labels in WPF Chart](Adornments-Images/SmartLabels.png) -N> For circular series, the adornment position can be changed to [`Inside`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CircularSeriesLabelPosition.html), [`Outside`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CircularSeriesLabelPosition.html) or [`OutsideExtended`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CircularSeriesLabelPosition.html) using the [`LabelPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CircularSeriesBase.html#Syncfusion_UI_Xaml_Charts_CircularSeriesBase_LabelPosition) property. +N> For circular series, the adornment position can be changed to [`Inside`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CircularSeriesLabelPosition.html), [`Outside`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CircularSeriesLabelPosition.html) or [`OutsideExtended`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CircularSeriesLabelPosition.html) using the [`LabelPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CircularSeriesBase.html#Syncfusion_UI_Xaml_Charts_CircularSeriesBase_LabelPosition) property. \ No newline at end of file diff --git a/wpf/SfChart3D/Adornments/Marker.md b/wpf/SfChart3D/Adornments/Marker.md index 4a14156f10..95386336a0 100644 --- a/wpf/SfChart3D/Adornments/Marker.md +++ b/wpf/SfChart3D/Adornments/Marker.md @@ -13,11 +13,10 @@ Data Marker is used to mark the data points with built-in available shapes. ## Define Data Marker -To enable the marker in adornments you have to set the [`ShowMarker`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_ShowMarker) property as True. By default, there is no symbol displayed, you have to add the desired symbol using Symbol property. +To enable the marker in adornments, you have to set the [`ShowMarker`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_ShowMarker) property as True. By default, there is no symbol displayed, so you need to add the desired symbol using the Symbol property. The following code example demonstrates the column series with [`Diamond`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSymbol.html) symbol: - {% tabs %} {% highlight xaml %} @@ -46,7 +45,7 @@ The following code example demonstrates the column series with [`Diamond`](https ShowMarker = true, SymbolInterior = new SolidColorBrush(Colors.White), Symbol = ChartSymbol.Diamond, - UseSeriesPalette=true + UseSeriesPalette = true }; series.AdornmentsInfo = adornmentInfo; @@ -61,7 +60,7 @@ The following code example demonstrates the column series with [`Diamond`](https ### Customization of Symbol -SfChart3D provides support more customization for symbol in adornments. +SfChart3D provides extensive customization options for symbols in adornments: * [`SymbolHeight`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_SymbolHeight) - used to change the height of the symbol. * [`SymbolWidth`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_SymbolWidth) - used to change the width of the symbol. @@ -69,7 +68,7 @@ SfChart3D provides support more customization for symbol in adornments. * [`SymbolStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_SymbolStroke) - used to change the stroke color of symbol. * [`SymbolTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_SymbolTemplate) - used to customize the appearance of symbol. -The following code example demonstrates the basic customization of symbol size and appearance. +The following code example demonstrates the basic customization of symbol size and appearance: {% tabs %} @@ -98,7 +97,7 @@ The following code example demonstrates the basic customization of symbol size a { ShowMarker = true, SymbolInterior = new SolidColorBrush(Colors.Brown), - SymbolStroke=new SolidColorBrush(Colors.White), + SymbolStroke = new SolidColorBrush(Colors.White), Symbol = ChartSymbol.Triangle, AdornmentsPosition = AdornmentsPosition.Top, SymbolHeight = 15, @@ -113,11 +112,11 @@ The following code example demonstrates the basic customization of symbol size a {% endtabs %} -![ Custom Symbol in Adornment](Adornments-Images/SymblBasic.png) +![Custom Symbol in Adornment](Adornments-Images/SymblBasic.png) **Symbol Template** -The following code example demonstrates how to use SymbolTemplate. +The following code example demonstrates how to use SymbolTemplate: {% tabs %} @@ -182,5 +181,4 @@ The following code example demonstrates how to use SymbolTemplate. {% endtabs %} -![ Custom Symbol in Adornment](Adornments-Images/SymbolCustom.png) - +![Custom Symbol in Adornment](Adornments-Images/SymbolCustom.png) \ No newline at end of file diff --git a/wpf/SfChart3D/Adornments/Positioning-Adornments.md b/wpf/SfChart3D/Adornments/Positioning-Adornments.md index f7a02c9808..6b3c22fbd2 100644 --- a/wpf/SfChart3D/Adornments/Positioning-Adornments.md +++ b/wpf/SfChart3D/Adornments/Positioning-Adornments.md @@ -9,21 +9,21 @@ documentation: ug # Positioning Data Markers in WPF SfChart3D -The positioning of adornments inside the series is defined using [`AdornmentPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_AdornmentsPosition) property. +The positioning of adornments inside the series is defined using the [`AdornmentsPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_AdornmentsPosition) property. -* [`Top`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.AdornmentsPosition.html) - Positions the Adornment at the top edge point of a chart segment. -* [`Bottom`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.AdornmentsPosition.html) - Positions the Adornment at the bottom edge point of a chart segment. -* [`TopAndBottom`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.AdornmentsPosition.html) - Positions the Adornment at the center point of a chart segment. +* [`Top`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.AdornmentsPosition.html) - Positions the adornment at the top edge point of a chart segment. +* [`Bottom`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.AdornmentsPosition.html) - Positions the adornment at the bottom edge point of a chart segment. +* [`TopAndBottom`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.AdornmentsPosition.html) - Positions the adornment at the center point of a chart segment. N> This behavior varies based on the chart series type. -The following code example shows the how to specify connector type: +The following code example shows how to specify the adornment position: {% tabs %} {% highlight xaml %} - @@ -43,9 +43,11 @@ The following code example shows the how to specify connector type: ChartAdornmentInfo3D adornmentInfo = new ChartAdornmentInfo3D() { ShowMarker = true, - AdornmentsPosition=AdornmentsPosition.TopAndBottom, - SymbolHeight=10, - SymbolWidth=10 + AdornmentsPosition = AdornmentsPosition.TopAndBottom, + SymbolHeight = 10, + SymbolWidth = 10, + Symbol = ChartSymbol.Diamond, + SymbolInterior = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#FF64B5F6")) }; series.AdornmentsInfo = adornmentInfo; @@ -59,19 +61,19 @@ The following code example shows the how to specify connector type: ## Label Position -SfChart3D provides additional customization option to position the adornments smartly based on series types using [`LabelPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_LabelPosition) property. +SfChart3D provides additional customization options to position the adornments smartly based on series types using the [`LabelPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_LabelPosition) property. -The following section shows few examples for this LabelPosition behavior with respect to the series. +The following section shows examples of LabelPosition behavior with respect to different series types. **Auto** -The [`Auto`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.AdornmentsLabelPosition.html) position of Labels with respect to [`ColumnSeries3D`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ColumnSeries3D.html) and [`LineSeries3D`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.LineSeries3D.html#). +The [`Auto`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.AdornmentsLabelPosition.html) position of labels with respect to [`ColumnSeries3D`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ColumnSeries3D.html) and [`LineSeries3D`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.LineSeries3D.html#). - {% tabs %} +{% tabs %} {% highlight xaml %} - {% endhighlight %} @@ -80,10 +82,10 @@ The [`Auto`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Adornm ChartAdornmentInfo3D adornmentInfo = new ChartAdornmentInfo3D() { - ShowMarker = true, + ShowLabel = true, BorderBrush = new SolidColorBrush(Colors.White), - LabelPosition=AdornmentsLabelPosition.Auto, - UseSeriesPalette=true, + LabelPosition = AdornmentsLabelPosition.Auto, + UseSeriesPalette = true, BorderThickness = new Thickness(1), }; @@ -97,13 +99,13 @@ The [`Auto`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Adornm **Inner** -The [`Inner`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.AdornmentsLabelPosition.html) position of Labels with respect to [`ColumnSeries3D`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ColumnSeries3D.html) and [`LineSeries3D`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.LineSeries3D.html#). +The [`Inner`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.AdornmentsLabelPosition.html) position of labels with respect to [`ColumnSeries3D`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ColumnSeries3D.html) and [`LineSeries3D`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.LineSeries3D.html#). - {% tabs %} +{% tabs %} {% highlight xaml %} - {% endhighlight %} @@ -112,10 +114,10 @@ The [`Inner`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Adorn ChartAdornmentInfo3D adornmentInfo = new ChartAdornmentInfo3D() { - ShowMarker = true, + ShowLabel = true, BorderBrush = new SolidColorBrush(Colors.White), - LabelPosition=AdornmentsLabelPosition.Inner, - UseSeriesPalette=true, + LabelPosition = AdornmentsLabelPosition.Inner, + UseSeriesPalette = true, BorderThickness = new Thickness(1), }; @@ -129,13 +131,13 @@ The [`Inner`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Adorn **Outer** -The [`Outer`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.AdornmentsLabelPosition.html) position of Labels with respect to [`ColumnSeries3D`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ColumnSeries3D.html) and [`LineSeries3D`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.LineSeries3D.html#). +The [`Outer`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.AdornmentsLabelPosition.html) position of labels with respect to [`ColumnSeries3D`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ColumnSeries3D.html) and [`LineSeries3D`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.LineSeries3D.html#). - {% tabs %} +{% tabs %} {% highlight xaml %} - {% endhighlight %} @@ -144,10 +146,10 @@ The [`Outer`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Adorn ChartAdornmentInfo3D adornmentInfo = new ChartAdornmentInfo3D() { - ShowMarker = true, + ShowLabel = true, BorderBrush = new SolidColorBrush(Colors.White), - LabelPosition=AdornmentsLabelPosition.Outer, - UseSeriesPalette=true, + LabelPosition = AdornmentsLabelPosition.Outer, + UseSeriesPalette = true, BorderThickness = new Thickness(1), }; @@ -157,17 +159,17 @@ The [`Outer`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Adorn |Column Series|Line Series| |--|--| -|![Outer Position in WPF Chart](Adornments-Images/Label_Outer_Column.png) | ![Auto Position in WPF Chart](Adornments-Images/Label_Outer_Line.png)| +|![Outer Position in WPF Chart](Adornments-Images/Label_Outer_Column.png) | ![Outer Position in WPF Chart](Adornments-Images/Label_Outer_Line.png)| **Center** -The [`Center`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.AdornmentsLabelPosition.html) position of Labels with respect to [`ColumnSeries3D`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ColumnSeries3D.html) and [`LineSeries3D`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.LineSeries3D.html#). +The [`Center`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.AdornmentsLabelPosition.html) position of labels with respect to [`ColumnSeries3D`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ColumnSeries3D.html) and [`LineSeries3D`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.LineSeries3D.html#). - {% tabs %} +{% tabs %} {% highlight xaml %} - {% endhighlight %} @@ -176,10 +178,10 @@ The [`Center`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Ador ChartAdornmentInfo3D adornmentInfo = new ChartAdornmentInfo3D() { - ShowMarker = true, + ShowLabel = true, BorderBrush = new SolidColorBrush(Colors.White), - LabelPosition=AdornmentsLabelPosition.Center, - UseSeriesPalette=true, + LabelPosition = AdornmentsLabelPosition.Center, + UseSeriesPalette = true, BorderThickness = new Thickness(1), }; @@ -189,5 +191,4 @@ The [`Center`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Ador |Column Series|Line Series| |--|--| -|![Auto Position in WPF Chart](Adornments-Images/Label_Center_Column.png)| ![Auto Position in WPF Chart](Adornments-Images/Label_Center_Line.png)| - +|![Center Position in WPF Chart](Adornments-Images/Label_Center_Column.png)| ![Center Position in WPF Chart](Adornments-Images/Label_Center_Line.png)| \ No newline at end of file diff --git a/wpf/SfChart3D/Appearance.md b/wpf/SfChart3D/Appearance.md index 103ffd1ae2..24455e6108 100644 --- a/wpf/SfChart3D/Appearance.md +++ b/wpf/SfChart3D/Appearance.md @@ -13,9 +13,9 @@ SfChart3D supports various customizing and styling options that allow you to enr ## Palettes -SfChart3D provides the options to apply the different kinds of themes or palettes to your chart. You can define the [`Palette`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartBase.html#Syncfusion_UI_Xaml_Charts_ChartBase_Palette) either for the entire chart or for an individual series. +SfChart3D provides options to apply different kinds of themes or palettes to your chart. You can define the [`Palette`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartBase.html#Syncfusion_UI_Xaml_Charts_ChartBase_Palette) either for the entire chart or for an individual series. -We have some predefined palette such as, +We have some predefined palettes such as: * Metro * AutumnBrights @@ -30,22 +30,21 @@ We have some predefined palette such as, * LightCandy * SandyBeach - ### Applying Palette to Series -Each palette applies a set of predefined brushes to the series in a predefined order. The following code example shows you how to set the Metro Palette for the chart series. +Each palette applies a set of predefined brushes to the series in a predefined order. The following code example shows you how to set the Metro Palette for the chart series. {% tabs %} {% highlight xaml %} - + {% endhighlight %} {% highlight c# %} - chart.Palette = ChartColorPalette.Metro; +chart.Palette = ChartColorPalette.Metro; {% endhighlight %} @@ -53,19 +52,19 @@ Each palette applies a set of predefined brushes to the series in a predefined o ![Predefined palettes in WPF Chart](3D-Charts_images/Appearance/Wpf_Chart3D_Series_metro_Palatte.PNG) -The following code example defined the palette as a [`BlueChrome`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartColorPalette.html). +The following code example defines the palette as [`BlueChrome`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartColorPalette.html). {% tabs %} {% highlight xaml %} - + {% endhighlight %} {% highlight c# %} - chart.Palette = ChartColorPalette.BlueChrome; +chart.Palette = ChartColorPalette.BlueChrome; {% endhighlight %} @@ -73,33 +72,32 @@ The following code example defined the palette as a [`BlueChrome`](https://help. ![Predefined palettes in WPF Chart](3D-Charts_images/Appearance/Wpf_Chart3D_Series_bluechrome_Palatte.PNG) - ### Applying Palette to Segment -Each palette applies a set of predefined brushes to the segment in a predefined order. The following code example shows you how to set the Metro Palette for the chart series. +Each palette applies a set of predefined brushes to the segment in a predefined order. The following code example shows you how to set the Metro Palette for the chart series. {% tabs %} {% highlight xaml %} - - + + {% endhighlight %} - + {% highlight c# %} - ColumnSeries3D columnSeries = new ColumnSeries3D() - { - ItemsSource = viewModel.Data, - XBindingPath = "XValue", - YBindingPath = "YValue", - Palette = ChartColorPalette.Metro - }; +ColumnSeries3D columnSeries = new ColumnSeries3D() +{ + ItemsSource = viewModel.Data, + XBindingPath = "XValue", + YBindingPath = "YValue", + Palette = ChartColorPalette.Metro +}; - chart.Series.Add(columnSeries); +chart.Series.Add(columnSeries); {% endhighlight %} @@ -107,30 +105,30 @@ Each palette applies a set of predefined brushes to the segment in a predefined ![Predefined palettes in WPF Chart](3D-Charts_images/Appearance/Wpf_Chart3D_Segment_Palatte.PNG) -The following code example defined the palette as an **AutumnBrights**. +The following code example defines the palette as **AutumnBrights**. {% tabs %} {% highlight xaml %} - + {% endhighlight %} {% highlight c# %} - ColumnSeries3D columnSeries = new ColumnSeries3D() - { - ItemsSource = viewModel.Data, - XBindingPath = "XValue", - YBindingPath = "YValue", - Palette = ChartColorPalette.AutumnBrights - }; +ColumnSeries3D columnSeries = new ColumnSeries3D() +{ + ItemsSource = viewModel.Data, + XBindingPath = "XValue", + YBindingPath = "YValue", + Palette = ChartColorPalette.AutumnBrights +}; - chart.Series.Add(series); +chart.Series.Add(columnSeries); {% endhighlight %} @@ -138,7 +136,6 @@ The following code example defined the palette as an **AutumnBrights**. ![Predefined palettes in WPF Chart](3D-Charts_images/Appearance/Wpf_Chart3D_Segment_AutumnBrights_Palatte.PNG) - N> Metro palette is the default palette for both Series and Segment. ## Custom Palette @@ -149,54 +146,36 @@ SfChart3D provides an option that enables you to define your own color brushes w {% highlight xaml %} - - + - - - - - - - - - - - - - + + + + + + - - + {% endhighlight %} {% highlight c# %} - ChartColorModel colorModel = new ChartColorModel(); - - colorModel.CustomBrushes.Add(new SolidColorBrush(Colors.Cyan)); - - colorModel.CustomBrushes.Add(new SolidColorBrush(Colors.DarkCyan)); - - DoughnutSeries3D series = new DoughnutSeries3D() - { - - ItemsSource = new ViewModel().Tax, - - XBindingPath = "Category", - - YBindingPath = "Percentage", - - Palette = ChartColorPalette.Custom, - - ColorModel = colorModel +ChartColorModel colorModel = new ChartColorModel(); +colorModel.CustomBrushes.Add(new SolidColorBrush(Colors.Cyan)); +colorModel.CustomBrushes.Add(new SolidColorBrush(Colors.DarkCyan)); - }; +DoughnutSeries3D series = new DoughnutSeries3D() +{ + ItemsSource = new ViewModel().Tax, + XBindingPath = "Category", + YBindingPath = "Percentage", + Palette = ChartColorPalette.Custom, + ColorModel = colorModel +}; - chart.Series.Add(series); +chart.Series.Add(series); {% endhighlight %} @@ -210,43 +189,28 @@ You can define the custom palette for the series as shown in the following code {% highlight xaml %} - - + - - - - - - - - - - - - - - - + + + + + + + - - + {% endhighlight %} {% highlight c# %} - chart.Palette = ChartColorPalette.Custom; - - ChartColorModel colorModel = new ChartColorModel(); - - colorModel.CustomBrushes.Add(new SolidColorBrush(Colors.BlueViolet)); - - colorModel.CustomBrushes.Add(new SolidColorBrush(Colors.PeachPuff)); - - colorModel.CustomBrushes.Add(new SolidColorBrush(Colors.Purple)); - - chart.ColorModel = colorModel; +chart.Palette = ChartColorPalette.Custom; +ChartColorModel colorModel = new ChartColorModel(); +colorModel.CustomBrushes.Add(new SolidColorBrush(Colors.BlueViolet)); +colorModel.CustomBrushes.Add(new SolidColorBrush(Colors.PeachPuff)); +colorModel.CustomBrushes.Add(new SolidColorBrush(Colors.Purple)); +chart.ColorModel = colorModel; {% endhighlight %} @@ -254,7 +218,6 @@ You can define the custom palette for the series as shown in the following code ![Custom palette in WPF Chart](3D-Charts_images/Appearance/Wpf_Chart3D_custom_palatte_chart.PNG) - ## SegmentColorPath The color for the chart segments can be bound from its items source collection by using the [`SegmentColorPath`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_SegmentColorPathProperty) property of series. The following code shows how to bind the color to the series with the [`SegmentColorPath`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_SegmentColorPathProperty) property. @@ -263,32 +226,27 @@ The color for the chart segments can be bound from its items source collection b {% highlight xaml %} - - - + + {% endhighlight %} {% highlight c# %} - ColumnSeries3D series = new ColumnSeries3D() - - { - - ItemsSource = viewModel.Data, - XBindingPath = "XValue", - YBindingPath = "YValue", - SegmentColorPath = "ColorPath" - - }; - - Data = new ObservableCollection(); - Data.Add(new Model() { XValue = "Jan", YValue = 10, ColorPath = new SolidColorBrush(Colors.Cyan) }); - Data.Add(new Model() { XValue = "Feb", YValue = 24, ColorPath = new SolidColorBrush(Colors.Pink) }); - Data.Add(new Model() { XValue = "Mar", YValue = 18, ColorPath = new SolidColorBrush(Colors.Red) }); - Data.Add(new Model() { XValue = "Apr", YValue = 16, ColorPath = new SolidColorBrush(Colors.Orange) }); - Data.Add(new Model() { XValue = "May", YValue = 28, ColorPath = new SolidColorBrush(Colors.LightGreen) }); - +ColumnSeries3D series = new ColumnSeries3D() +{ + ItemsSource = viewModel.Data, + XBindingPath = "XValue", + YBindingPath = "YValue", + SegmentColorPath = "ColorPath" +}; + +Data = new ObservableCollection(); +Data.Add(new Model() { XValue = "Jan", YValue = 10, ColorPath = new SolidColorBrush(Colors.Cyan) }); +Data.Add(new Model() { XValue = "Feb", YValue = 24, ColorPath = new SolidColorBrush(Colors.Pink) }); +Data.Add(new Model() { XValue = "Mar", YValue = 18, ColorPath = new SolidColorBrush(Colors.Red) }); +Data.Add(new Model() { XValue = "Apr", YValue = 16, ColorPath = new SolidColorBrush(Colors.Orange) }); +Data.Add(new Model() { XValue = "May", YValue = 28, ColorPath = new SolidColorBrush(Colors.LightGreen) }); {% endhighlight %} @@ -296,6 +254,4 @@ The color for the chart segments can be bound from its items source collection b ![SegmentColorPath in WPF Chart](3D-Charts_images/Appearance/Wpf_Chart3D_SegmentColorPath.PNG) -N> The SegmentColorPath property is not applicable to the Area and CircularSeries. - - +N> The SegmentColorPath property is not applicable to the Area and CircularSeries. \ No newline at end of file diff --git a/wpf/SfChart3D/Axis.md b/wpf/SfChart3D/Axis.md index e14bd684f8..8adad09449 100644 --- a/wpf/SfChart3D/Axis.md +++ b/wpf/SfChart3D/Axis.md @@ -14,14 +14,13 @@ documentation: ug * [`PrimaryAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfChart3D.html#Syncfusion_UI_Xaml_Charts_SfChart3D_PrimaryAxis) – Gets or sets the horizontal x axis for the chart. * [`SecondaryAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfChart3D.html#Syncfusion_UI_Xaml_Charts_SfChart3D_SecondaryAxis) – Gets or sets the vertical y axis for the chart. -Additionally, SfChart3D have horizontal (z) Axis called Depth Axis. +Additionally, SfChart3D has a horizontal (z) Axis called Depth Axis. * [`DepthAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfChart3D.html#Syncfusion_UI_Xaml_Charts_SfChart3D_DepthAxis) - Gets or sets the horizontal z axis for the chart. - ## Types of Axis -ChartAxis supports the following types. +ChartAxis supports the following types: * Numerical Axis * Category Axis @@ -33,34 +32,28 @@ ChartAxis supports the following types. [`NumericalAxis3D`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalAxis3D.html#) is used to plot numerical values to the chart and can be defined for both PrimaryAxis and SecondaryAxis. - {% tabs %} {% highlight xaml %} - - - - - - - - - - - - - + + + + + + + + + + + {% endhighlight %} {% highlight C# %} - - SfChart3D Chart3D = new SfChart3D() - { - PrimaryAxis = new NumericalAxis3D(), - - SecondaryAxis = new NumericalAxis3D() - }; - +SfChart3D Chart3D = new SfChart3D() +{ + PrimaryAxis = new NumericalAxis3D(), + SecondaryAxis = new NumericalAxis3D() +}; {% endhighlight %} {% endtabs %} @@ -72,51 +65,43 @@ ChartAxis supports the following types. {% tabs %} {% highlight xaml %} - - - - - - - - + + + + + + {% endhighlight %} {% highlight C# %} - - SfChart3D Chart3D = new SfChart3D() - { - PrimaryAxis = new CategoryAxis3D() - }; - +SfChart3D Chart3D = new SfChart3D() +{ + PrimaryAxis = new CategoryAxis3D() +}; {% endhighlight %} {% endtabs %} ### DateTime Axis -[`DateTimeAxis3D`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis3D.html#) is used to plot DateTime values and it is widely used to make financial charts in places like the Stock Market, where index plotting is done every day. +[`DateTimeAxis3D`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis3D.html#) is used to plot DateTime values and is widely used to make financial charts in places like the Stock Market, where index plotting is done every day. {% tabs %} {% highlight xaml %} - - - - - - - - + + + + + + {% endhighlight %} {% highlight C# %} - - SfChart3D Chart3D = new SfChart3D() - { - PrimaryAxis = new DateTimeAxis3D() - }; - +SfChart3D Chart3D = new SfChart3D() +{ + PrimaryAxis = new DateTimeAxis3D() +}; {% endhighlight %} {% endtabs %} @@ -128,23 +113,19 @@ ChartAxis supports the following types. {% tabs %} {% highlight xaml %} - - - - - - - - + + + + + + {% endhighlight %} {% highlight C# %} - - SfChart3D Chart3D = new SfChart3D() - { - SecondaryAxis = new LogarithmicAxis3D() - }; - +SfChart3D Chart3D = new SfChart3D() +{ + SecondaryAxis = new LogarithmicAxis3D() +}; {% endhighlight %} {% endtabs %} @@ -156,74 +137,66 @@ ChartAxis supports the following types. {% tabs %} {% highlight xaml %} - - - - - - - - + + + + + + {% endhighlight %} {% highlight C# %} - - SfChart3D Chart3D = new SfChart3D() - { - PrimaryAxis = new TimeSpanAxis3D() - }; - +SfChart3D Chart3D = new SfChart3D() +{ + PrimaryAxis = new TimeSpanAxis3D() +}; {% endhighlight %} {% endtabs %} ## Depth Axis -[`DepthAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfChart3D.html#Syncfusion_UI_Xaml_Charts_SfChart3D_DepthAxis) helps us to plot chart data based on X, Y and Z Co – ordinates. This feature is supported in [`Line`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.LineSeries3D.html), [`Column`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ColumnSeries3D.html), [`Bar`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.BarSeries3D.html), [`StackingColumnSeries`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.StackingColumnSeries3D.html), [`StackingBarSeries`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.StackingBarSeries3D.html) and [`Scatter`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ScatterSeries3D.html) series. +[`DepthAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfChart3D.html#Syncfusion_UI_Xaml_Charts_SfChart3D_DepthAxis) helps us to plot chart data based on X, Y and Z coordinates. This feature is supported in [`Line`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.LineSeries3D.html), [`Column`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ColumnSeries3D.html), [`Bar`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.BarSeries3D.html), [`StackingColumnSeries`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.StackingColumnSeries3D.html), [`StackingBarSeries`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.StackingBarSeries3D.html) and [`Scatter`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ScatterSeries3D.html) series. -The depth axis is implemented by defining the required axis type to the [`DepthAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfChart3D.html#Syncfusion_UI_Xaml_Charts_SfChart3D_DepthAxis) property of the [`SfChart3D`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfChart3D.html) and by mapping the Z data points to the series using the [`ZBindingPath`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.XyzDataSeries3D.html#Syncfusion_UI_Xaml_Charts_XyzDataSeries3D_ZBindingPath) of the series. When [`DepthAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfChart3D.html#Syncfusion_UI_Xaml_Charts_SfChart3D_DepthAxis) is not defined, by default it is created based on the [`ZBindingPath`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.XyzDataSeries3D.html#Syncfusion_UI_Xaml_Charts_XyzDataSeries3D_ZBindingPath) data type. +The depth axis is implemented by defining the required axis type to the [`DepthAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfChart3D.html#Syncfusion_UI_Xaml_Charts_SfChart3D_DepthAxis) property of the [`SfChart3D`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfChart3D.html) and by mapping the Z data points to the series using the [`ZBindingPath`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.XyzDataSeries3D.html#Syncfusion_UI_Xaml_Charts_XyzDataSeries3D_ZBindingPath) of the series. When [`DepthAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfChart3D.html#Syncfusion_UI_Xaml_Charts_SfChart3D_DepthAxis) is not defined, by default it is created based on the [`ZBindingPath`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.XyzDataSeries3D.html#Syncfusion_UI_Xaml_Charts_XyzDataSeries3D_ZBindingPath) data type. -The following code example illustrates how to create Depth Axis. +The following code example illustrates how to create Depth Axis: {% tabs %} {% highlight xaml %} - - - . . . - - - - - - + + + + + + + {% endhighlight %} -{% highlight C# %}  - - SfChart3D chart = new SfChart3D(); - chart.Rotation = 43; - chart.Tilt = 10; - chart.Margin = new Thickness(120, 20, 120, 30); - chart.PerspectiveAngle = 100; - chart.EnableRotation = true; - - NumericalAxis3D depthAxis = new NumericalAxis3D(); - depthAxis.Interval = 1; - chart.DepthAxis = depthAxis; - - ColumnSeries3D series1 = new ColumnSeries3D(); - series1.ItemsSource = (new ViewModel()).Data; - series1.XBindingPath = "XValue"; - series1.YBindingPath = "YValue"; - series1.ZBindingPath = "ZValue"; - chart.Series.Add(series1); - this.Content = chart; - +{% highlight C# %} +SfChart3D chart = new SfChart3D(); +chart.Rotation = 43; +chart.Tilt = 10; +chart.Margin = new Thickness(120, 20, 120, 30); +chart.PerspectiveAngle = 100; +chart.EnableRotation = true; + +NumericalAxis3D depthAxis = new NumericalAxis3D(); +depthAxis.Interval = 1; +chart.DepthAxis = depthAxis; + +ColumnSeries3D series1 = new ColumnSeries3D(); +series1.ItemsSource = (new ViewModel()).Data; +series1.XBindingPath = "XValue"; +series1.YBindingPath = "YValue"; +series1.ZBindingPath = "ZValue"; +chart.Series.Add(series1); +this.Content = chart; {% endhighlight %} {% endtabs %} @@ -232,65 +205,57 @@ The following code example illustrates how to create Depth Axis. ## 3D Manhattan Chart -In this type of chart, multiple series can be plotted in [`DepthAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfChart3D.html#Syncfusion_UI_Xaml_Charts_SfChart3D_DepthAxis). To enable Manhattan chart add the required number of series and define the [`DepthAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfChart3D.html#Syncfusion_UI_Xaml_Charts_SfChart3D_DepthAxis). The Manhattan axis is of type category with the axis labels mapped to the [`Label`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_Label) property of the series. If the [`Label`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_Label) property of the series is not defined, the labels are displayed as Series1, Series2 and so on. +In this type of chart, multiple series can be plotted in [`DepthAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfChart3D.html#Syncfusion_UI_Xaml_Charts_SfChart3D_DepthAxis). To enable Manhattan chart, add the required number of series and define the [`DepthAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfChart3D.html#Syncfusion_UI_Xaml_Charts_SfChart3D_DepthAxis). The Manhattan axis is of type category with the axis labels mapped to the [`Label`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_Label) property of the series. If the [`Label`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_Label) property of the series is not defined, the labels are displayed as Series1, Series2 and so on. {% tabs %} {% highlight xaml %} - - - . . . - - - - - - - - - - + + + + + + + + + + {% endhighlight %} {% highlight c# %} - -SfChart3D chart = new SfChart3D() { Header = "Chart", Height = 300, Width = 500 }; - - chart.Rotation = 43; - . . . - - NumericalAxis3D depthAxis = new NumericalAxis3D(); - depthAxis.Interval = 1; - chart.DepthAxis = depthAxis; - - - LineSeries3D series1 = new LineSeries3D(); - series1.ItemsSource = (new ViewModel()).Data1; - series1.XBindingPath = "XValue"; - series1.YBindingPath = "YValue"; - series1.Label = "First"; - - - LineSeries3D series2 = new LineSeries3D(); - series2.ItemsSource = (new ViewModel()).Data2; - series2.XBindingPath = "XValue"; - series2.YBindingPath = "YValue"; - series2.Label = "Second"; - - chart.Series.Add(series1); - chart.Series.Add(series2); - this.Content = chart; - +SfChart3D chart = new SfChart3D() { Header = "Chart", Height = 300, Width = 500 }; +chart.Rotation = 43; +// Other chart configurations + +NumericalAxis3D depthAxis = new NumericalAxis3D(); +depthAxis.Interval = 1; +chart.DepthAxis = depthAxis; + +LineSeries3D series1 = new LineSeries3D(); +series1.ItemsSource = (new ViewModel()).Data1; +series1.XBindingPath = "XValue"; +series1.YBindingPath = "YValue"; +series1.Label = "First"; + +LineSeries3D series2 = new LineSeries3D(); +series2.ItemsSource = (new ViewModel()).Data2; +series2.XBindingPath = "XValue"; +series2.YBindingPath = "YValue"; +series2.Label = "Second"; + +chart.Series.Add(series1); +chart.Series.Add(series2); +this.Content = chart; {% endhighlight %} {% endtabs %} ![Manhattan support in WPF 3D Chart](3D-Charts_images/Axis/Manhattan_Chart.png) -The sample with Manhattan chart can be downloaded from the [link](https://github.com/SyncfusionExamples/3D-Chart-with-DepthAxis-Z-Axis-). +The sample with Manhattan chart can be downloaded from the [link](https://github.com/SyncfusionExamples/3D-Chart-with-DepthAxis-Z-Axis-). \ No newline at end of file diff --git a/wpf/SfChart3D/GettingStarted.md b/wpf/SfChart3D/GettingStarted.md index bab12de586..5630ca78f6 100644 --- a/wpf/SfChart3D/GettingStarted.md +++ b/wpf/SfChart3D/GettingStarted.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with WPF SfChart3D -This section explains you the steps required to populate the Chart with data, header, add data labels, legend and tooltips to the Chart. This section covers only the minimal features that you need to learn to get started with the Chart. +This section explains the steps required to populate the Chart with data, header, add data labels, legend and tooltips to the Chart. This section covers only the minimal features that you need to learn to get started with the Chart. ## Adding chart reference @@ -23,7 +23,7 @@ Import the SfChart3D namespace in your XAML page. {% highlight xaml %} - xmlns:chart="clr-namespace:Syncfusion.UI.Xaml.Charts;assembly=Syncfusion.SfChart.WPF" +xmlns:chart="clr-namespace:Syncfusion.UI.Xaml.Charts;assembly=Syncfusion.SfChart.WPF" {% endhighlight %} @@ -35,35 +35,32 @@ using Syncfusion.UI.Xaml.Charts; {% endtabs %} -Then initialize an empty chart with [PrimaryAxis](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfChart3D.html#Syncfusion_UI_Xaml_Charts_SfChart3D_PrimaryAxis) and [SecondaryAxis](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfChart3D.html#Syncfusion_UI_Xaml_Charts_SfChart3D_SecondaryAxis) as shown below, +Then initialize an empty chart with [PrimaryAxis](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfChart3D.html#Syncfusion_UI_Xaml_Charts_SfChart3D_PrimaryAxis) and [SecondaryAxis](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfChart3D.html#Syncfusion_UI_Xaml_Charts_SfChart3D_SecondaryAxis) as shown below: {% tabs %} {% highlight xaml %} - - - - - - - - - - - - + + + + + + + + + + {% endhighlight %} {% highlight C# %} - SfChart3D Chart3D = new SfChart3D() - { - PrimaryAxis = new DateTimeAxis3D(), - - SecondaryAxis = new NumericalAxis3D(), - }; +SfChart3D Chart3D = new SfChart3D() +{ + PrimaryAxis = new DateTimeAxis3D(), + SecondaryAxis = new NumericalAxis3D(), +}; {% endhighlight %} @@ -71,43 +68,41 @@ Then initialize an empty chart with [PrimaryAxis](https://help.syncfusion.com/cr ![Chart 3D support in WPF](3D-Charts_images/Chart-3D-GettingStarted_init.png) - ## Initialize view model -Since, the above step will produce only an empty column 3D chart, plotting data must be added to the chart. This step illustrates how to create a sample data source. The data source must implement the IEnumerable interface. +Since the above step will produce only an empty column 3D chart, plotting data must be added to the chart. This step illustrates how to create a sample data source. The data source must implement the IEnumerable interface. {% highlight C# %} - public class UserProfile - { - public DateTime TimeStamp { get; set; } - public double NoOfUsers { get; set; } - } +public class UserProfile +{ + public DateTime TimeStamp { get; set; } + public double NoOfUsers { get; set; } +} {% endhighlight %} -Next, create a view model class and initialize a list of `UserProfile` objects as follows. +Next, create a view model class and initialize a list of `UserProfile` objects as follows: {% highlight C# %} - public class UsersViewModel +public class UsersViewModel +{ + public UsersViewModel() { - public UsersViewModel() - { - this.UsersList = new ObservableCollection(); - - DateTime date = DateTime.Today; + this.UsersList = new ObservableCollection(); - UsersList.Add(new UserProfile { TimeStamp = date.AddHours(0.5), NoOfUsers = 1000 }); - UsersList.Add(new UserProfile { TimeStamp = date.AddHours(1), NoOfUsers = 5000 }); - UsersList.Add(new UserProfile { TimeStamp = date.AddHours(1.5), NoOfUsers = 3000 }); - UsersList.Add(new UserProfile { TimeStamp = date.AddHours(2), NoOfUsers = 4000 }); - UsersList.Add(new UserProfile { TimeStamp = date.AddHours(2.5), NoOfUsers = 2000 }); - UsersList.Add(new UserProfile { TimeStamp = date.AddHours(3), NoOfUsers = 1000 }); - } - public ObservableCollection UsersList { get; set; } + DateTime date = DateTime.Today; + UsersList.Add(new UserProfile { TimeStamp = date.AddHours(0.5), NoOfUsers = 1000 }); + UsersList.Add(new UserProfile { TimeStamp = date.AddHours(1), NoOfUsers = 5000 }); + UsersList.Add(new UserProfile { TimeStamp = date.AddHours(1.5), NoOfUsers = 3000 }); + UsersList.Add(new UserProfile { TimeStamp = date.AddHours(2), NoOfUsers = 4000 }); + UsersList.Add(new UserProfile { TimeStamp = date.AddHours(2.5), NoOfUsers = 2000 }); + UsersList.Add(new UserProfile { TimeStamp = date.AddHours(3), NoOfUsers = 1000 }); } + public ObservableCollection UsersList { get; set; } +} {% endhighlight %} @@ -115,7 +110,6 @@ Set the ViewModel instance as the DataContext of your window; this is done to bi N> Add namespace of `ViewModel` class to your XAML window if you prefer to set `DataContext` in XAML. - {% tabs %} {% highlight xaml %} @@ -125,8 +119,8 @@ N> Add namespace of `ViewModel` class to your XAML window if you prefer to set ` xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" - xmlns:local="clr-namespace:GettingStarted_3DCharts " - xmlns:chart ="clr-namespace:Syncfusion.UI.Xaml.Charts;assembly=Syncfusion.SfChart.WPF" + xmlns:local="clr-namespace:GettingStarted_3DCharts" + xmlns:chart="clr-namespace:Syncfusion.UI.Xaml.Charts;assembly=Syncfusion.SfChart.WPF" mc:Ignorable="d" Title="MainWindow" Height="350" Width="525"> @@ -136,7 +130,6 @@ N> Add namespace of `ViewModel` class to your XAML window if you prefer to set ` - {% endhighlight %} {% highlight C# %} @@ -149,49 +142,45 @@ this.DataContext = new UsersViewModel(); ## Populate chart with data -As we are going to visualize the comparison of heights in the data model, add [`ColumnSeries3D`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ColumnSeries3D.html) to [`SfChart3D.Series`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfChart3D.html#Syncfusion_UI_Xaml_Charts_SfChart3D_Series) property, and then bind the Data property of the above ViewModel to the [`ColumnSeries3D.ItemsSource`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_ItemsSource) property as follows. - ->N You need to set [`XBindingPath`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_XBindingPath) and [`YBindingPath`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.XyDataSeries3D.html#Syncfusion_UI_Xaml_Charts_XyDataSeries3D_YBindingPath) properties, so that [`SfChart3D`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfChart3D.html) would fetch values from the respective properties in the data model to plot the series. +As we are going to visualize the comparison of heights in the data model, add [`ColumnSeries3D`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ColumnSeries3D.html) to [`SfChart3D.Series`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfChart3D.html#Syncfusion_UI_Xaml_Charts_SfChart3D_Series) property, and then bind the Data property of the above ViewModel to the [`ColumnSeries3D.ItemsSource`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_ItemsSource) property as follows. +N> You need to set [`XBindingPath`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_XBindingPath) and [`YBindingPath`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.XyDataSeries3D.html#Syncfusion_UI_Xaml_Charts_XyDataSeries3D_YBindingPath) properties, so that [`SfChart3D`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfChart3D.html) would fetch values from the respective properties in the data model to plot the series. {% tabs %} {% highlight xaml %} - - - - - - - - - - + + + + + + + + + - - - + + {% endhighlight %} {% highlight c# %} - SfChart3D chart3D = new SfChart3D(); - - chart3D.PrimaryAxis = new CategoryAxis3D(); +SfChart3D chart3D = new SfChart3D(); - chart3D.SecondaryAxis = new NumericalAxis3D(); +chart3D.PrimaryAxis = new CategoryAxis3D(); +chart3D.SecondaryAxis = new NumericalAxis3D(); - ColumnSeries3D series = new ColumnSeries3D() - { - ItemsSource = new UsersViewModel().UsersList, - XBindingPath = "TimeStamp", - YBindingPath = "NoOfUsers" - }; +ColumnSeries3D series = new ColumnSeries3D() +{ + ItemsSource = new UsersViewModel().UsersList, + XBindingPath = "TimeStamp", + YBindingPath = "NoOfUsers" +}; - Chart3D.Series.Add(series); +chart3D.Series.Add(series); {% endhighlight %} @@ -199,25 +188,23 @@ As we are going to visualize the comparison of heights in the data model, add [` ## Add Title -The header 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 [`Header`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_Header) property of chart as follows. +The header 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 [`Header`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_Header) property of chart as follows: {% tabs %} {% highlight xaml %} - - {% endhighlight %} -{% highlight C# %}  +{% highlight C# %} - SfChart3D chart3D = new SfChart3D(); - chart3D.Header = "Chart"; +SfChart3D chart3D = new SfChart3D(); +chart3D.Header = "Chart"; {% endhighlight %} @@ -231,28 +218,24 @@ You can add data labels to improve the readability of the chart and it can be en {% highlight xaml %} - - - - ... - - - - - - - ... - - - - + + + ... + + + + + + ... + + {% endhighlight %} -{% highlight C# %}  +{% highlight C# %} -series.AdornmentsInfo = new ChartAdornmentInfo3D (){ ShowLabel = true }; +series.AdornmentsInfo = new ChartAdornmentInfo3D(){ ShowLabel = true }; {% endhighlight %} @@ -262,32 +245,28 @@ Refer to [`Adornments`](https://help.syncfusion.com/wpf/SfChart3D/Adornments) to ## Enable legend -You can enable legend using the [`Legend`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartBase.html#Syncfusion_UI_Xaml_Charts_ChartBase_Legend) property as follows. +You can enable legend using the [`Legend`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartBase.html#Syncfusion_UI_Xaml_Charts_ChartBase_Legend) property as follows: {% tabs %} {% highlight xaml %} - - - - ... - - - - - - ... - - - - + + + ... + + + + + ... + + {% endhighlight %} -{% highlight C# %}  +{% highlight C# %} -chart.Legend = new ChartLegend(); +chart.Legend = new ChartLegend(); {% endhighlight %} @@ -299,80 +278,60 @@ Additionally, you need to set label for each series using the [`Label`](https:// {% highlight xaml %} - - - ... - - - - - - ... - - + +... + + +... + {% endhighlight %} -{% highlight C# %}  +{% highlight C# %} - ColumnSeries3D series = new ColumnSeries3D() - { - ItemsSource = new UsersViewModel().UsersList, - XBindingPath = "TimeStamp", - YBindingPath = "NoOfUsers", - Label = "UserProfile" - }; +ColumnSeries3D series = new ColumnSeries3D() +{ + ItemsSource = new UsersViewModel().UsersList, + XBindingPath = "TimeStamp", + YBindingPath = "NoOfUsers", + Label = "UserProfile" +}; {% endhighlight %} -{% endtabs %} +{% endtabs %} -## Enable tooltip +## Enable Tooltip -Tooltips are used to show information about the segment, when you click the segment. You can enable tooltip by setting series [`ShowTooltip`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_ShowTooltip) property to true. +Tooltips are used to show information about a segment when you click on it. You can enable tooltips by setting the series [`ShowTooltip`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_ShowTooltip) property to true. {% tabs %} - {% highlight xaml %} - - - - ... - - - - - - ... - - - + + ... + + + ... + {% endhighlight %} - -{% highlight C# %}  - - ColumnSeries3D series = new ColumnSeries3D() - { - ItemsSource = new UsersViewModel().UsersList, - XBindingPath = "TimeStamp", - YBindingPath = "NoOfUsers", - Label = "UserProfile", - ShowTooltip = true, - }; - - +{% highlight C# %} +ColumnSeries3D series = new ColumnSeries3D() +{ + ItemsSource = new UsersViewModel().UsersList, + XBindingPath = "TimeStamp", + YBindingPath = "NoOfUsers", + Label = "UserProfile", + ShowTooltip = true, +}; {% endhighlight %} - {% endtabs %} -The following code example gives you the complete code of above configurations. +The following code example provides the complete implementation of the above configurations. {% tabs %} - {% highlight xaml %} - - - - @@ -398,79 +354,68 @@ The following code example gives you the complete code of above configurations. - - - + YBindingPath="NoOfUsers" ShowTooltip="True"> - - - {% endhighlight %} - {% highlight C# %} - - SfChart3D chart = new SfChart3D() { Header = "Chart", Height = 500, Width = 500 }; - - //Adding horizontal axis to the chart - CategoryAxis3D primaryAxis = new CategoryAxis3D(); - primaryAxis.Header = "Time"; - primaryAxis.FontSize = 14; - chart.PrimaryAxis = primaryAxis; - - //Adding vertical axis to the chart - NumericalAxis3D secondaryAxis = new NumericalAxis3D(); - secondaryAxis.Header = "Users"; - secondaryAxis.FontSize = 14; - chart.SecondaryAxis = secondaryAxis; - - //Adding Legends for the chart - ChartLegend legend = new ChartLegend(); - chart.Legend = legend; - - //Initializing column series - ColumnSeries3D series = new ColumnSeries3D(); - series.ItemsSource = new UsersViewModel().UsersList; - series.XBindingPath = "TimeStamp"; - series.YBindingPath = "NoOfUsers"; - series.Label = "UserProfile"; - //Enable Tooltip - series.ShowTooltip = true; - - - //Setting adornment to the chart series - series.AdornmentsInfo = new ChartAdornmentInfo3D() { ShowLabel = true }; - - //Adding Series to the Chart Series Collection - chart.Series.Add(series); - this.Content = chart; - +SfChart3D chart = new SfChart3D() { Header = "Chart", Height = 500, Width = 500 }; + +//Adding horizontal axis to the chart +CategoryAxis3D primaryAxis = new CategoryAxis3D(); +primaryAxis.Header = "Time"; +primaryAxis.FontSize = 14; +chart.PrimaryAxis = primaryAxis; + +//Adding vertical axis to the chart +NumericalAxis3D secondaryAxis = new NumericalAxis3D(); +secondaryAxis.Header = "Users"; +secondaryAxis.FontSize = 14; +chart.SecondaryAxis = secondaryAxis; + +//Adding Legends for the chart +ChartLegend legend = new ChartLegend(); +chart.Legend = legend; + +//Initializing column series +ColumnSeries3D series = new ColumnSeries3D(); +series.ItemsSource = new UsersViewModel().UsersList; +series.XBindingPath = "TimeStamp"; +series.YBindingPath = "NoOfUsers"; +series.Label = "UserProfile"; + +//Enable Tooltip +series.ShowTooltip = true; + +//Setting adornment to the chart series +series.AdornmentsInfo = new ChartAdornmentInfo3D() { ShowLabel = true }; + +//Adding Series to the Chart Series Collection +chart.Series.Add(series); +this.Content = chart; {% endhighlight %} - {% endtabs %} ![Chart 3D support in WPF](3D-Charts_images/Chart-3D-GettingStarted.png) -You can find the complete getting started sample : [`GettingStarted`](https://www.syncfusion.com/downloads/support/directtrac/general/ze/GettingStarted-3DCharts1840393114) +You can find the complete getting started sample from this link: [GettingStarted](https://www.syncfusion.com/downloads/support/directtrac/general/ze/GettingStarted-3DCharts1840393114) ## Theme -SfChart3D supports various built-in themes. Refer to the below links to apply themes for the SfChart3D, +SfChart3D supports various built-in themes. Refer to the links below to apply themes for the SfChart3D: + +* [Apply theme using SfSkinManager](https://help.syncfusion.com/wpf/themes/skin-manager) +* [Create a custom theme using ThemeStudio](https://help.syncfusion.com/wpf/themes/theme-studio#creating-custom-theme) - * [Apply theme using SfSkinManager](https://help.syncfusion.com/wpf/themes/skin-manager) - - * [Create a custom theme using ThemeStudio](https://help.syncfusion.com/wpf/themes/theme-studio#creating-custom-theme) - - ![Setting theme to WPF SfChart3D](3D-Charts_images/Chart-3D-Theme.png) \ No newline at end of file +![Setting theme to WPF SfChart3D](3D-Charts_images/Chart-3D-Theme.png) \ No newline at end of file diff --git a/wpf/SfChart3D/InteractiveFeatures.md b/wpf/SfChart3D/InteractiveFeatures.md index ddcc52f26d..eb77e3f0be 100644 --- a/wpf/SfChart3D/InteractiveFeatures.md +++ b/wpf/SfChart3D/InteractiveFeatures.md @@ -13,7 +13,7 @@ documentation: ug ## Dynamic rotation -3D charts allow us to view the best possible view of data dynamically using a mouse or touch device. To enable dynamic rotation, set the [`EnableRotation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfChart3D.html#Syncfusion_UI_Xaml_Charts_SfChart3D_EnableRotation) property to true. +3D charts allow you to view the best possible view of data dynamically using a mouse or touch device. To enable dynamic rotation, set the [`EnableRotation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfChart3D.html#Syncfusion_UI_Xaml_Charts_SfChart3D_EnableRotation) property to true. The following code example illustrates how to enable the dynamic rotation: @@ -29,47 +29,47 @@ The following code example illustrates how to enable the dynamic rotation: ## Segment Selection -To enable segment selection in a 3D chart, set the SegmentSelectionBrush property in chart series. +To enable segment selection in a 3D chart, set the `SegmentSelectionBrush` property in chart series. -The following code example illustrates how to set the selection brush for individual series. For data refer to the Series category in 3D charts. +The following code example illustrates how to set the selection brush for individual series. For data, refer to the Series category in 3D charts. {% tabs %} {% highlight xaml %} - - - - + + + + {% endhighlight %} {% highlight c# %} - SfChart3D chart3D = new SfChart3D() - { - EnableSeriesSelection=true, - EnableRotation=true, - PerspectiveAngle=50, - SeriesSelectedIndex=0, - Rotation=29, - Depth=100, - Palette=ChartColorPalette.BlueChrome, - Width=300, - Height=280 - }; - - ColumnSeries3D series = new ColumnSeries3D() - { - ItemsSource = new StockViewModel().DataPoints, - XBindingPath = "Year", - YBindingPath = "India", - SegmentSelectionBrush = new SolidColorBrush(Colors.SkyBlue), - SegmentSpacing = 0.5 - }; +SfChart3D chart3D = new SfChart3D() +{ + EnableSeriesSelection = true, + EnableRotation = true, + PerspectiveAngle = 50, + SeriesSelectedIndex = 0, + Rotation = 29, + Depth = 100, + Palette = ChartColorPalette.BlueChrome, + Width = 300, + Height = 280 +}; + +ColumnSeries3D series = new ColumnSeries3D() +{ + ItemsSource = new StockViewModel().DataPoints, + XBindingPath = "Year", + YBindingPath = "India", + SegmentSelectionBrush = new SolidColorBrush(Colors.SkyBlue), + SegmentSpacing = 0.5 +}; - chart3D.Series.Add(series); +chart3D.Series.Add(series); {% endhighlight %} @@ -81,7 +81,7 @@ The following screenshot illustrates the result of the above code example. ## Series Selection -Series selection support is used to highlight the series programmatically or by user interaction. Also you can get a series SelectedIndex, PreviousSelectedIndex value in SelectionChanged event arguments. +Series selection support is used to highlight the series programmatically or by user interaction. You can also get a series SelectedIndex and PreviousSelectedIndex value in SelectionChanged event arguments. The following code example can be used to set series selection in a SfChart3D. @@ -89,64 +89,62 @@ The following code example can be used to set series selection in a SfChart3D. {% highlight xaml %} - + - - + + - - + + - + {% endhighlight %} {% highlight c# %} - SfChart3D chart3D = new SfChart3D() - { - EnableSeriesSelection=true, - EnableRotation=true, - PerspectiveAngle=50, - SeriesSelectedIndex=0, - Rotation=29, - Depth=100, - Palette=ChartColorPalette.BlueChrome, - Width=300, - Height=280 - }; - - ColumnSeries3D series = new ColumnSeries3D() - { - ItemsSource = new StockViewModel().Demands, - XBindingPath = "Category", - YBindingPath = "Value", - SeriesSelectionBrush = new SolidColorBrush(Colors.LightGreen), - SegmentSpacing = 0.5 - }; - - ColumnSeries3D series1 = new ColumnSeries3D() - { - ItemsSource = new StockViewModel().Demands, - XBindingPath = "Category", - YBindingPath = "Value", - SeriesSelectionBrush = new SolidColorBrush(Colors.SkyBlue), - SegmentSpacing = 0.5 - }; - - chart3D.Series.Add(series); - chart3D.Series.Add(series1); +SfChart3D chart3D = new SfChart3D() +{ + EnableSeriesSelection = true, + EnableRotation = true, + PerspectiveAngle = 50, + SeriesSelectedIndex = 0, + Rotation = 29, + Depth = 100, + Palette = ChartColorPalette.BlueChrome, + Width = 300, + Height = 280 +}; + +ColumnSeries3D series = new ColumnSeries3D() +{ + ItemsSource = new StockViewModel().Demands, + XBindingPath = "Category", + YBindingPath = "Value", + SeriesSelectionBrush = new SolidColorBrush(Colors.LightGreen), + SegmentSpacing = 0.5 +}; + +ColumnSeries3D series1 = new ColumnSeries3D() +{ + ItemsSource = new StockViewModel().Demands, + XBindingPath = "Category", + YBindingPath = "Value", + SeriesSelectionBrush = new SolidColorBrush(Colors.SkyBlue), + SegmentSpacing = 0.5 +}; + +chart3D.Series.Add(series); +chart3D.Series.Add(series1); {% endhighlight %} {% endtabs %} -The following screenshot is an example of a SfChart3D with series selection. - -![Series selection support in WPF 3D Chart](3D-Charts_images/Interaction/SeriesSelection.png) - - +The following screenshot is an example of a SfChart3D with series selection. +![Series selection support in WPF 3D Chart](3D-Charts_images/Interaction/SeriesSelection.png) \ No newline at end of file diff --git a/wpf/SfChart3D/Overview.md b/wpf/SfChart3D/Overview.md index 5410f4cd3d..532ef8089c 100644 --- a/wpf/SfChart3D/Overview.md +++ b/wpf/SfChart3D/Overview.md @@ -9,26 +9,24 @@ documentation: ug # WPF SfChart3D Overview -3D charts are used to view two-dimensional data in a three-dimensional view, and can be rotated in all 3 dimensions to get the best possible view of the data. - - WPF Chart support SfChart3D +3D charts are used to visualize two-dimensional data in a three-dimensional view. These charts can be rotated in all three dimensions to provide the optimal view of your data. +WPF Chart support SfChart3D ## Key features -* SfChart3D supports different type of [`Series`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfChart3D.html#Syncfusion_UI_Xaml_Charts_SfChart3D_Series) which can be used for different data visualizations.Each type of chart represents a unique style of representing data with more user friendly and greater UI visualization. - -* Supports several axes types which can be used with the charts. There are axes specialized for Numerical, Category, DateTime, TimeSpan, Logarithmic scenarios. +* **Versatile Series Types**: SfChart3D supports various [`Series`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfChart3D.html#Syncfusion_UI_Xaml_Charts_SfChart3D_Series) types for different data visualization needs. Each chart type offers a unique style of data representation with enhanced UI visualization. -* SfChart3D supports DepthAxis (Z Axis) helps us to plot chart data based on X, Y and Z Co – ordinates. +* **Multiple Axis Types**: Supports specialized axes for Numerical, Category, DateTime, TimeSpan, and Logarithmic data scenarios. -* Supports multiple axes that can be stacked and spanned for multiple panes. +* **Depth Axis Support**: SfChart3D includes a DepthAxis (Z-Axis) that enables plotting chart data based on X, Y, and Z coordinates. -* Allows you to map the data from the specified path, by achieving, Data binding concept. +* **Flexible Axis Layout**: Supports multiple axes that can be stacked and spanned across multiple panes. -* Animations allows to animate the chart series on loading, and whenever the ItemsSource changes. +* **Data Binding**: Allows mapping data from specified paths through comprehensive data binding capabilities. -* Dynamic rotation allows to view the best possible view of data dynamically using a mouse or touch device. +* **Animation Effects**: Enables animating chart series on loading and whenever the ItemsSource changes. -* Selection support allows to select Segment and series programmatically or user interaction. +* **Dynamic Rotation**: Provides the ability to view data from different angles dynamically using a mouse or touch device. +* **Selection Support**: Allows selecting segments and series programmatically or through user interaction. \ No newline at end of file