Skip to content

885699-Dev-Revamped WPF chart UG #1338

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

Closed
wants to merge 1 commit into from
Closed

885699-Dev-Revamped WPF chart UG #1338

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
141 changes: 70 additions & 71 deletions wpf/Charts/Adornments/Label.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,29 +67,29 @@ The following code example demonstrates the customization of label using the abo

{% highlight xaml %}

<syncfusion:ColumnSeries.AdornmentsInfo>
<syncfusion:ChartAdornmentInfo LabelPosition="Outer" Foreground="Black" FontSize="11" FontFamily="Calibri" BorderBrush="Black" BorderThickness="1" Margin="1" FontStyle="Italic" Background="DarkGray" ShowLabel="True">
</syncfusion:ChartAdornmentInfo>
</syncfusion:ColumnSeries.AdornmentsInfo>
<syncfusion:ColumnSeries.AdornmentsInfo>
<syncfusion:ChartAdornmentInfo LabelPosition="Outer" Foreground="Black" FontSize="11" FontFamily="Calibri" BorderBrush="Black" BorderThickness="1" Margin="1" FontStyle="Italic" Background="DarkGray" ShowLabel="True">
</syncfusion:ChartAdornmentInfo>
</syncfusion:ColumnSeries.AdornmentsInfo>

{% endhighlight %}

{% highlight c# %}

ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo()
{
{

ShowLabel = true,
LabelPosition = AdornmentsLabelPosition.Outer,
Foreground = new SolidColorBrush(Colors.Black),
BorderBrush = new SolidColorBrush(Colors.Black),
Background = new SolidColorBrush(Colors.DarkGray),
BorderThickness = new Thickness(1),
Margin = new Thickness(1),
FontStyle = FontStyles.Italic,
FontFamily = new FontFamily("Calibri"),
FontSize = 11
};
ShowLabel = true,
LabelPosition = AdornmentsLabelPosition.Outer,
Foreground = new SolidColorBrush(Colors.Black),
BorderBrush = new SolidColorBrush(Colors.Black),
Background = new SolidColorBrush(Colors.DarkGray),
BorderThickness = new Thickness(1),
Margin = new Thickness(1),
FontStyle = FontStyles.Italic,
FontFamily = new FontFamily("Calibri"),
FontSize = 11
};


{% endhighlight %}
Expand Down Expand Up @@ -148,19 +148,19 @@ The default appearance of the label can be customized using [`LabelTemplate`](ht
{% highlight c# %}

ColumnSeries series = new ColumnSeries()
{
ItemsSource = new ViewModel().Demands,
XBindingPath = "Category",
YBindingPath = "Value",
Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77))
};
{
ItemsSource = new ViewModel().Demands,
XBindingPath = "Category",
YBindingPath = "Value",
Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77))
};

ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo()
{
ShowLabel = true,
LabelPosition = AdornmentsLabelPosition.Outer,
LabelTemplate = this.Resources["adornmentTemplate"] as DataTemplate
};
ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo()
{
ShowLabel = true,
LabelPosition = AdornmentsLabelPosition.Outer,
LabelTemplate = this.Resources["adornmentTemplate"] as DataTemplate
};
series.AdornmentsInfo = adornmentInfo;

{% endhighlight %}
Expand Down Expand Up @@ -236,7 +236,6 @@ The connector line can be customized using the below properies.
* [`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)
* [`ConnectorRotationAngle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_ConnectorRotationAngle)
* [`ConnectorLineStyle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_ConnectorLineStyle)

The following code example shows the customization options for connector line:

Expand Down Expand Up @@ -272,22 +271,22 @@ The following code example shows the customization options for connector line:
{% highlight c# %}

PieSeries series = new PieSeries()
{
ItemsSource = new ServerViewModel().Performance,
XBindingPath = "Year",
YBindingPath = "Plastic",
LabelPosition = CircularSeriesLabelPosition.OutsideExtended,
Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77))
};
{
ItemsSource = new ServerViewModel().Performance,
XBindingPath = "Year",
YBindingPath = "Plastic",
LabelPosition = CircularSeriesLabelPosition.OutsideExtended,
Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77))
};

ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo()
{
ShowLabel = true,
ShowConnectorLine = true,
UseSeriesPalette = true,
ConnectorLineStyle=this.Resources["lineStyle"] as Style
LabelPosition =AdornmentsLabelPosition.Outer,
};
{
ShowLabel = true,
ShowConnectorLine = true,
UseSeriesPalette = true,
ConnectorLineStyle=this.Resources["lineStyle"] as Style
LabelPosition =AdornmentsLabelPosition.Outer,
};
series.AdornmentsInfo = adornmentInfo;

{% endhighlight %}
Expand All @@ -298,7 +297,7 @@ The following code example shows the customization options for 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, DoughnutSeries, PyramidSeries and FunnelSeries.
[`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#Syncfusion_UI_Xaml_Charts_ConnectorMode_Line) or [`Bezier`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ConnectorMode.html#Syncfusion_UI_Xaml_Charts_ConnectorMode_Bezier). This property is only for AccumulationSeries like PieSeries, DoughnutSeries, PyramidSeries and FunnelSeries.


{% tabs %}
Expand All @@ -319,26 +318,26 @@ The following code example shows the customization options for connector line:
{% highlight c# %}

PieSeries series = new PieSeries()
{
ItemsSource = new ServerViewModel().Performance,
XBindingPath = "Year",
YBindingPath = "Plastic",
EnableSmartLabels = true,
ExplodeAll = true,
ExplodeRadius = 3,
ConnectorType=ConnectorMode.Bezier,
LabelPosition = CircularSeriesLabelPosition.OutsideExtended,
Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77))
};
{
ItemsSource = new ServerViewModel().Performance,
XBindingPath = "Year",
YBindingPath = "Plastic",
EnableSmartLabels = true,
ExplodeAll = true,
ExplodeRadius = 3,
ConnectorType=ConnectorMode.Bezier,
LabelPosition = CircularSeriesLabelPosition.OutsideExtended,
Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77))
};

ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo()
{
ShowLabel = true,
ShowConnectorLine = true,
HorizontalAlignment = HorizontalAlignment.Center,
VerticalAlignment = VerticalAlignment.Center,
ConnectorHeight= 80
};
{
ShowLabel = true,
ShowConnectorLine = true,
HorizontalAlignment = HorizontalAlignment.Center,
VerticalAlignment = VerticalAlignment.Center,
ConnectorHeight= 80
};

{% endhighlight %}

Expand Down Expand Up @@ -366,9 +365,9 @@ The following code example shows the customization options for connector line:

{% highlight xaml %}

<syncfusion:ChartAdornmentInfo ShowLabel="True" UseSeriesPalette="True">
<syncfusion:ChartAdornmentInfo ShowLabel="True" UseSeriesPalette="True">

</syncfusion:ChartAdornmentInfo>
</syncfusion:ChartAdornmentInfo>

{% endhighlight %}

Expand All @@ -394,12 +393,12 @@ The following code example demonstrates the EnableSmartLabels property:

{% highlight xaml %}

<chart:PieSeries Interior="#777777" ItemsSource="{Binding CategoricalData}" ConnectorType="Bezier" XBindingPath="Year"
YBindingPath="Plastic" EnableSmartLabels="True" LabelPosition="OutsideExtended" ExplodeAll="True" ExplodeRadius="3">
<chart:PieSeries.AdornmentsInfo>
<chart:ChartAdornmentInfo ShowLabel="True" HorizontalAlignment="Center" VerticalAlignment="Center" ShowConnectorLine="True"></chart:ChartAdornmentInfo>
</chart:PieSeries.AdornmentsInfo>
</chart:PieSeries>
<chart:PieSeries Interior="#777777" ItemsSource="{Binding CategoricalData}" ConnectorType="Bezier" XBindingPath="Year"
YBindingPath="Plastic" EnableSmartLabels="True" LabelPosition="OutsideExtended" ExplodeAll="True" ExplodeRadius="3">
<chart:PieSeries.AdornmentsInfo>
<chart:ChartAdornmentInfo ShowLabel="True" HorizontalAlignment="Center" VerticalAlignment="Center" ShowConnectorLine="True"></chart:ChartAdornmentInfo>
</chart:PieSeries.AdornmentsInfo>
</chart:PieSeries>

{% endhighlight %}

Expand Down Expand Up @@ -434,4 +433,4 @@ The following code example demonstrates the EnableSmartLabels property:

![Smart labels for adornments in WPF Chart](Adornments_images/smartlabel.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#Syncfusion_UI_Xaml_Charts_CircularSeriesLabelPosition_Inside), [`Outside`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CircularSeriesLabelPosition.html#Syncfusion_UI_Xaml_Charts_CircularSeriesLabelPosition_Outside) or [`OutsideExtended`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CircularSeriesLabelPosition.html#Syncfusion_UI_Xaml_Charts_CircularSeriesLabelPosition_OutsideExtended) using the [`LabelPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CircularSeriesBase.html#Syncfusion_UI_Xaml_Charts_CircularSeriesBase_LabelPosition) property.
26 changes: 13 additions & 13 deletions wpf/Charts/Adornments/Marker.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,28 +14,28 @@ 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`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_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:
The following code example demonstrates the column series with [`Diamond`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSymbol.html#Syncfusion_UI_Xaml_Charts_ChartSymbol_Diamond) symbol:


{% tabs %}

{% highlight xaml %}

<syncfusion:ColumnSeries.AdornmentsInfo>
<syncfusion:ChartAdornmentInfo ShowMarker="True" SymbolInterior="Black" Symbol="Diamond">
</syncfusion:ChartAdornmentInfo>
</syncfusion:ColumnSeries.AdornmentsInfo>
<syncfusion:ColumnSeries.AdornmentsInfo>
<syncfusion:ChartAdornmentInfo ShowMarker="True" SymbolInterior="Black" Symbol="Diamond">
</syncfusion:ChartAdornmentInfo>
</syncfusion:ColumnSeries.AdornmentsInfo>

{% endhighlight %}

{% highlight c# %}

ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo()
{
ShowMarker = true,
Symbol = ChartSymbol.Diamond,
SymbolInterior=new SolidColorBrush(Colors.Black)
};
{
ShowMarker = true,
Symbol = ChartSymbol.Diamond,
SymbolInterior=new SolidColorBrush(Colors.Black)
};

{% endhighlight %}

Expand Down Expand Up @@ -73,9 +73,9 @@ We have some predefined symbols such as

{% highlight xaml %}

<syncfusion:ChartAdornmentInfo ShowMarker="True" SymbolStroke="Black" SymbolHeight="10"
SymbolWidth="10" SymbolInterior="DarkGray" Symbol="Ellipse">
</syncfusion:ChartAdornmentInfo>o>
<syncfusion:ChartAdornmentInfo ShowMarker="True" SymbolStroke="Black" SymbolHeight="10"
SymbolWidth="10" SymbolInterior="DarkGray" Symbol="Ellipse">
</syncfusion:ChartAdornmentInfo>o>

{% endhighlight %}

Expand Down
34 changes: 17 additions & 17 deletions wpf/Charts/Adornments/Positioning-Adornment.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@ documentation: ug

The positioning of adornments inside the series is defined using [`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#Syncfusion_UI_Xaml_Charts_AdornmentsPosition_Top) - 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#Syncfusion_UI_Xaml_Charts_AdornmentsPosition_Bottom) - 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#Syncfusion_UI_Xaml_Charts_AdornmentsPosition_TopAndBottom) - Positions the Adornment at the center point of a chart segment.

N> This behavior varies based on the chart series type.

Expand All @@ -23,21 +23,21 @@ The following code example explains the positioning of adornments in the middle

{% highlight xaml %}

<syncfusion:ChartAdornmentInfo ShowMarker="True" AdornmentsPosition="TopAndBottom" SymbolInterior="DarkGray" Symbol="Ellipse">
</syncfusion:ChartAdornmentInfo>
<syncfusion:ChartAdornmentInfo ShowMarker="True" AdornmentsPosition="TopAndBottom" SymbolInterior="DarkGray" Symbol="Ellipse">
</syncfusion:ChartAdornmentInfo>

{% endhighlight %}

{% highlight c# %}

ColumnSeries series = new ColumnSeries();
ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo()
{
ShowMarker = true,
Symbol = ChartSymbol.Ellipse,
SymbolInterior = new SolidColorBrush(Colors.DarkGray),
AdornmentsPosition=AdornmentsPosition.TopAndBottom
};
ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo()
{
ShowMarker = true,
Symbol = ChartSymbol.Ellipse,
SymbolInterior = new SolidColorBrush(Colors.DarkGray),
AdornmentsPosition=AdornmentsPosition.TopAndBottom
};
series.AdornmentsInfo = adornmentInfo;

{% endhighlight %}
Expand All @@ -55,11 +55,11 @@ Other than the above positioning options, SfChart providing additional customiza

The following are the values for this property:

* [`Default`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.AdornmentsLabelPosition.html)
* [`Auto`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.AdornmentsLabelPosition.html)
* [`Inner`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.AdornmentsLabelPosition.html)
* [`Outer`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.AdornmentsLabelPosition.html)
* [`Center`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.AdornmentsLabelPosition.html)
* [`Default`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.AdornmentsLabelPosition.html#Syncfusion_UI_Xaml_Charts_AdornmentsLabelPosition_Default)
* [`Auto`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.AdornmentsLabelPosition.html#Syncfusion_UI_Xaml_Charts_AdornmentsLabelPosition_Auto)
* [`Inner`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.AdornmentsLabelPosition.html#Syncfusion_UI_Xaml_Charts_AdornmentsLabelPosition_Inner)
* [`Outer`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.AdornmentsLabelPosition.html#Syncfusion_UI_Xaml_Charts_AdornmentsLabelPosition_Outer)
* [`Center`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.AdornmentsLabelPosition.html#Syncfusion_UI_Xaml_Charts_AdornmentsLabelPosition_Center)

The following code sample illustrates the center position of data marker labels,

Expand Down
Loading