Skip to content

Improved SfChart3D UG Content Using Syncfusion Continue AI #1789

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: hotfix/hotfix-v29.1.33
Choose a base branch
from
Open

Improved SfChart3D UG Content Using Syncfusion Continue AI #1789

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
38baa19
updated content for SfChart3D
Harsha-SF4223 May 21, 2025
873b4a2
updated variable name
Harsha-SF4223 May 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
99 changes: 49 additions & 50 deletions wpf/SfChart3D/3DSeries.md
View file
Open in desktop

Large diffs are not rendered by default.

692 changes: 320 additions & 372 deletions wpf/SfChart3D/Adornments.md
View file
Open in desktop

Large diffs are not rendered by default.

40 changes: 19 additions & 21 deletions wpf/SfChart3D/Adornments/DataMarkers.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}

<chart:ColumnSeries3D ItemsSource="{Binding CategoricalDatas}" XBindingPath="Year" YBindingPath="Plastic">
<!--AdornmentsInfo-->
<chart:ColumnSeries3D.AdornmentsInfo>
<chart:ChartAdornmentInfo3D UseSeriesPalette="True" BorderBrush="White" BorderThickness="1" ShowLabel="True" ></chart:ChartAdornmentInfo3D>
</chart:ColumnSeries3D.AdornmentsInfo>
</chart:ColumnSeries3D>
<chart:ColumnSeries3D ItemsSource="{Binding CategoricalDatas}" XBindingPath="Year" YBindingPath="Plastic">
<!--AdornmentsInfo-->
<chart:ColumnSeries3D.AdornmentsInfo>
<chart:ChartAdornmentInfo3D UseSeriesPalette="True" BorderBrush="White" BorderThickness="1" ShowLabel="True"></chart:ChartAdornmentInfo3D>
</chart:ColumnSeries3D.AdornmentsInfo>
</chart:ColumnSeries3D>

{% 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)
95 changes: 46 additions & 49 deletions wpf/SfChart3D/Adornments/Labels.md
View file
Open in desktop

Large diffs are not rendered by default.

18 changes: 8 additions & 10 deletions wpf/SfChart3D/Adornments/Marker.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down Expand Up @@ -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;
Expand All @@ -61,15 +60,15 @@ 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.
* [`SymbolInterior`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_SymbolInterior) - used to change the color of symbol.
* [`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 %}

Expand Down Expand Up @@ -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,
Expand All @@ -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 %}

Expand Down Expand Up @@ -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)
77 changes: 39 additions & 38 deletions wpf/SfChart3D/Adornments/Positioning-Adornments.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}

<chart:ColumnSeries3D ItemsSource="{Binding CategoricalData}" XBindingPath="Year"
<chart:ColumnSeries3D ItemsSource="{Binding CategoricalData}" XBindingPath="Year"
YBindingPath="Plastic">
<chart:ColumnSeries3D.AdornmentsInfo>
<chart:ChartAdornmentInfo3D ShowMarker="True" SymbolHeight="10" SymbolWidth="10" Symbol="Diamond" AdornmentsPosition="TopAndBottom" SymbolInterior="#FF64B5F6"></chart:ChartAdornmentInfo3D>
Expand All @@ -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;
Expand All @@ -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 %}

<chart:ChartAdornmentInfo3D UseSeriesPalette="True" LabelPosition="Auto"
<chart:ChartAdornmentInfo3D UseSeriesPalette="True" LabelPosition="Auto"
ShowLabel="True" BorderBrush="White" BorderThickness="1"></chart:ChartAdornmentInfo3D>

{% endhighlight %}
Expand All @@ -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),
};

Expand All @@ -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 %}

<chart:ChartAdornmentInfo3D UseSeriesPalette="True" LabelPosition="Inner"
<chart:ChartAdornmentInfo3D UseSeriesPalette="True" LabelPosition="Inner"
ShowLabel="True" BorderBrush="White" BorderThickness="1"></chart:ChartAdornmentInfo3D>

{% endhighlight %}
Expand All @@ -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),
};

Expand All @@ -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 %}

<chart:ChartAdornmentInfo3D UseSeriesPalette="True" LabelPosition="Outer"
<chart:ChartAdornmentInfo3D UseSeriesPalette="True" LabelPosition="Outer"
ShowLabel="True" BorderBrush="White" BorderThickness="1"></chart:ChartAdornmentInfo3D>

{% endhighlight %}
Expand All @@ -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),
};

Expand All @@ -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 %}

<chart:ChartAdornmentInfo3D UseSeriesPalette="True" LabelPosition="Center"
<chart:ChartAdornmentInfo3D UseSeriesPalette="True" LabelPosition="Center"
ShowLabel="True" BorderBrush="White" BorderThickness="1"></chart:ChartAdornmentInfo3D>

{% endhighlight %}
Expand All @@ -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),
};

Expand All @@ -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)|
Loading