From 5e84b5e7fdd3240edddcc89f69d11342e050e27b Mon Sep 17 00:00:00 2001 From: SivaThennarasu Date: Tue, 14 Apr 2026 12:39:33 +0530 Subject: [PATCH 1/7] I have made the Changes --- wpf/Charts/Area.md | 247 +++++++++----------------------- wpf/Charts/Axis.md | 115 ++++----------- wpf/Charts/Getting-Started.md | 116 +++++---------- wpf/Charts/Header.md | 35 ++--- wpf/Charts/Overview.md | 2 +- wpf/SfChart3D/GettingStarted.md | 2 +- 6 files changed, 141 insertions(+), 376 deletions(-) diff --git a/wpf/Charts/Area.md b/wpf/Charts/Area.md index 3f917e86a..edfc7e017 100644 --- a/wpf/Charts/Area.md +++ b/wpf/Charts/Area.md @@ -32,31 +32,21 @@ The following code examples illustrates the usage of these properties: {% highlight xaml %} + Header="Chart Area Header" + AreaBackground="Cyan" + Background="LightGray" + AreaBorderBrush="Gray" + AreaBorderThickness="3" > {% endhighlight %} {% highlight c# %} SfChart chart = new SfChart(); - chart.Header = "Chart Area Header"; - chart.AreaBackground = new SolidColorBrush(Colors.Cyan); - chart.Background = new SolidColorBrush(Colors.LightGray); - chart.AreaBorderBrush = new SolidColorBrush(Colors.Gray); - chart.AreaBorderThickness = new Thickness(3); {% endhighlight %} @@ -78,68 +68,39 @@ The following code example demonstrates, how you can create multiple panes in th - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -148,65 +109,43 @@ chart:SfChart.Row="1" > {% highlight c# %} SfChart chart = new SfChart(); - chart.RowDefinitions.Add(new ChartRowDefinition()); - chart.RowDefinitions.Add(new ChartRowDefinition()); - chart.ColumnDefinitions.Add(new ChartColumnDefinition()); - chart.ColumnDefinitions.Add(new ChartColumnDefinition()); CategoryAxis xAxis = new CategoryAxis(); - ChartBase.SetColumnSpan(xAxis, 2); - chart.PrimaryAxis = xAxis; NumericalAxis yAxis = new NumericalAxis(); - yAxis.PlotOffset = 13; ChartBase.SetColumnSpan(yAxis, 2); - chart.SecondaryAxis = yAxis; ColumnSeries columnSeries1 = new ColumnSeries() { - ItemsSource = new ViewModel().SneakersDetail, - XBindingPath = "Brand", - YBindingPath = "ItemsCount", - Palette = ChartColorPalette.LightCandy, - }; NumericalAxis axis = new NumericalAxis(); - axis.PlotOffset = 10; - SfChart.SetRow(axis, 1); ColumnSeries columnSeries2 = new ColumnSeries() { - ItemsSource = new ViewModel().SneakersDetail, - XBindingPath = "Brand", - YBindingPath = "ItemsCount1", - Palette = ChartColorPalette.Metro, - YAxis = axis - }; chart.Series.Add(columnSeries1); - chart.Series.Add(columnSeries2); {% endhighlight %} @@ -228,60 +167,36 @@ You can set the row span in chart like the following code example. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + {% endhighlight %} @@ -289,65 +204,42 @@ YBindingPath="ItemsCount"> {% highlight c# %} SfChart chart = new SfChart(); - chart.RowDefinitions.Add(new ChartRowDefinition()); - chart.RowDefinitions.Add(new ChartRowDefinition()); - chart.ColumnDefinitions.Add(new ChartColumnDefinition()); - chart.ColumnDefinitions.Add(new ChartColumnDefinition()); CategoryAxis xAxis = new CategoryAxis(); - xAxis.TickLinesPosition = AxisElementPosition.Outside; - ChartBase.SetColumnSpan(xAxis, 2); - -SfChart.SetRow(xAxis, 0); - +SfChart.SetRow(xAxis, 0); chart.PrimaryAxis = xAxis; NumericalAxis yAxis = new NumericalAxis(); - ChartBase.SetColumnSpan(yAxis, 2); - chart.SecondaryAxis = yAxis; ColumnSeries columnSeries1 = new ColumnSeries() { - ItemsSource = new ViewModel().SneakersDetail, - XBindingPath = "Brand", - YBindingPath = "ItemsCount1", - }; NumericalAxis axis = new NumericalAxis(); - axis.PlotOffset = 10; - ChartBase.SetColumnSpan(axis, 2); LineSeries lineSeries = new LineSeries() { - ItemsSource = new ViewModel().SneakersDetail, - XBindingPath = "Brand", - YBindingPath = "ItemsCount", - Interior = new SolidColorBrush(Colors.CadetBlue), - YAxis = axis - }; chart.Series.Add(columnSeries1); - chart.Series.Add(lineSeries); {% endhighlight %} @@ -363,7 +255,6 @@ More like serialization, you can use [`Clone`](https://help.syncfusion.com/cr/wp {% highlight C# %} var chartCopy = chart.Clone() as SfChart; - grid.Children.Add(chartCopy as SfChart); //Here, 'grid' is an empty container in the application to hold the chart. diff --git a/wpf/Charts/Axis.md b/wpf/Charts/Axis.md index 917866798..a8b2c7fcb 100644 --- a/wpf/Charts/Axis.md +++ b/wpf/Charts/Axis.md @@ -88,26 +88,20 @@ In [`ChartAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Ch {% highlight xaml %} - - - - - - - - - - - - - + + + + + + + + {% endhighlight %} {% highlight c# %} chart.PrimaryAxis = new CategoryAxis() { Header = "Medals" }; - chart.SecondaryAxis = new NumericalAxis() { Header = "Values(In Tonnes)" }; {% endhighlight %} @@ -125,52 +119,28 @@ Default appearance of the header can be customized using [`HeaderTemplate`](http {% highlight xaml %} - - + - - - - - + - - - - - + - - - - - - - + - {% endhighlight %} @@ -179,16 +149,12 @@ Default appearance of the header can be customized using [`HeaderTemplate`](http chart.PrimaryAxis = new CategoryAxis() { - HeaderTemplate = chart.Resources["headerTemplate1"] as DataTemplate - }; chart.SecondaryAxis = new NumericalAxis() { - HeaderTemplate = chart.Resources["headerTemplate2"] as DataTemplate - }; {% endhighlight %} @@ -207,35 +173,21 @@ chart.SecondaryAxis = new NumericalAxis() {% highlight xaml %} - - - - - - - - - - - - - + + + + + + - - - - - - - - - - - - - + + + + + + {% endhighlight %} @@ -244,31 +196,21 @@ chart.SecondaryAxis = new NumericalAxis() LabelStyle style = new LabelStyle() { - FontFamily = new FontFamily("Algerian"), - FontSize = 13, - Foreground = new SolidColorBrush(Colors.Black) - }; chart.PrimaryAxis = new CategoryAxis() { - Header = "Medals", - LabelStyle = style - }; chart.SecondaryAxis = new NumericalAxis() { - Header = "Values(In Tonnes)", - LabelStyle = style - }; {% endhighlight %} @@ -294,11 +236,8 @@ The [`LabelsPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Cha {% highlight xaml %} - - - - - + + {% endhighlight %} @@ -307,9 +246,7 @@ The [`LabelsPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Cha chart.PrimaryAxis = new NumericalAxis() { - LabelsPosition = AxisElementPosition.Inside - }; {% endhighlight %} diff --git a/wpf/Charts/Getting-Started.md b/wpf/Charts/Getting-Started.md index b35e69dfc..462be976d 100644 --- a/wpf/Charts/Getting-Started.md +++ b/wpf/Charts/Getting-Started.md @@ -67,11 +67,9 @@ Then initialize an empty chart with two axes as shown below, SfChart chart = new SfChart(); CategoryAxis primaryAxis = new CategoryAxis(); - chart.PrimaryAxis = primaryAxis; - -NumericalAxis secondaryAxis = new NumericalAxis(); +NumericalAxis secondaryAxis = new NumericalAxis(); chart.SecondaryAxis = secondaryAxis; {% endhighlight %} @@ -81,11 +79,9 @@ chart.SecondaryAxis = secondaryAxis; Dim chart As New SfChart() Dim primaryAxis As New CategoryAxis () - chart.PrimaryAxis = primaryAxis Dim secondaryAxis As New NumericalAxis () - chart.SecondaryAxis = secondaryAxis {% endhighlight %} @@ -109,7 +105,6 @@ Now, let us define a simple data model that represents a data point in [WPF Char public class Person { public string Name { get; set; } - public double Height { get; set; } } @@ -120,7 +115,6 @@ public class Person Public Class Person Public Property Name As String - Public Property Height As Double End Class @@ -138,19 +132,19 @@ Next, create a view model class and initialize a list of `Person` objects as fol public class ViewModel { - public List Data { get; set; } - - public ViewModel() - { - Data = new List() - { - new Person { Name = "David", Height = 180 }, - new Person { Name = "Michael", Height = 170 }, - new Person { Name = "Steve", Height = 160 }, - new Person { Name = "Joel", Height = 182 } - }; - } - } + public List Data { get; set; } + + public ViewModel() + { + Data = new List() + { + new Person { Name = "David", Height = 180 }, + new Person { Name = "Michael", Height = 170 }, + new Person { Name = "Steve", Height = 160 }, + new Person { Name = "Joel", Height = 182 } + }; + } +} {% endhighlight %} @@ -197,10 +191,8 @@ N> Add namespace of `ViewModel` class to your XAML window if you prefer to set ` - - {% endhighlight %} {% highlight C# %} @@ -228,23 +220,17 @@ N> You need to set [`XBindingPath`](https://help.syncfusion.com/cr/wpf/Syncfusio {% highlight xaml %} - - - - - - - - - - + + + - - - - + + + - + + + {% endhighlight %} @@ -253,26 +239,17 @@ N> You need to set [`XBindingPath`](https://help.syncfusion.com/cr/wpf/Syncfusio SfChart chart = new SfChart(); //Adding horizontal axis to the chart - CategoryAxis primaryAxis = new CategoryAxis(); - primaryAxis.Header = "Name"; - chart.PrimaryAxis = primaryAxis; - //Adding vertical axis to the chart - NumericalAxis secondaryAxis = new NumericalAxis(); - secondaryAxis.Header = "Height(in cm)"; - chart.SecondaryAxis = secondaryAxis; - //Initialize the two series for SfChart ColumnSeries series = new ColumnSeries(); - series.ItemsSource = (new ViewModel()).Data; series.XBindingPath = "Name"; series.YBindingPath = "Height"; @@ -287,19 +264,13 @@ chart.Series.Add(series); Dim chart As New SfChart() 'Adding horizontal axis to the chart - Dim primaryAxis As New CategoryAxis() - primaryAxis.Header = "Name" chart.PrimaryAxis = primaryAxis - 'Adding vertical axis to the chart - Dim secondaryAxis As New NumericalAxis() - secondaryAxis.Header = "Height(in cm)" - chart.SecondaryAxis = secondaryAxis 'Initialize the two series for SfChart @@ -310,7 +281,6 @@ series.XBindingPath = "Name" series.YBindingPath = "Height" 'Adding Series to the Chart Series Collection - chart.Series.Add(series) {% endhighlight %} @@ -328,10 +298,8 @@ The header of the chart acts as the title to provide quick information to the us {% highlight xaml %} - - {% endhighlight %} @@ -362,17 +330,13 @@ You can add data labels to improve the readability of the chart and it can be en {% highlight xaml %} - ... - - ... - {% endhighlight %} @@ -402,17 +366,11 @@ You can enable legend using the [`SfChart.Legend`](https://help.syncfusion.com/c {% highlight xaml %} - - ... - + ... - - - ... - {% endhighlight %} @@ -537,9 +495,8 @@ The following code example gives you the complete code of above configurations. - - + @@ -563,27 +520,23 @@ The following code example gives you the complete code of above configurations. - - - + {% endhighlight %} {% highlight C# %}  using Syncfusion.UI.Xaml.Charts; - namespace ChartDemo { - - public sealed partial class MainWindow : Window + public sealed partial class MainWindow : Window { public MainWindow() { InitializeComponent(); - + SfChart chart = new SfChart() { Header = "Chart", Height = 300, Width = 500 }; //Adding horizontal axis to the chart @@ -605,10 +558,10 @@ namespace ChartDemo //Initializing column series ColumnSeries series = new ColumnSeries(); series.ItemsSource = (new ViewModel()).Data; - series.XBindingPath = "Name"; + series.XBindingPath = "Name"; series.YBindingPath = "Height"; series.ShowTooltip = true; - series.Label = "Heights"; + series.Label = "Heights"; //Setting adornment to the chart series series.AdornmentsInfo = new ChartAdornmentInfo() { ShowLabel = true }; @@ -616,9 +569,8 @@ namespace ChartDemo //Adding Series to the Chart Series Collection chart.Series.Add(series); this.Content = chart; - } - } + } } {% endhighlight %} @@ -627,8 +579,9 @@ namespace ChartDemo Imports Syncfusion.UI.Xaml.Charts Partial Public Class MainWindow - Inherits Window + Inherits Window Public Sub New() + InitializeComponent() Dim chart As New SfChart() @@ -663,10 +616,9 @@ Partial Public Class MainWindow series.ShowTooltip = True 'Setting adornment to the chart series - series.AdornmentsInfo = New ChartAdornmentInfo() With {.ShowLabel = True} + series.AdornmentsInfo = New ChartAdornmentInfo() With {.ShowLabel = True} 'Adding Series to the Chart Series Collection - chart.Series.Add(series) Me.Content = chart diff --git a/wpf/Charts/Header.md b/wpf/Charts/Header.md index f4728a984..cab388eaf 100644 --- a/wpf/Charts/Header.md +++ b/wpf/Charts/Header.md @@ -22,7 +22,6 @@ documentation: ug {% highlight c# %} SfChart chart = new SfChart(); - chart.Header = "Usage of Metals"; {% endhighlight %} @@ -43,7 +42,6 @@ Also you can add more customization for the header as below: - @@ -68,39 +66,26 @@ SfChart chart = new SfChart(); Border border = new Border() { - -BorderThickness = new Thickness(0.5), - -BorderBrush = new SolidColorBrush(Colors.Black), - -Margin = new Thickness(10), - -CornerRadius = new CornerRadius(5) - + BorderThickness = new Thickness(0.5), + BorderBrush = new SolidColorBrush(Colors.Black), + Margin = new Thickness(10), + CornerRadius = new CornerRadius(5) }; TextBlock textBlock = new TextBlock() -{ - -Text = "Chart Area Header", - -Margin = new Thickness(5), - -FontSize = 14 - +{ + Text = "Chart Area Header", + Margin = new Thickness(5), + FontSize = 14 }; textBlock.Effect = new DropShadowEffect() { - -Color = Colors.Black, - -Opacity = 0.5 - + Color = Colors.Black, + Opacity = 0.5 }; border.Child = textBlock; - chart.Header = border; {% endhighlight %} diff --git a/wpf/Charts/Overview.md b/wpf/Charts/Overview.md index f64227dd9..6d271ef86 100644 --- a/wpf/Charts/Overview.md +++ b/wpf/Charts/Overview.md @@ -20,7 +20,7 @@ SfChart provides a perfect way to visualize data with a high level of user inter * SfChart supports 38 different types of [series](https://help.syncfusion.com/wpf/charts/seriestypes/series), ranging from simple [bar series](https://help.syncfusion.com/wpf/charts/seriestypes/columnandbar) to complex [financial charts](https://help.syncfusion.com/wpf/charts/seriestypes/financial). Each type of chart represents a unique style of representing data with more user friendly and greater UI visualization. * Capable of rendering large amount of data within the few milliseconds (ms). * Allows you to map data from the specified path, by achieving [data binding](https://help.syncfusion.com/wpf/charts/databinding) concept. -* Interactive zooming[https://help.syncfusion.com/wpf/charts/interactive-features/zoompan] can be done with touch mode enabled that allows you to explore portions of large charts in more detail, with excellent performance. +* [Interactive zooming](https://help.syncfusion.com/wpf/charts/interactive-features/zoompan) can be done with touch mode enabled that allows you to explore portions of large charts in more detail, with excellent performance. * When you need more information about particular segment in a chart, a little mouse over on the series provides much more information by including [tooltip](https://help.syncfusion.com/wpf/charts/interactive-features/tooltip), [crosshair](https://help.syncfusion.com/wpf/charts/interactive-features/crosshair) and [track ball](https://help.syncfusion.com/wpf/charts/interactive-features/trackball) behavior. * Supports 10 different types of [technical indicators](https://help.syncfusion.com/wpf/charts/technical-indicators) that determine financial, stock or economic trends by analyzing a set of recorded data. * Supports multiple axes that can be stacked and spanned for multiple panes. diff --git a/wpf/SfChart3D/GettingStarted.md b/wpf/SfChart3D/GettingStarted.md index e750b89cb..03140dfaf 100644 --- a/wpf/SfChart3D/GettingStarted.md +++ b/wpf/SfChart3D/GettingStarted.md @@ -159,7 +159,7 @@ As we are going to visualize the comparison of heights in the data model, add [` {% highlight xaml %} - + From 78db377b5bf4fe93c72eb1b991b4e01b3c44e2fe Mon Sep 17 00:00:00 2001 From: SivaThennarasu Date: Tue, 14 Apr 2026 17:15:17 +0530 Subject: [PATCH 2/7] I have changed the alignment of the code snippets --- wpf/Charts/Axis.md | 317 ++++++++++----------------------------------- 1 file changed, 71 insertions(+), 246 deletions(-) diff --git a/wpf/Charts/Axis.md b/wpf/Charts/Axis.md index a8b2c7fcb..13ee33f41 100644 --- a/wpf/Charts/Axis.md +++ b/wpf/Charts/Axis.md @@ -265,11 +265,7 @@ chart.PrimaryAxis = new NumericalAxis() {% highlight xaml %} - - - - - + {% endhighlight %} @@ -278,9 +274,7 @@ chart.PrimaryAxis = new NumericalAxis() chart.PrimaryAxis = new DateTimeAxis() { - - LabelRotationAngle = 90 - + LabelRotationAngle = 90 }; {% endhighlight %} @@ -298,27 +292,16 @@ SfChart allows user to define the labels for the axis. For defining the axis lab {% highlight xaml %} - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + {% endhighlight %} @@ -326,19 +309,12 @@ SfChart allows user to define the labels for the axis. For defining the axis lab {% highlight c# %} CategoryAxis axis = new CategoryAxis(); - axis.CustomLabels.Add(new ChartAxisLabel() { Position = 0, LabelContent = "0-1" }); - axis.CustomLabels.Add(new ChartAxisLabel() { Position = 1, LabelContent = "1-2" }); - axis.CustomLabels.Add(new ChartAxisLabel() { Position = 2, LabelContent = "2-3" }); - axis.CustomLabels.Add(new ChartAxisLabel() { Position = 3, LabelContent = "3-4" }); - axis.CustomLabels.Add(new ChartAxisLabel() { Position = 4, LabelContent = "4-5" }); - axis.CustomLabels.Add(new ChartAxisLabel() { Position = 5, LabelContent = "5-5" }); - chart.PrimaryAxis = axis; {% endhighlight %} @@ -355,11 +331,7 @@ You can also directly bind the collection of labels to the [`LabelsSource`](http {% highlight xaml %} - - - - - + {% endhighlight %} @@ -368,48 +340,29 @@ You can also directly bind the collection of labels to the [`LabelsSource`](http chart.PrimaryAxis = new CategoryAxis() { - - ContentPath ="Content", - + ContentPath = "Content", PositionPath = "Position", - LabelsSource = Labels - }; - public List Labels { get; set; } Labels = new List - { - - new LabelItem() {Position=0, Content = "0-1"}, - - new LabelItem() {Position=1, Content = "1-2"}, - - new LabelItem() {Position=2, Content = "2-3"}, - - new LabelItem() {Position=3, Content = "3-4"}, - - new LabelItem() {Position=4, Content = "4-5"}, - - new LabelItem() {Position=5, Content = "5-6"}, - - new LabelItem() {Position=6, Content = "6-7"}, - - new LabelItem() {Position=7, Content = "7-8"}, - + new LabelItem() { Position = 0, Content = "0-1"}, + new LabelItem() { Position = 1, Content = "1-2"}, + new LabelItem() { Position = 2, Content = "2-3"}, + new LabelItem() { Position = 3, Content = "3-4"}, + new LabelItem() { Position = 4, Content = "4-5"}, + new LabelItem() { Position = 5, Content = "5-6"}, + new LabelItem() { Position = 6, Content = "6-7"}, + new LabelItem() { Position = 7, Content = "7-8"}, }; public class LabelItem - { - public string Content { get; set; } - public int Position { get; set; } - } {% endhighlight %} @@ -430,11 +383,7 @@ Axis labels can be formatting by predefined formatting types based on the axis t {% highlight xaml %} - - - - - + {% endhighlight %} @@ -443,11 +392,8 @@ Axis labels can be formatting by predefined formatting types based on the axis t chart.PrimaryAxis = new DateTimeAxis() { - LabelFormat = "MM/dd", - FontSize = 12 - }; {% endhighlight %} @@ -464,9 +410,7 @@ chart.PrimaryAxis = new DateTimeAxis() {% highlight xaml %} - - - + {% endhighlight %} @@ -475,9 +419,7 @@ chart.PrimaryAxis = new DateTimeAxis() chart.PrimaryAxis = new TimeSpanAxis() { - LabelFormat = "g", - }; {% endhighlight %} @@ -494,9 +436,7 @@ chart.PrimaryAxis = new TimeSpanAxis() {% highlight xaml %} - - - + {% endhighlight %} @@ -505,9 +445,7 @@ chart.PrimaryAxis = new TimeSpanAxis() chart.PrimaryAxis = new NumericalAxis() { - LabelFormat = "0.00", - }; {% endhighlight %} @@ -528,28 +466,18 @@ To display the measuring units, it can be added as a prefix or suffix to the axi {% highlight xaml %} - - - - - + - - - - + - - + {% endhighlight %} @@ -557,9 +485,7 @@ To display the measuring units, it can be added as a prefix or suffix to the axi chart.SecondaryAxis = new NumericalAxis() { - PrefixLabelTemplate = chart.Resources["prefixLabelTemplate"] as DataTemplate - }; {% endhighlight %} @@ -575,26 +501,18 @@ chart.SecondaryAxis = new NumericalAxis() {% highlight xaml %} - - + - - - TextBlock FontSize="10" VerticalAlignment="Center" Text="K"/> - + - - - - + - {% endhighlight %} @@ -603,9 +521,7 @@ chart.SecondaryAxis = new NumericalAxis() chart.SecondaryAxis = new NumericalAxis() { - PostfixLabelTemplate = chart.Resources["postfixLabelTemplate"] as DataTemplate - }; {% endhighlight %} @@ -624,41 +540,29 @@ chart.SecondaryAxis = new NumericalAxis() {% highlight xaml %} - - - - - - - - - - - - - + + + + + - - - + - - - {% endhighlight %} @@ -667,9 +571,7 @@ chart.SecondaryAxis = new NumericalAxis() chart.PrimaryAxis = new CategoryAxis() { - LabelTemplate = chart.Resources["labelTemplate"] as DataTemplate - }; {% endhighlight %} @@ -688,10 +590,8 @@ This property allows us to set the distance between the axis header and the axis {% highlight xaml %} - - - - + + {% endhighlight %} @@ -699,11 +599,8 @@ This property allows us to set the distance between the axis header and the axis chart.PrimaryAxis = new NumericalAxis() { - Header = "Demand", - LabelExtent = 50 - }; {% endhighlight %} @@ -733,9 +630,7 @@ None option is used to display all the label even if it intersects. The followin {% highlight xaml %} - - - + {% endhighlight %} @@ -744,9 +639,7 @@ None option is used to display all the label even if it intersects. The followin chart.PrimaryAxis = new CategoryAxis() { - LabelsIntersectAction = AxisLabelsIntersectAction.None - }; {% endhighlight %} @@ -765,9 +658,7 @@ Hide option is used to hide the labels if it intersects .You can define the hide {% highlight xaml %} - - - + {% endhighlight %} @@ -776,9 +667,7 @@ Hide option is used to hide the labels if it intersects .You can define the hide chart.PrimaryAxis = new DateTimeAxis() { - LabelsIntersectAction = AxisLabelsIntersectAction.Hide - }; {% endhighlight %} @@ -797,11 +686,7 @@ This option is used to move the labels to next row if it intersects .The followi {% highlight xaml %} - - - - - + {% endhighlight %} @@ -810,9 +695,7 @@ This option is used to move the labels to next row if it intersects .The followi chart.PrimaryAxis = new DateTimeAxis() { - LabelsIntersectAction = AxisLabelsIntersectAction.MultipleRows - }; {% endhighlight %} @@ -830,9 +713,7 @@ This option in [`LabelsIntersectAction`](https://help.syncfusion.com/cr/wpf/Sync {% highlight xml %} - - - + {% endhighlight %} @@ -840,9 +721,7 @@ This option in [`LabelsIntersectAction`](https://help.syncfusion.com/cr/wpf/Sync chart.PrimaryAxis = new CategoryAxis() { - LabelsIntersectAction = AxisLabelsIntersectAction.Auto - }; {% endhighlight %} @@ -870,11 +749,7 @@ The following are the customizing options in [`EdgeLabelsDrawingMode`](https://h {% highlight xaml %} - - - - - + {% endhighlight %} @@ -883,9 +758,7 @@ The following are the customizing options in [`EdgeLabelsDrawingMode`](https://h chart.PrimaryAxis = new DateTimeAxis() { - EdgeLabelsDrawingMode = EdgeLabelsDrawingMode.Center - }; {% endhighlight %} @@ -901,9 +774,7 @@ chart.PrimaryAxis = new DateTimeAxis() {% highlight xaml %} - - - + {% endhighlight %} @@ -912,9 +783,7 @@ chart.PrimaryAxis = new DateTimeAxis() chart.PrimaryAxis = new DateTimeAxis() { - EdgeLabelsDrawingMode = EdgeLabelsDrawingMode.Shift - }; {% endhighlight %} @@ -963,11 +832,7 @@ chart.PrimaryAxis = new DateTimeAxis() {% highlight xaml %} - - - - - + {% endhighlight %} @@ -976,9 +841,7 @@ chart.PrimaryAxis = new DateTimeAxis() chart.PrimaryAxis = new DateTimeAxis() { - EdgeLabelsDrawingMode = EdgeLabelsDrawingMode.Fit - }; {% endhighlight %} @@ -1006,13 +869,7 @@ The following code example and image demonstrates the AlwaysVisible option while {% highlight xaml %} - - - - - + {% endhighlight %} @@ -1021,9 +878,7 @@ EnableScrollBar="True"> chart.PrimaryAxis = new NumericalAxis() { - EdgeLabelsVisibilityMode = EdgeLabelsVisibilityMode.AlwaysVisible - }; {% endhighlight %} @@ -1042,11 +897,7 @@ Visible option is used to display the edge labels (first and last label) irrespe {% highlight xaml %} - - - - - + {% endhighlight %} @@ -1055,9 +906,7 @@ Visible option is used to display the edge labels (first and last label) irrespe chart.PrimaryAxis = new NumericalAxis() { - EdgeLabelsVisibilityMode = EdgeLabelsVisibilityMode.Visible - }; {% endhighlight %} @@ -1076,15 +925,11 @@ chart.PrimaryAxis = new NumericalAxis() {% highlight xaml %} - - - + - - - + {% endhighlight %} @@ -1092,13 +937,11 @@ chart.PrimaryAxis = new NumericalAxis() {% highlight c# %} chart.PrimaryAxis = new CategoryAxis() - { - ShowLabelBorder = true, + ShowLabelBorder = true, }; chart.SecondaryAxis = new NumericalAxis() - { ShowLabelBorder = true }; @@ -1116,15 +959,11 @@ The border color and width can be customized with [`LabelBorderBrush`](https://h {% highlight xaml %} - - - + - - - + {% endhighlight %} @@ -1132,25 +971,17 @@ The border color and width can be customized with [`LabelBorderBrush`](https://h {% highlight c# %} chart.PrimaryAxis = new CategoryAxis() - { - ShowLabelBorder = true, - + ShowLabelBorder = true, LabelBorderWidth = 3, - LabelBorderBrush = new SolidColorBrush(Colors.Red) - }; chart.SecondaryAxis = new NumericalAxis() - { - ShowLabelBorder = true, - - LabelBorderWidth = 3, - - LabelBorderBrush = new SolidColorBrush(Colors.Red), - + ShowLabelBorder = true, + LabelBorderWidth = 3, + LabelBorderBrush = new SolidColorBrush(Colors.Red), }; {% endhighlight %} @@ -1171,11 +1002,7 @@ The following code example illustrates the [`ShowGridLines`](https://help.syncfu {% highlight xaml %} - - - - - + {% endhighlight %} @@ -1184,9 +1011,7 @@ The following code example illustrates the [`ShowGridLines`](https://help.syncfu chart.PrimaryAxis = new NumericalAxis() { - ShowGridLines = false - }; {% endhighlight %} From cd9ede643f2949c9e099a395885a21c1eb758e71 Mon Sep 17 00:00:00 2001 From: SivaThennarasu Date: Thu, 16 Apr 2026 07:24:50 +0530 Subject: [PATCH 3/7] Changed the code snippet alignment and Mistakes. Check all link are working. --- wpf/Charts/Axis.md | 1995 ++++++-------------- wpf/Charts/SeriesTypes/Area.md | 47 +- wpf/Charts/SeriesTypes/BubbleandScatter.md | 55 +- wpf/Charts/SeriesTypes/ColumnandBar.md | 43 +- wpf/Charts/SeriesTypes/LineandStepLine.md | 47 +- wpf/Charts/SeriesTypes/PieandDoughnut.md | 296 ++- wpf/Charts/SeriesTypes/Spline.md | 60 +- 7 files changed, 744 insertions(+), 1799 deletions(-) diff --git a/wpf/Charts/Axis.md b/wpf/Charts/Axis.md index 13ee33f41..11feea25c 100644 --- a/wpf/Charts/Axis.md +++ b/wpf/Charts/Axis.md @@ -1029,28 +1029,18 @@ Style can also be applied to Major and Minor Gridlines using [`MajorGridLineStyl {% highlight xaml %} - - - - - - - - - + - {% endhighlight %} @@ -1059,9 +1049,7 @@ Style can also be applied to Major and Minor Gridlines using [`MajorGridLineStyl chart.PrimaryAxis = new NumericalAxis() { - - MajorGridLineStyle = chart.Resources["lineStyle"] as Style - + MajorGridLineStyle = chart.Resources["lineStyle"] as Style }; {% endhighlight %} @@ -1079,30 +1067,20 @@ Minor gridlines will be added automatically when the small tick lines is defined {% highlight xaml %} - - - - - - - - - - - - - + + + + + + + {% endhighlight %} @@ -1111,11 +1089,8 @@ Minor gridlines will be added automatically when the small tick lines is defined chart.PrimaryAxis = new NumericalAxis() { - SmallTicksPerInterval = 3, - MinorGridLineStyle = chart.Resources["lineStyle"] as Style - }; {% endhighlight %} @@ -1138,9 +1113,7 @@ Tick lines thickness can be customized using [`TickLineSize`](https://help.syncf {% highlight xaml %} - - - + {% endhighlight %} @@ -1149,9 +1122,7 @@ Tick lines thickness can be customized using [`TickLineSize`](https://help.syncf chart.PrimaryAxis = new NumericalAxis() { - - TickLineSize = 10 - + TickLineSize = 10 }; {% endhighlight %} @@ -1170,11 +1141,7 @@ Tick lines can be positioned inside or outside of the chart area using [`TickLin {% highlight xaml %} - - - - - + {% endhighlight %} @@ -1183,9 +1150,7 @@ Tick lines can be positioned inside or outside of the chart area using [`TickLin chart.PrimaryAxis = new NumericalAxis() { - - TickLinesPosition = AxisElementPosition.Inside - + TickLinesPosition = AxisElementPosition.Inside }; {% endhighlight %} @@ -1203,31 +1168,22 @@ Style can be applied to major tick lines using [`MajorTickLineStyle`](https://he {% highlight xaml %} - - + - - - - - - - - - - + + + + + {% endhighlight %} @@ -1235,11 +1191,8 @@ Style can be applied to major tick lines using [`MajorTickLineStyle`](https://he chart.PrimaryAxis = new NumericalAxis() { - TickLineSize = 10, - MajorTickLineStyle = chart.Resources["lineStyle"] as Style - }; {% endhighlight %} @@ -1260,11 +1213,7 @@ The following code example demonstrates the small ticks set for every interval. {% highlight xaml %} - - - - - + {% endhighlight %} @@ -1273,11 +1222,8 @@ The following code example demonstrates the small ticks set for every interval. chart.PrimaryAxis = new NumericalAxis() { - Interval = 1, - SmallTicksPerInterval = 4 - }; {% endhighlight %} @@ -1298,11 +1244,7 @@ The following code example demonstrates the positioning of minor tick lines insi {% highlight xaml %} - - - - - + {% endhighlight %} @@ -1311,11 +1253,8 @@ The following code example demonstrates the positioning of minor tick lines insi chart.PrimaryAxis = new NumericalAxis() { - SmallTicksPerInterval = 2, - SmallTickLinesPosition = AxisElementPosition.Inside - }; {% endhighlight %} @@ -1334,11 +1273,11 @@ The thickness of the minor tick lines can be customized using [`SmallTickLineSiz {% highlight xaml %} - - - - - + + {% endhighlight %} @@ -1347,13 +1286,9 @@ The thickness of the minor tick lines can be customized using [`SmallTickLineSiz chart.PrimaryAxis = new NumericalAxis() { - Interval = 1, - SmallTicksPerInterval = 3, - SmallTickLineSize = 10 - }; {% endhighlight %} @@ -1369,31 +1304,22 @@ Styling customization of minor tick lines can be defined using [`MinorTickLineSt {% highlight xaml %} + + + - - - - - - - - - - - - + + + {% endhighlight %} @@ -1402,17 +1328,11 @@ Styling customization of minor tick lines can be defined using [`MinorTickLineSt chart.PrimaryAxis = new NumericalAxis() { - Interval = 1, - SmallTicksPerInterval = 3, - TickLineSize = 10, - SmallTickLineSize = 5 - MinorTickLineStyle = chart.Resources["lineStyle"] as Style - }; {% endhighlight %} @@ -1441,73 +1361,61 @@ The [`RangeStyles`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts {% highlight xaml %} - - - - + - - - - - - - - - + + + + + + + + - - - - + + + + + - - - + + + + {% endhighlight %} {% highlight c# %} - NumericalAxis secondaryAxis = new NumericalAxis(); +NumericalAxis secondaryAxis = new NumericalAxis(); +secondaryAxis.MajorGridLineStyle = chart.Resources["lineStyle"] as Style; +secondaryAxis.MajorTickLineStyle = chart.Resources["lineStyle"] as Style; +secondaryAxis.LabelStyle.Foreground = new SolidColorBrush(Colors.Green); - secondaryAxis.MajorGridLineStyle = chart.Resources["lineStyle"] as Style ; +ChartAxisRangeStyleCollection axisRangeStyles = new ChartAxisRangeStyleCollection(); - secondaryAxis.MajorTickLineStyle = chart.Resources["lineStyle"] as Style; +ChartAxisRangeStyle rangeStyle = new ChartAxisRangeStyle() { Start = 18, End = 22 }; +rangeStyle.MajorGridLineStyle = chart.Resources["RangeLineStyle"] as Style; +rangeStyle.LabelStyle = new LabelStyle(); +rangeStyle.LabelStyle.Foreground = new SolidColorBrush(Colors.RoyalBlue); +rangeStyle.MajorTickLineStyle = chart.Resources["RangeLineStyle"] as Style; - secondaryAxis.LabelStyle.Foreground = new SolidColorBrush(Colors.Green); - - ChartAxisRangeStyleCollection axisRangeStyles = new ChartAxisRangeStyleCollection(); +axisRangeStyles.Add(rangeStyle); +secondaryAxis.RangeStyles = axisRangeStyles; - ChartAxisRangeStyle rangeStyle = new ChartAxisRangeStyle() { Start = 18, End = 22 }; - - rangeStyle.MajorGridLineStyle = chart.Resources["RangeLineStyle"] as Style ; - - rangeStyle.LabelStyle = new LabelStyle(); - - rangeStyle.LabelStyle.Foreground = new SolidColorBrush(Colors.RoyalBlue); - - rangeStyle.MajorTickLineStyle = chart.Resources["RangeLineStyle"] as Style; - - axisRangeStyles.Add(rangeStyle); - - secondaryAxis.RangeStyles = axisRangeStyles; - - chart.SecondaryAxis = secondaryAxis; +chart.SecondaryAxis = secondaryAxis; {% endhighlight %} @@ -1525,25 +1433,15 @@ SfChart provides support to customize the style of the axis line by defining the {% highlight xaml %} - - - - - - - - - - - + + + + + {% endhighlight %} @@ -1552,11 +1450,8 @@ SfChart provides support to customize the style of the axis line by defining the chart.PrimaryAxis = new NumericalAxis() { - Interval = 1, - - AxisLineStyle = chart.Resources["lineStyle"] as Style - + AxisLineStyle = chart.Resources["lineStyle"] as Style }; {% endhighlight %} @@ -1575,11 +1470,7 @@ The padding to the axis line is defined using [`AxisLineOffset`](https://help.sy {% highlight xaml %} - - - - - + {% endhighlight %} @@ -1588,9 +1479,7 @@ The padding to the axis line is defined using [`AxisLineOffset`](https://help.sy chart.PrimaryAxis = new NumericalAxis() { - - AxisLineOffset = 20 - + AxisLineOffset = 20 }; {% endhighlight %} @@ -1613,11 +1502,7 @@ SfChart allows you to customize the origin.By default the axis will be rendered {% highlight xaml %} - - - - - + {% endhighlight %} @@ -1626,11 +1511,8 @@ SfChart allows you to customize the origin.By default the axis will be rendered chart.SecondaryAxis = new NumericalAxis() { - Origin = 3, - - ShowAxisNextToOrigin = true - + ShowAxisNextToOrigin = true }; {% endhighlight %} @@ -1656,13 +1538,12 @@ The following code example demonstrates the positioning of the header outside ev {% highlight xaml %} - - - - - + + {% endhighlight %} @@ -1671,15 +1552,10 @@ Origin="3" ShowAxisNextToOrigin="True" Header="Value(In Tonnes)" > chart.SecondaryAxis = new NumericalAxis() { - Origin = 3, - ShowAxisNextToOrigin = true, - Header = "Value(In Tonnes)", - HeaderPosition = AxisHeaderPosition.Far - }; {% endhighlight %} @@ -1698,11 +1574,7 @@ The origin line can be added to chart area by setting the [`ShowOrigin`](https:/ {% highlight xaml %} - - - - - + {% endhighlight %} @@ -1711,11 +1583,8 @@ The origin line can be added to chart area by setting the [`ShowOrigin`](https:/ chart.SecondaryAxis = new NumericalAxis() { - Origin = 3, - - ShowOrigin = true - + ShowOrigin = true }; {% endhighlight %} @@ -1733,23 +1602,14 @@ The origin line of axis can be customized by using the [`OriginLineStyle`](https {% highlight xaml %} - - - - - - - - + + + - @@ -1758,23 +1618,16 @@ The origin line of axis can be customized by using the [`OriginLineStyle`](https {% highlight c# %} NumericalAxis numericalAxis = new NumericalAxis() - - { - - Origin = 3, - - ShowOrigin = true - - }; +{ + Origin = 3, + ShowOrigin = true +}; Style style = new Style(typeof(Line)); - style.Setters.Add(new Setter(Line.StrokeProperty, new SolidColorBrush(Colors.Red))); - style.Setters.Add(new Setter(Line.StrokeDashArrayProperty, new DoubleCollection() { 3 })); numericalAxis.OriginLineStyle = style; - chart.SecondaryAxis = numericalAxis; {% endhighlight %} @@ -1805,19 +1658,11 @@ You can choose any type of [`ChartAxis`](https://help.syncfusion.com/cr/wpf/Sync {% highlight xaml %} - - - - - + - - - - - + {% endhighlight %} @@ -1825,7 +1670,6 @@ You can choose any type of [`ChartAxis`](https://help.syncfusion.com/cr/wpf/Sync {% highlight c# %} chart.PrimaryAxis = new NumericalAxis(); - chart.SecondaryAxis = new NumericalAxis(); {% endhighlight %} @@ -1844,11 +1688,7 @@ chart.SecondaryAxis = new NumericalAxis(); {% highlight xaml %} - - - - - + {% endhighlight %} @@ -1857,13 +1697,9 @@ chart.SecondaryAxis = new NumericalAxis(); chart.SecondaryAxis = new NumericalAxis() { - Maximum = 2750, - Minimum = 250, - Interval = 250 - }; {% endhighlight %} @@ -1884,11 +1720,7 @@ N> If minimum or maximum value is set, the other value is calculated by default {% highlight xaml %} - - - - - + {% endhighlight %} @@ -1897,9 +1729,7 @@ N> If minimum or maximum value is set, the other value is calculated by default chart.SecondaryAxis = new NumericalAxis() { - StartRangeFromZero = true - }; {% endhighlight %} @@ -1920,11 +1750,7 @@ N> By default, Range is calculated between the minimum and maximum value of the {% highlight xaml %} - - - - - + {% endhighlight %} @@ -1949,11 +1775,7 @@ In [`CategoryAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts {% highlight xaml %} - - - - - + {% endhighlight %} @@ -1962,9 +1784,7 @@ In [`CategoryAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts chart.PrimaryAxis = new CategoryAxis() { - LabelPlacement = LabelPlacement.BetweenTicks - }; {% endhighlight %} @@ -1983,10 +1803,8 @@ By default, [`CategoryAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xa {% highlight xaml %} - - - - + + {% endhighlight %} @@ -1994,11 +1812,8 @@ By default, [`CategoryAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xa {% highlight c# %} chart.PrimaryAxis = new CategoryAxis() - { - IsIndexed = false, - }; {% endhighlight %} @@ -2034,21 +1849,16 @@ The default value of [`AggregateFunctions`](https://help.syncfusion.com/cr/wpf/S {% highlight xaml %} - - - - + + {% endhighlight %} {% highlight c# %} chart.PrimaryAxis = new CategoryAxis() - { - IsIndexed = false, - }; {% endhighlight %} @@ -2066,23 +1876,17 @@ The following code example illustrates the axis with [`AggregateFunctions`](http {% highlight xaml %} - - - - + + {% endhighlight %} {% highlight c# %} chart.PrimaryAxis = new CategoryAxis() - { - IsIndexed = false, - AggregateFunctions = AggregateFunctions.Average - }; {% endhighlight %} @@ -2100,23 +1904,17 @@ The following code example illustrates the axis with [`AggregateFunctions`](http {% highlight xaml %} - - - - + + {% endhighlight %} {% highlight c# %} chart.PrimaryAxis = new CategoryAxis() - { - IsIndexed = false, - AggregateFunctions = AggregateFunctions.Count - }; {% endhighlight %} @@ -2134,23 +1932,17 @@ The following code example illustrates the axis with [`AggregateFunctions`](http {% highlight xaml %} - - - - + + {% endhighlight %} {% highlight c# %} chart.PrimaryAxis = new CategoryAxis() - { - IsIndexed = false, - AggregateFunctions = AggregateFunctions.Max - }; {% endhighlight %} @@ -2168,23 +1960,17 @@ The following code example illustrates the axis with [`AggregateFunctions`](http {% highlight xaml %} - - - - + + {% endhighlight %} {% highlight c# %} chart.PrimaryAxis = new CategoryAxis() - { - IsIndexed = false, - AggregateFunctions = AggregateFunctions.Min - }; {% endhighlight %} @@ -2202,23 +1988,17 @@ The following code example illustrates the axis with [`AggregateFunctions`](http {% highlight xaml %} - - - - + + {% endhighlight %} {% highlight c# %} chart.PrimaryAxis = new CategoryAxis() - { - IsIndexed = false, - AggregateFunctions = AggregateFunctions.Sum - }; {% endhighlight %} @@ -2236,9 +2016,7 @@ chart.PrimaryAxis = new CategoryAxis() {% highlight xaml %} - - - + {% endhighlight %} @@ -2247,9 +2025,7 @@ chart.PrimaryAxis = new CategoryAxis() chart.PrimaryAxis = new DateTimeAxis() { - LabelFormat = "MMM-dd" - }; {% endhighlight %} @@ -2268,13 +2044,13 @@ chart.PrimaryAxis = new DateTimeAxis() {% highlight xaml %} - - - - - + + {% endhighlight %} @@ -2283,17 +2059,11 @@ IntervalType="Months" Interval="1"> chart.PrimaryAxis = new DateTimeAxis() { - - Minimum = new DateTime(2015,01,10), - - Maximum = new DateTime(2015,07,01), - + Minimum = new DateTime(2015, 01, 10), + Maximum = new DateTime(2015, 07, 01), LabelFormat = "MMM-dd", - IntervalType = DateTimeIntervalType.Months, - Interval = 1 - }; {% endhighlight %} @@ -2320,13 +2090,12 @@ The following code snippet demonstrates the business hours support in DateTimeAx {% highlight xaml %} - - - - - + + {% endhighlight %} @@ -2335,16 +2104,11 @@ CloseTime="24" WorkingDays="Friday,Saturday,Sunday,Monday,Tuesday,Wednesday,Sund chart.PrimaryAxis = new DateTimeAxis() { - EnableBusinessHours = true, - OpenTime = 9, - CloseTime = 24, - WorkingDays = Day.Friday | Day.Saturday | Day.Sunday | - Day.Monday | Day.Tuesday| Day.Wednesday| Day.Sunday - + Day.Monday | Day.Tuesday | Day.Wednesday | Day.Sunday }; {% endhighlight %} @@ -2363,11 +2127,7 @@ chart.PrimaryAxis = new DateTimeAxis() {% highlight xaml %} - - - - - + {% endhighlight %} @@ -2376,9 +2136,7 @@ chart.PrimaryAxis = new DateTimeAxis() chart.PrimaryAxis = new DateTimeCategoryAxis() { - LabelFormat = "MMM-dd" - }; {% endhighlight %} @@ -2397,11 +2155,7 @@ chart.PrimaryAxis = new DateTimeCategoryAxis() {% highlight xaml %} - - - - - + {% endhighlight %} @@ -2426,11 +2180,7 @@ The following code snippet demonstrates the [`Minimum`](https://help.syncfusion. {% highlight xaml %} - - - - - + {% endhighlight %} @@ -2439,11 +2189,8 @@ The following code snippet demonstrates the [`Minimum`](https://help.syncfusion. chart.PrimaryAxis = new TimeSpanAxis() { - Minimum = new TimeSpan(00, 00, 00), - Maximum = new TimeSpan(00, 10, 00) - }; {% endhighlight %} @@ -2462,9 +2209,7 @@ chart.PrimaryAxis = new TimeSpanAxis() {% highlight xaml %} - - - + {% endhighlight %} @@ -2489,11 +2234,7 @@ You can also change the base for logarithmic values. By default the logarithmic {% highlight xaml %} - - - - - + {% endhighlight %} @@ -2502,9 +2243,7 @@ You can also change the base for logarithmic values. By default the logarithmic chart.SecondaryAxis = new LogarithmicAxis() { - LogarithmicBase = 2 - }; {% endhighlight %} @@ -2523,11 +2262,7 @@ The following code snippet demonstrates the range customization of [`Logarithmic {% highlight xaml %} - - - - - + {% endhighlight %} @@ -2536,11 +2271,8 @@ The following code snippet demonstrates the range customization of [`Logarithmic chart.SecondaryAxis = new LogarithmicAxis() { - Minimum = 100, - Maximum = 7000 - }; {% endhighlight %} @@ -2562,23 +2294,16 @@ By default, [`striplines`](https://help.syncfusion.com/wpf/charts/striplines) ar {% highlight xaml %} - - - + - - - + + - - - + {% endhighlight %} @@ -2586,21 +2311,14 @@ By default, [`striplines`](https://help.syncfusion.com/wpf/charts/striplines) ar {% highlight c# %} NumericalAxis axis = new NumericalAxis(); - axis.IncludeStripLineRange = true; ChartStripLine stripline = new ChartStripLine() - { - Start = 1000, - Width = 1500, - Background = new SolidColorBrush(Colors.LightGray), - Opacity = 0.6 - }; axis.StripLines.Add(stripline); @@ -2621,15 +2339,11 @@ The property is applicable only for linear axes, and it can be set as shown in t {% highlight xaml %} - - - + - - - - + + {% endhighlight %} @@ -2637,23 +2351,15 @@ The property is applicable only for linear axes, and it can be set as shown in t {% highlight c# %} chart.SecondaryAxis = new NumericalAxis() - - { - - IncludeAnnotationRange = true - - }; +{ + IncludeAnnotationRange = true +}; LineAnnotation annotation = new LineAnnotation(); - annotation.X1 = 0; - annotation.X2 = 4; - annotation.Y1 = 0; - annotation.Y2 = 3000; - chart.Annotations.Add(annotation); {% endhighlight %} @@ -2671,9 +2377,7 @@ Axis can be inverted using the [`IsInversed`](https://help.syncfusion.com/cr/wpf {% highlight xaml %} - - - + {% endhighlight %} @@ -2702,11 +2406,7 @@ The following code snippet demonstrates the [`Interval`](https://help.syncfusion {% highlight xaml %} - - - - - + {% endhighlight %} @@ -2715,9 +2415,7 @@ The following code snippet demonstrates the [`Interval`](https://help.syncfusion chart.SecondaryAxis = new NumericalAxis() { - Interval = 250 - }; {% endhighlight %} @@ -2736,11 +2434,7 @@ The following code snippet demonstrates the [`Interval`](https://help.syncfusion {% highlight xaml %} - - - - - + {% endhighlight %} @@ -2749,9 +2443,7 @@ The following code snippet demonstrates the [`Interval`](https://help.syncfusion chart.PrimaryAxis = new CategoryAxis() { - Interval = 2 - }; {% endhighlight %} @@ -2784,9 +2476,7 @@ The following code snippet demonstrates the DateTimeAxis having one month interv {% highlight xaml %} - - - + {% endhighlight %} @@ -2795,13 +2485,9 @@ The following code snippet demonstrates the DateTimeAxis having one month interv chart.PrimaryAxis = new DateTimeAxis() { - Interval = 1, - IntervalType = DateTimeIntervalType.Months, - LabelFormat = "MMM-dd" - }; {% endhighlight %} @@ -2820,11 +2506,7 @@ chart.PrimaryAxis = new DateTimeAxis() {% highlight xaml %} - - - - - + {% endhighlight %} @@ -2833,9 +2515,7 @@ chart.PrimaryAxis = new DateTimeAxis() chart.SecondaryAxis = new NumericalAxis() { - DesiredIntervalsCount = 7 - }; {% endhighlight %} @@ -2854,23 +2534,16 @@ chart.SecondaryAxis = new NumericalAxis() {% highlight xaml %} - - - - - + - - - - - - - - - - + + + + {% endhighlight %} @@ -2879,24 +2552,17 @@ chart.SecondaryAxis = new NumericalAxis() chart.SecondaryAxis = new NumericalAxis() { - MaximumLabels = 2 - }; NumericalAxis axis = new NumericalAxis() { MaximumLabels = 2 }; ColumnSeries series = new ColumnSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2010", - YAxis = axis - }; chart.Series.Add(series); @@ -2941,11 +2607,7 @@ When [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Char {% highlight xaml %} - - - - - + {% endhighlight %} @@ -2954,9 +2616,7 @@ When [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Char chart.PrimaryAxis = new DateTimeAxis() { - RangePadding = DateTimeRangePadding.Additional - }; {% endhighlight %} @@ -2975,11 +2635,7 @@ When [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Char {% highlight xaml %} - - - - - + {% endhighlight %} @@ -2988,9 +2644,7 @@ When [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Char chart.PrimaryAxis = new DateTimeAxis() { - RangePadding = DateTimeRangePadding.Round - }; {% endhighlight %} @@ -3011,11 +2665,7 @@ The following screenshot demonstrates a chart’s x-axis with `RangePadding` set {% highlight xaml %} - - - - - + {% endhighlight %} @@ -3024,9 +2674,7 @@ The following screenshot demonstrates a chart’s x-axis with `RangePadding` set chart.PrimaryAxis = new DateTimeAxis() { - RangePadding = DateTimeRangePadding.None - }; {% endhighlight %} @@ -3044,11 +2692,7 @@ When [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Char {% highlight xaml %} - - - - - + {% endhighlight %} @@ -3057,9 +2701,7 @@ When [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Char chart.PrimaryAxis = new DateTimeAxis() { - RangePadding = DateTimeRangePadding.RoundStart - }; {% endhighlight %} @@ -3078,11 +2720,7 @@ When [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Char {% highlight xaml %} - - - - - + {% endhighlight %} @@ -3091,9 +2729,7 @@ When [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Char chart.PrimaryAxis = new DateTimeAxis() { - RangePadding = DateTimeRangePadding.RoundEnd - }; {% endhighlight %} @@ -3112,11 +2748,7 @@ When [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Char {% highlight xaml %} - - - - - + {% endhighlight %} @@ -3125,9 +2757,7 @@ When [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Char chart.PrimaryAxis = new DateTimeAxis() { - RangePadding = DateTimeRangePadding.PrependInterval - }; {% endhighlight %} @@ -3146,11 +2776,7 @@ When [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Char {% highlight xaml %} - - - - - + {% endhighlight %} @@ -3159,9 +2785,7 @@ When [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Char chart.PrimaryAxis = new DateTimeAxis() { - RangePadding = DateTimeRangePadding.AppendInterval - }; {% endhighlight %} @@ -3205,11 +2829,7 @@ The following screenshot illustrates a chart’s y-axis with [`RangePadding`](ht {% highlight xaml %} - - - - - + {% endhighlight %} @@ -3218,9 +2838,7 @@ The following screenshot illustrates a chart’s y-axis with [`RangePadding`](ht chart.PrimaryAxis = new NumericalAxis() { - RangePadding = NumericalPadding.Additional - }; {% endhighlight %} @@ -3241,11 +2859,7 @@ The following screenshot demonstrates a chart’s x-axis with [`RangePadding`](h {% highlight xaml %} - - - - - + {% endhighlight %} @@ -3254,9 +2868,7 @@ The following screenshot demonstrates a chart’s x-axis with [`RangePadding`](h chart.PrimaryAxis = new NumericalAxis() { - RangePadding = NumericalPadding.Additional - }; {% endhighlight %} @@ -3275,11 +2887,7 @@ The following screenshot demonstrates [`RangePadding`](https://help.syncfusion.c {% highlight xaml %} - - - - - + {% endhighlight %} @@ -3288,9 +2896,7 @@ The following screenshot demonstrates [`RangePadding`](https://help.syncfusion.c chart.PrimaryAxis = new NumericalAxis() { - RangePadding = NumericalPadding.None - }; {% endhighlight %} @@ -3309,13 +2915,9 @@ The following screenshot demonstrates a chart’s x-axis with [`RangePadding`](h {% highlight xaml %} - - - - - - - + + + {% endhighlight %} @@ -3323,9 +2925,7 @@ The following screenshot demonstrates a chart’s x-axis with [`RangePadding`](h chart.PrimaryAxis = new NumericalAxis() { - RangePadding = NumericalPadding.RoundStart - }; {% endhighlight %} @@ -3346,11 +2946,7 @@ The following screenshot demonstrates a chart’s x-axis with [`RangePadding`](h {% highlight xaml %} - - - - - + {% endhighlight %} @@ -3359,9 +2955,7 @@ The following screenshot demonstrates a chart’s x-axis with [`RangePadding`](h chart.PrimaryAxis = new NumericalAxis() { - RangePadding = NumericalPadding.RoundEnd - }; {% endhighlight %} @@ -3382,11 +2976,7 @@ The following screenshot demonstrates a chart’s x-axis with [`RangePadding`](h {% highlight xaml %} - - - - - + {% endhighlight %} @@ -3395,9 +2985,7 @@ The following screenshot demonstrates a chart’s x-axis with [`RangePadding`](h chart.PrimaryAxis = new NumericalAxis() { - RangePadding = NumericalPadding.PrependInterval - }; {% endhighlight %} @@ -3418,11 +3006,7 @@ The following screenshot demonstrates a chart’s x-axis with [`RangePadding`](h {% highlight xaml %} - - - - - + {% endhighlight %} @@ -3431,9 +3015,7 @@ The following screenshot demonstrates a chart’s x-axis with [`RangePadding`](h chart.PrimaryAxis = new NumericalAxis() { - RangePadding = NumericalPadding.AppendInterval - }; {% endhighlight %} @@ -3452,19 +3034,11 @@ chart.PrimaryAxis = new NumericalAxis() {% highlight xaml %} - - - - - + - - - - - + {% endhighlight %} @@ -3473,16 +3047,12 @@ chart.PrimaryAxis = new NumericalAxis() chart.PrimaryAxis = new NumericalAxis() { - PlotOffset = 30 - }; chart.SecondaryAxis = new NumericalAxis() { - PlotOffset = 30 - }; {% endhighlight %} @@ -3500,19 +3070,11 @@ chart.SecondaryAxis = new NumericalAxis() {% highlight xaml %} - - - - - + - - - - - + {% endhighlight %} @@ -3521,16 +3083,12 @@ chart.SecondaryAxis = new NumericalAxis() chart.PrimaryAxis = new NumericalAxis() { - PlotOffsetStart = 30 - }; chart.SecondaryAxis = new NumericalAxis() { - PlotOffsetStart = 30 - }; {% endhighlight %} @@ -3548,19 +3106,11 @@ chart.SecondaryAxis = new NumericalAxis() {% highlight xaml %} - - - - - + - - - - - + {% endhighlight %} @@ -3569,16 +3119,12 @@ chart.SecondaryAxis = new NumericalAxis() chart.PrimaryAxis = new NumericalAxis() { - PlotOffsetEnd = 30 - }; chart.SecondaryAxis = new NumericalAxis() { - PlotOffsetEnd = 30 - }; {% endhighlight %} @@ -3602,9 +3148,7 @@ In [`DateTimeAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts {% highlight xaml %} - - - + {% endhighlight %} @@ -3614,7 +3158,6 @@ In [`DateTimeAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts chart.PrimaryAxis = new DateTimeAxis() { AutoScrollingDelta = 3, - AutoScrollingDeltaType = DateTimeIntervalType.Days }; @@ -3631,9 +3174,7 @@ The [`AutoScrollingMode`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml. {% highlight xaml %} - - - + {% endhighlight %} @@ -3643,7 +3184,6 @@ The [`AutoScrollingMode`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml. chart.PrimaryAxis = new DateTimeAxis() { AutoScrollingDelta = 3, - AutoScrollingMode = ChartAutoScrollingMode.Start }; @@ -3665,13 +3205,7 @@ If you set [`EnableAutoIntervalOnZooming`](https://help.syncfusion.com/cr/wpf/Sy {% highlight xaml %} - - - - - + {% endhighlight %} @@ -3680,13 +3214,9 @@ EnableAutoIntervalOnZooming="False"> chart.PrimaryAxis = new NumericalAxis() { - EnableScrollBar = true, - EnableAutoIntervalOnZooming = false, - Interval = 1 - }; {% endhighlight %} @@ -3705,28 +3235,23 @@ By default, all the series are plotted based on primary and secondary axis. You {% highlight xaml %} - - + - - - - - - - - - - - - - - + + + + + + + + {% endhighlight %} @@ -3735,42 +3260,29 @@ XBindingPath="Date" YBindingPath="Year2011"> ColumnSeries series1 = new ColumnSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - - YBindingPath = "Year2011" - + YBindingPath = "Year2011" }; LineSeries series2 = new LineSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Date", - YBindingPath = "Year2011", - }; series2.XAxis = new DateTimeAxis() { - Header = "Additional X Axis" - }; series2.YAxis = new NumericalAxis() { - Header = "Additional Y Axis" - }; chart.Series.Add(series1); - chart.Series.Add(series2); @@ -3791,40 +3303,27 @@ In the above screenshot, the LineSeries is plotted based on additional X & Y axe {% highlight xaml %} + + + + + + - - - +{% endhighlight %} - +{% highlight c# %} - - - - - - -{% endhighlight %} - -{% highlight c# %} - -chart.PrimaryAxis = new CategoryAxis() - +chart.PrimaryAxis = new CategoryAxis() { - ShowLabelBorder = true, - + ShowLabelBorder = true, }; -ChartMultiLevelLabel label = new ChartMultiLevelLabel() - +ChartMultiLevelLabel label = new ChartMultiLevelLabel() { - - Start = -0.5, - - End = 2.5, - - Text = "Quarter 1" - + Start = -0.5, + End = 2.5, + Text = "Quarter 1" }; chart.PrimaryAxis.MultiLevelLabels.Add(label); @@ -3896,17 +3395,11 @@ chart.PrimaryAxis.MultiLevelLabels.Add(label); {% highlight xaml %} - - - - - - - - - - - + + + + + {% endhighlight %} @@ -3914,28 +3407,18 @@ chart.PrimaryAxis.MultiLevelLabels.Add(label); {% highlight c# %} chart.PrimaryAxis = new CategoryAxis() - { LabelBorderWidth = 3, - ShowLabelBorder = true, - LabelBorderBrush = new SolidColorBrush(Colors.Red), - }; -ChartMultiLevelLabel label = new ChartMultiLevelLabel() - +ChartMultiLevelLabel label = new ChartMultiLevelLabel() { - - Start = -0.5, - - End = 2.5, - - Text = "Quarter 1", - - BorderWidth = 4 - + Start = -0.5, + End = 2.5, + Text = "Quarter 1", + BorderWidth = 4 }; chart.PrimaryAxis.MultiLevelLabels.Add(label); @@ -3958,148 +3441,99 @@ chart.PrimaryAxis.MultiLevelLabels.Add(label); {% highlight xaml %} - - - - - - - - - - - - - - - - - + + + + + + + + - - - - - - - - - - - - - - - + + + + + + + {% endhighlight %} {% highlight c# %} -chart.PrimaryAxis = new CategoryAxis() - +chart.PrimaryAxis = new CategoryAxis() { - ShowLabelBorder = true, + ShowLabelBorder = true, }; -ChartMultiLevelLabel label1 = new ChartMultiLevelLabel() - +ChartMultiLevelLabel label1 = new ChartMultiLevelLabel() { - - Start = -0.5, - - End = 2.5, - - Text = "Quarter 1", - + Start = -0.5, + End = 2.5, + Text = "Quarter 1", }; chart.PrimaryAxis.MultiLevelLabels.Add(label1); ChartMultiLevelLabel label2 = new ChartMultiLevelLabel() - { - - Start = 2.5, - + Start = 2.5, End = 5.5, - Text = "Quarter 2" - }; chart.PrimaryAxis.MultiLevelLabels.Add(label2); ChartMultiLevelLabel label3 = new ChartMultiLevelLabel() - { - - Start = 5.5, - + Start = 5.5, End = 8.5, - Text = "Quarter 3" - }; chart.PrimaryAxis.MultiLevelLabels.Add(label3); ChartMultiLevelLabel label4 = new ChartMultiLevelLabel() - { - Start = 8.5, - - End = 11.5, - - Text = "Quarter 4" - + Start = 8.5, + End = 11.5, + Text = "Quarter 4" }; chart.PrimaryAxis.MultiLevelLabels.Add(label4); chart.SecondaryAxis = new NumericalAxis() - { - ShowLabelBorder = true, + ShowLabelBorder = true, }; -ChartMultiLevelLabel label5 = new ChartMultiLevelLabel() - +ChartMultiLevelLabel label5 = new ChartMultiLevelLabel() { - - Start = 32, - - End = 36, - - Text = "Low" - + Start = 32, + End = 36, + Text = "Low" }; chart.SecondaryAxis.MultiLevelLabels.Add(label5); ChartMultiLevelLabel label6 = new ChartMultiLevelLabel() - { Start = 36, - End = 42, - Text = "Medium" }; chart.SecondaryAxis.MultiLevelLabels.Add(label6); ChartMultiLevelLabel label7 = new ChartMultiLevelLabel() - { - Start = 42, - - End = 48, - - Text = "High" + Start = 42, + End = 48, + Text = "High" }; chart.SecondaryAxis.MultiLevelLabels.Add(label7); @@ -4118,156 +3552,104 @@ chart.SecondaryAxis.MultiLevelLabels.Add(label7); {% highlight xaml %} - - - - - - - - - - - - - - - - - + + + + + + + + - - - - - - - - - - - - - - - + + + + + + + - {% endhighlight %} {% highlight c# %} -chart.PrimaryAxis = new CategoryAxis() - +chart.PrimaryAxis = new CategoryAxis() { - ShowLabelBorder = true, - - MultiLevelLabelsBorderType = BorderType.Brace - + ShowLabelBorder = true, + MultiLevelLabelsBorderType = BorderType.Brace }; ChartMultiLevelLabel label1 = new ChartMultiLevelLabel() - { - - Start = -0.5, - - End = 2.5, - - Text = "Quarter 1", + Start = -0.5, + End = 2.5, + Text = "Quarter 1", }; chart.PrimaryAxis.MultiLevelLabels.Add(label1); ChartMultiLevelLabel label2 = new ChartMultiLevelLabel() - { - Start = 2.5, - End = 5.5, - Text = "Quarter 2", }; chart.PrimaryAxis.MultiLevelLabels.Add(label2); ChartMultiLevelLabel label3 = new ChartMultiLevelLabel() - { - Start = 5.5, - End = 8.5, - Text = "Quarter 3", - }; chart.PrimaryAxis.MultiLevelLabels.Add(label3); ChartMultiLevelLabel label4 = new ChartMultiLevelLabel() - { - Start = 8.5, - - End = 11.5, - - Text = "Quarter 4", - + Start = 8.5, + End = 11.5, + Text = "Quarter 4", }; chart.PrimaryAxis.MultiLevelLabels.Add(label4); chart.SecondaryAxis = new NumericalAxis() - { - ShowLabelBorder = true, - - MultiLevelLabelsBorderType = BorderType.Brace + ShowLabelBorder = true, + MultiLevelLabelsBorderType = BorderType.Brace }; ChartMultiLevelLabel label5 = new ChartMultiLevelLabel() - { - - Start = 32, - - End = 36, - - Text = "Low", - + Start = 32, + End = 36, + Text = "Low", }; - + chart.SecondaryAxis.MultiLevelLabels.Add(label5); - -ChartMultiLevelLabel label6 = new ChartMultiLevelLabel() +ChartMultiLevelLabel label6 = new ChartMultiLevelLabel() { Start = 36, - End = 42, - Text = "Medium", }; chart.SecondaryAxis.MultiLevelLabels.Add(label6); ChartMultiLevelLabel label7 = new ChartMultiLevelLabel() - { - Start = 42, - - End = 48, - - Text = "High", + Start = 42, + End = 48, + Text = "High", }; chart.SecondaryAxis.MultiLevelLabels.Add(label7); - {% endhighlight %} {% endtabs %} @@ -4280,161 +3662,106 @@ chart.SecondaryAxis.MultiLevelLabels.Add(label7); {% highlight xaml %} - - - - - - - - - - - - - - - - - - + + + + + + + + + - - - - - - - - - - - - - - - + + + + + + + - {% endhighlight %} {% highlight c# %} -chart.PrimaryAxis = new CategoryAxis() - +chart.PrimaryAxis = new CategoryAxis() { - ShowLabelBorder = true, - + ShowLabelBorder = true, MultiLevelLabelsBorderType = BorderType.None - }; ChartMultiLevelLabel label1 = new ChartMultiLevelLabel() - { - - Start = -0.5, - - End = 2.5, - - Text = "Quarter 1" - + Start = -0.5, + End = 2.5, + Text = "Quarter 1" }; chart.PrimaryAxis.MultiLevelLabels.Add(label1); ChartMultiLevelLabel label2 = new ChartMultiLevelLabel() - { - Start = 2.5, - End = 5.5, - Text = "Quarter 2" - }; chart.PrimaryAxis.MultiLevelLabels.Add(label2); ChartMultiLevelLabel label3 = new ChartMultiLevelLabel() - { - Start = 5.5, - End = 8.5, - Text = "Quarter 3" }; chart.PrimaryAxis.MultiLevelLabels.Add(label3); ChartMultiLevelLabel label4 = new ChartMultiLevelLabel() - { - Start = 8.5, - - End = 11.5, - - Text = "Quarter 4" - + Start = 8.5, + End = 11.5, + Text = "Quarter 4" }; chart.PrimaryAxis.MultiLevelLabels.Add(label4); chart.SecondaryAxis = new NumericalAxis() - { - - ShowLabelBorder = true, - + ShowLabelBorder = true, MultiLevelLabelsBorderType = BorderType.None - }; ChartMultiLevelLabel label5 = new ChartMultiLevelLabel() - { - - Start = 32, - - End = 36, - - Text = "Low" - + Start = 32, + End = 36, + Text = "Low" }; - + chart.SecondaryAxis.MultiLevelLabels.Add(label5); - -ChartMultiLevelLabel label6 = new ChartMultiLevelLabel() +ChartMultiLevelLabel label6 = new ChartMultiLevelLabel() { Start = 36, - End = 42, - Text = "Medium" }; chart.SecondaryAxis.MultiLevelLabels.Add(label6); ChartMultiLevelLabel label7 = new ChartMultiLevelLabel() - { - Start = 42, - - End = 48, - - Text = "High" + Start = 42, + End = 48, + Text = "High" }; chart.SecondaryAxis.MultiLevelLabels.Add(label7); - {% endhighlight %} {% endtabs %} @@ -4448,154 +3775,101 @@ chart.SecondaryAxis.MultiLevelLabels.Add(label7); {% highlight xaml %} - - - - - - - - - - - - - - - - - + + + + + + + + - - - - - - - - - - - - - - - + + + + + + + {% endhighlight %} {% highlight c# %} -chart.PrimaryAxis = new CategoryAxis() - +chart.PrimaryAxis = new CategoryAxis() { - ShowLabelBorder = true, - - MultiLevelLabelsBorderType = BorderType.WithoutTopAndBottomBorder - + ShowLabelBorder = true, + MultiLevelLabelsBorderType = BorderType.WithoutTopAndBottomBorder }; ChartMultiLevelLabel label1 = new ChartMultiLevelLabel() - { - - Start = -0.5, - - End = 2.5, - - Text = "Quarter 1", - + Start = -0.5, + End = 2.5, + Text = "Quarter 1", }; chart.PrimaryAxis.MultiLevelLabels.Add(label1); ChartMultiLevelLabel label2 = new ChartMultiLevelLabel() - { - Start = 2.5, - End = 5.5, - Text = "Quarter 2", - }; chart.PrimaryAxis.MultiLevelLabels.Add(label2); ChartMultiLevelLabel label3 = new ChartMultiLevelLabel() - { - Start = 5.5, - End = 8.5, - Text = "Quarter 3", - }; chart.PrimaryAxis.MultiLevelLabels.Add(label3); ChartMultiLevelLabel label4 = new ChartMultiLevelLabel() - { - Start = 8.5, - - End = 11.5, - - Text = "Quarter 4", + Start = 8.5, + End = 11.5, + Text = "Quarter 4", }; chart.PrimaryAxis.MultiLevelLabels.Add(label4); chart.SecondaryAxis = new NumericalAxis() - { - ShowLabelBorder = true, - - MultiLevelLabelsBorderType = BorderType.WithoutTopAndBottomBorder - + MultiLevelLabelsBorderType = BorderType.WithoutTopAndBottomBorder }; ChartMultiLevelLabel label5 = new ChartMultiLevelLabel() - { - - Start = 32, - - End = 36, - - Text = "Low", - + Start = 32, + End = 36, + Text = "Low", }; - + chart.SecondaryAxis.MultiLevelLabels.Add(label5); - -ChartMultiLevelLabel label6 = new ChartMultiLevelLabel() +ChartMultiLevelLabel label6 = new ChartMultiLevelLabel() { Start = 36, - End = 42, - Text = "Medium", }; chart.SecondaryAxis.MultiLevelLabels.Add(label6); ChartMultiLevelLabel label7 = new ChartMultiLevelLabel() - { - Start = 42, - - End = 48, - - Text = "High", + Start = 42, + End = 48, + Text = "High", }; chart.SecondaryAxis.MultiLevelLabels.Add(label7); @@ -4616,17 +3890,17 @@ chart.SecondaryAxis.MultiLevelLabels.Add(label7); {% highlight xaml %} - - - - - - - - - - - + + + + + + {% endhighlight %} @@ -4634,27 +3908,18 @@ chart.SecondaryAxis.MultiLevelLabels.Add(label7); {% highlight c# %} chart.PrimaryAxis = new CategoryAxis() - { ShowLabelBorder = true, }; ChartMultiLevelLabel label = new ChartMultiLevelLabel() - { - - Start = -0.5, - + Start = -0.5, End = 11.5, - - Text = "Year - 2016", - + Text = "Year - 2016", Foreground = new SolidColorBrush(Colors.Blue), - FontSize = 14, - FontFamily = new FontFamily("Algerian") - }; chart.PrimaryAxis.MultiLevelLabels.Add(label); @@ -4677,148 +3942,101 @@ The text of [`ChartMultiLevelLabel`](https://help.syncfusion.com/cr/wpf/Syncfusi {% highlight xaml %} - - - - - - - - - - - - - - - - - + + + + + + + + - - - - - - - - - - - - - - - + + + + + + + {% endhighlight %} {% highlight c# %} -chart.PrimaryAxis = new CategoryAxis() - +chart.PrimaryAxis = new CategoryAxis() { - ShowLabelBorder = true, + ShowLabelBorder = true, }; ChartMultiLevelLabel label1 = new ChartMultiLevelLabel() - { - - Start = -0.5, - - End = 2.5, - - Text = "Quarter 1", - + Start = -0.5, + End = 2.5, + Text = "Quarter 1", }; chart.PrimaryAxis.MultiLevelLabels.Add(label1); ChartMultiLevelLabel label2 = new ChartMultiLevelLabel() - -{ - +{ Start = 2.5, - End = 5.5, - Text = "Quarter 2" - }; chart.PrimaryAxis.MultiLevelLabels.Add(label2); ChartMultiLevelLabel label3 = new ChartMultiLevelLabel() - { - + Start = 5.5, - End = 8.5, - Text = "Quarter 3" - }; chart.PrimaryAxis.MultiLevelLabels.Add(label3); ChartMultiLevelLabel label4 = new ChartMultiLevelLabel() - { - Start = 8.5, - - End = 11.5, - - Text = "Quarter 4" - + Start = 8.5, + End = 11.5, + Text = "Quarter 4" }; chart.PrimaryAxis.MultiLevelLabels.Add(label4); chart.SecondaryAxis = new NumericalAxis() - { - ShowLabelBorder = true, + ShowLabelBorder = true, }; -ChartMultiLevelLabel label5 = new ChartMultiLevelLabel() - +ChartMultiLevelLabel label5 = new ChartMultiLevelLabel() { - - Start = 32, - - End = 36, - - Text = "Low" - + + Start = 32, + End = 36, + Text = "Low" }; - + chart.SecondaryAxis.MultiLevelLabels.Add(label5); - -ChartMultiLevelLabel label6 = new ChartMultiLevelLabel() +ChartMultiLevelLabel label6 = new ChartMultiLevelLabel() { Start = 36, - End = 42, - Text = "Medium" }; chart.SecondaryAxis.MultiLevelLabels.Add(label6); ChartMultiLevelLabel label7 = new ChartMultiLevelLabel() - { - Start = 42, - - End = 48, - - Text = "High" + Start = 42, + End = 48, + Text = "High" }; chart.SecondaryAxis.MultiLevelLabels.Add(label7); @@ -4837,145 +4055,96 @@ chart.SecondaryAxis.MultiLevelLabels.Add(label7); {% highlight xaml %} - - - - - - - - - - - - - - - - - + + + + + + + + - - - - - - - - - - - - - - - + + + + + + + {% endhighlight %} {% highlight c# %} -chart.PrimaryAxis = new CategoryAxis() - +chart.PrimaryAxis = new CategoryAxis() { - ShowLabelBorder = true, + ShowLabelBorder = true, }; ChartMultiLevelLabel label1 = new ChartMultiLevelLabel() - { - - Start = -0.5, - - End = 2.5, - - Text = "Quarter 1", - - LabelAlignment = LabelAlignment.Near - + Start = -0.5, + End = 2.5, + Text = "Quarter 1", + LabelAlignment = LabelAlignment.Near }; chart.PrimaryAxis.MultiLevelLabels.Add(label1); ChartMultiLevelLabel label2 = new ChartMultiLevelLabel() - { - Start = 2.5, - End = 5.5, - Text = "Quarter 2", - LabelAlignment = LabelAlignment.Near - }; chart.PrimaryAxis.MultiLevelLabels.Add(label2); ChartMultiLevelLabel label3 = new ChartMultiLevelLabel() - { - Start = 5.5, - End = 8.5, - Text = "Quarter 3", - LabelAlignment = LabelAlignment.Near - }; chart.PrimaryAxis.MultiLevelLabels.Add(label3); ChartMultiLevelLabel label4 = new ChartMultiLevelLabel() - { - Start = 8.5, - - End = 11.5, - - Text = "Quarter 4", - - LabelAlignment = LabelAlignment.Near - + Start = 8.5, + End = 11.5, + Text = "Quarter 4", + LabelAlignment = LabelAlignment.Near }; chart.PrimaryAxis.MultiLevelLabels.Add(label4); chart.SecondaryAxis = new NumericalAxis() - -{ - ShowLabelBorder = true, +{ + ShowLabelBorder = true, }; -ChartMultiLevelLabel label5 = new ChartMultiLevelLabel() - +ChartMultiLevelLabel label5 = new ChartMultiLevelLabel() { - - Start = 32, - - End = 36, - - Text = "Low", - - LabelAlignment = LabelAlignment.Near - + Start = 32, + End = 36, + Text = "Low", + LabelAlignment = LabelAlignment.Near }; - + chart.SecondaryAxis.MultiLevelLabels.Add(label5); - -ChartMultiLevelLabel label6 = new ChartMultiLevelLabel() +ChartMultiLevelLabel label6 = new ChartMultiLevelLabel() { Start = 36, - + End = 42, - + Text = "Medium", LabelAlignment = LabelAlignment.Near @@ -4984,15 +4153,11 @@ ChartMultiLevelLabel label6 = new ChartMultiLevelLabel() chart.SecondaryAxis.MultiLevelLabels.Add(label6); ChartMultiLevelLabel label7 = new ChartMultiLevelLabel() - { - Start = 42, - - End = 48, - - Text = "High", - - LabelAlignment = LabelAlignment.Near + Start = 42, + End = 48, + Text = "High", + LabelAlignment = LabelAlignment.Near }; chart.SecondaryAxis.MultiLevelLabels.Add(label7); @@ -5011,162 +4176,106 @@ chart.SecondaryAxis.MultiLevelLabels.Add(label7); {% highlight xaml %} - - - - - - - - - - - - - - - - - + + + + + + + + - - - - - - - - - - - - - - - + + + + + + + {% endhighlight %} {% highlight c# %} -chart.PrimaryAxis = new CategoryAxis() - +chart.PrimaryAxis = new CategoryAxis() { - ShowLabelBorder = true, + ShowLabelBorder = true, }; ChartMultiLevelLabel label1 = new ChartMultiLevelLabel() - { - - Start = -0.5, - - End = 2.5, - - Text = "Quarter 1", - - LabelAlignment = LabelAlignment.Near - + Start = -0.5, + End = 2.5, + Text = "Quarter 1", + LabelAlignment = LabelAlignment.Near }; chart.PrimaryAxis.MultiLevelLabels.Add(label1); ChartMultiLevelLabel label2 = new ChartMultiLevelLabel() - { - Start = 2.5, - End = 5.5, - Text = "Quarter 2", - LabelAlignment = LabelAlignment.Near - }; chart.PrimaryAxis.MultiLevelLabels.Add(label2); ChartMultiLevelLabel label3 = new ChartMultiLevelLabel() - { - Start = 5.5, - End = 8.5, - Text = "Quarter 3", - LabelAlignment = LabelAlignment.Near - }; chart.PrimaryAxis.MultiLevelLabels.Add(label3); ChartMultiLevelLabel label4 = new ChartMultiLevelLabel() - { - Start = 8.5, - - End = 11.5, - - Text = "Quarter 4", - - LabelAlignment = LabelAlignment.Near - + Start = 8.5, + End = 11.5, + Text = "Quarter 4", + LabelAlignment = LabelAlignment.Near }; chart.PrimaryAxis.MultiLevelLabels.Add(label4); chart.SecondaryAxis = new NumericalAxis() - { - ShowLabelBorder = true, + ShowLabelBorder = true, }; ChartMultiLevelLabel label5 = new ChartMultiLevelLabel() - { - - Start = 32, - - End = 36, - - Text = "Low", - - LabelAlignment = LabelAlignment.Near - + Start = 32, + End = 36, + Text = "Low", + LabelAlignment = LabelAlignment.Near }; - + chart.SecondaryAxis.MultiLevelLabels.Add(label5); - -ChartMultiLevelLabel label6 = new ChartMultiLevelLabel() +ChartMultiLevelLabel label6 = new ChartMultiLevelLabel() { Start = 36, - End = 42, - Text = "Medium", - LabelAlignment = LabelAlignment.Near }; chart.SecondaryAxis.MultiLevelLabels.Add(label6); ChartMultiLevelLabel label7 = new ChartMultiLevelLabel() - { - Start = 42, - - End = 48, - - Text = "High", - - LabelAlignment = LabelAlignment.Near + Start = 42, + End = 48, + Text = "High", + LabelAlignment = LabelAlignment.Near }; chart.SecondaryAxis.MultiLevelLabels.Add(label7); @@ -5184,21 +4293,13 @@ The text of [`ChartMultiLevelLabel`](https://help.syncfusion.com/cr/wpf/Syncfusi {% highlight xaml %} - - - - - - - - - - - - - - - + + + + + + + {% endhighlight %} @@ -5206,50 +4307,36 @@ The text of [`ChartMultiLevelLabel`](https://help.syncfusion.com/cr/wpf/Syncfusi {% highlight c# %} chart.SecondaryAxis = new NumericalAxis() - { - ShowLabelBorder = true, + ShowLabelBorder = true, }; ChartMultiLevelLabel label5 = new ChartMultiLevelLabel() - { - - Start = 32, - - End = 36, - - Text = "Low Temperature" + Start = 32, + End = 36, + Text = "Low Temperature" }; chart.SecondaryAxis.MultiLevelLabels.Add(label5); ChartMultiLevelLabel label6 = new ChartMultiLevelLabel() - { - Start = 36, - - End = 42, - - Text = "Medium Temperature" - + Start = 36, + End = 42, + Text = "Medium Temperature" }; - + chart.SecondaryAxis.MultiLevelLabels.Add(label6); ChartMultiLevelLabel label7 = new ChartMultiLevelLabel() - { - - Start = 42, - - End = 48, - - Text = "High Temperature" - - }; + Start = 42, + End = 48, + Text = "High Temperature" +}; - chart.SecondaryAxis.MultiLevelLabels.Add(label7); +chart.SecondaryAxis.MultiLevelLabels.Add(label7); {% endhighlight %} diff --git a/wpf/Charts/SeriesTypes/Area.md b/wpf/Charts/SeriesTypes/Area.md index 6f7d6372a..a230b05ee 100644 --- a/wpf/Charts/SeriesTypes/Area.md +++ b/wpf/Charts/SeriesTypes/Area.md @@ -7,7 +7,7 @@ control: SfChart documentation: ug --- -# Area in WPF Charts (SfChart) +# Area Series in WPF Charts (SfChart) ## Area Chart [`AreaSeries`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.AreaSeries.html#) is rendered using a collection of line segments connected to form a closed loop area, filled with the specified color. @@ -18,9 +18,7 @@ The following code example initializes the AreaSeries: {% highlight xaml %} - + {% endhighlight %} @@ -28,17 +26,11 @@ YBindingPath="People" ItemsSource="{Binding Fruits}" > AreaSeries series = new AreaSeries() { - ItemsSource = new ViewModel().Fruits, - XBindingPath = "FruitName", - YBindingPath = "People", - Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC)) - }; - chart.Series.Add(series); {% endhighlight %} @@ -57,11 +49,12 @@ N> You can refer to our [WPF Area Chart](https://www.syncfusion.com/wpf-controls {% highlight xaml %} - + + {% endhighlight %} @@ -69,15 +62,10 @@ YBindingPath="ItemsCount"/> StepAreaSeries series = new StepAreaSeries() { - ItemsSource = new ViewModel().SneakersDetail, - XBindingPath = "Brand", - YBindingPath = "ItemsCount", - Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0x7F)) - }; chart.Series.Add(series); @@ -98,11 +86,13 @@ If you wish to draw the open area series (Area with stroke only at top), SfChart {% highlight xaml %} - + + {% endhighlight %} @@ -110,19 +100,12 @@ YBindingPath="People" ItemsSource="{Binding Fruits}" /> AreaSeries series = new AreaSeries() { - ItemsSource = new ViewModel().Fruits, - XBindingPath = "FruitName", - YBindingPath = "People", - IsClosed = true, - Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC)) - }; - chart.Series.Add(series); {% endhighlight %} diff --git a/wpf/Charts/SeriesTypes/BubbleandScatter.md b/wpf/Charts/SeriesTypes/BubbleandScatter.md index 2f7d1d6a6..203d18894 100644 --- a/wpf/Charts/SeriesTypes/BubbleandScatter.md +++ b/wpf/Charts/SeriesTypes/BubbleandScatter.md @@ -19,13 +19,15 @@ The size of the bubble series is relative proportional to the value bind with th {% highlight xaml %} - + + {% endhighlight %} @@ -33,21 +35,13 @@ Interior="#BCBCBC" /> BubbleSeries series = new BubbleSeries() { - ItemsSource = new ViewModel().Fruits, - XBindingPath = "FruitName", - YBindingPath = "People", - Size = "Size", - MinimumRadius = 5, - Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A)) - }; - chart.Series.Add(series); {% endhighlight %} @@ -67,16 +61,13 @@ The following code illustrates how to set the value to the property. {% highlight xaml %} - - - + {% endhighlight %} {% highlight c# %} BubbleSeries series = new BubbleSeries(); - series.ShowZeroBubbles = true; {% endhighlight %} @@ -91,16 +82,13 @@ The following code example and screenshots describes when [`ShowZeroBubbles`](ht {% highlight xaml %} - - - + {% endhighlight %} {% highlight c# %} BubbleSeries series = new BubbleSeries(); - series.ShowZeroBubbles = false; {% endhighlight %} @@ -117,11 +105,14 @@ series.ShowZeroBubbles = false; {% highlight xaml %} - + + {% endhighlight %} @@ -129,21 +120,13 @@ YBindingPath="WaitingTime"/> ScatterSeries series = new ScatterSeries() { - ItemsSource = new ViewModel().DataPoints, - XBindingPath = "Eruptions", - YBindingPath = "WaitingTime", - ScatterHeight = 4, - ScatterWidth = 4, - Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A)) - }; - chart.Series.Add(series); {% endhighlight %} diff --git a/wpf/Charts/SeriesTypes/ColumnandBar.md b/wpf/Charts/SeriesTypes/ColumnandBar.md index c29c5dfa3..9055aba28 100644 --- a/wpf/Charts/SeriesTypes/ColumnandBar.md +++ b/wpf/Charts/SeriesTypes/ColumnandBar.md @@ -17,9 +17,12 @@ documentation: ug {% highlight xaml %} - + + {% endhighlight %} @@ -27,15 +30,10 @@ XBindingPath="Brand" YBindingPath="ItemsCount1" /> ColumnSeries series = new ColumnSeries() { - ItemsSource = new ViewModel().SneakersDetail, - XBindingPath = "Brand", - YBindingPath = "ItemsCount1", - Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0x7F)) - }; chart.Series.Add(series); @@ -56,9 +54,11 @@ N> You can explore our [WPF Column Chart](https://www.syncfusion.com/wpf-control {% highlight xaml %} - + + {% endhighlight %} @@ -66,15 +66,10 @@ YBindingPath="Value" Interior="#7F7F7F" /> BarSeries series = new BarSeries() { - ItemsSource = new ViewModel().CategoricalDatas, - XBindingPath = "Category", - YBindingPath = "Value", - Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0x7F)) - }; {% endhighlight %} @@ -100,7 +95,6 @@ N> You can explore our [WPF Bar Chart](https://www.syncfusion.com/wpf-controls/c {% highlight c# %} ColumnSeries series = new ColumnSeries() - ChartSeriesBase.SetSpacing(series, 0.8); {% endhighlight %} @@ -118,11 +112,8 @@ ChartSeriesBase.SetSpacing(series, 0.8); {% highlight xaml %} - - - - - + + {% endhighlight %} @@ -132,23 +123,15 @@ ChartSeriesBase.SetSpacing(series, 0.8); SfChart chart = new SfChart(); ColumnSeries series1 = new ColumnSeries() - { - SegmentSpacing = 0.6, - }; - chart.Series.Add(series1); ColumnSeries series2 = new ColumnSeries() - { - SegmentSpacing = 0.6 - }; - chart.Series.Add(series2); {% endhighlight %} diff --git a/wpf/Charts/SeriesTypes/LineandStepLine.md b/wpf/Charts/SeriesTypes/LineandStepLine.md index fc34ec3cc..cb215ca87 100644 --- a/wpf/Charts/SeriesTypes/LineandStepLine.md +++ b/wpf/Charts/SeriesTypes/LineandStepLine.md @@ -17,17 +17,16 @@ Line series join points on a plot by straight lines, showing data trends at equa {% highlight xaml %} - - - + + {% endhighlight %} @@ -35,32 +34,21 @@ Interior="#4A4A4A"/> LineSeries series1 = new LineSeries() { - ItemsSource = new ViewModel().List, - XBindingPath = "Year", - YBindingPath = "India", - Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A)) - }; LineSeries series2 = new LineSeries() { - ItemsSource = new ViewModel().List, - XBindingPath = "Year", - YBindingPath = "America", - Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A)) - }; chart.Series.Add(series1); - chart.Series.Add(series2); {% endhighlight %} @@ -79,24 +67,19 @@ N> You can explore our [WPF Line Chart](https://www.syncfusion.com/wpf-controls/ {% highlight xaml %} - - - + + {% endhighlight %} {% highlight c# %} StepLineSeries stepLine = new StepLineSeries(); - stepLine.ItemsSource = new ViewModel().Data; - stepLine.XBindingPath = "XValue"; - stepLine.YBindingPath = "YValue"; SteplineChart.Series.Add(stepLine); diff --git a/wpf/Charts/SeriesTypes/PieandDoughnut.md b/wpf/Charts/SeriesTypes/PieandDoughnut.md index a85f04579..293775b32 100644 --- a/wpf/Charts/SeriesTypes/PieandDoughnut.md +++ b/wpf/Charts/SeriesTypes/PieandDoughnut.md @@ -17,11 +17,7 @@ documentation: ug {% highlight xaml %} - + {% endhighlight %} @@ -29,13 +25,9 @@ documentation: ug PieSeries series = new PieSeries() { - ItemsSource = new ViewModel().Tax, - XBindingPath = "Category", - YBindingPath = "Percentage" - }; chart.Series.Add(series); @@ -52,13 +44,12 @@ The rendering size of the PieSeries can be controlled using [`PieCoefficient`](h {% highlight xaml %} - + + {% endhighlight %} @@ -66,15 +57,10 @@ YBindingPath="Percentage"/> PieSeries series = new PieSeries() { - ItemsSource = new ViewModel().Tax, - XBindingPath = "Category", - YBindingPath = "Percentage", - PieCoefficient = 0.9 - }; chart.Series.Add(series); @@ -100,48 +86,54 @@ The small segments in the pie chart can be grouped into the “others” categor {% highlight xaml %} - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + {% endhighlight %} {% highlight c# %} - pieSeries.GroupMode = PieGroupMode.Value; - pieSeries.GroupTo = 1000; +pieSeries.GroupMode = PieGroupMode.Angle; +pieSeries.GroupTo = 30; - ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() - { - ShowConnectorLine = true, - ShowLabel = true, - ConnectorHeight = 80, - LabelTemplate = this.RootGrid.Resources["DataLabelTemplate"] as DataTemplate, - SegmentLabelContent = LabelContent.LabelContentPath, - }; +ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() +{ + ShowConnectorLine = true, + ShowLabel = true, + ConnectorHeight = 80, + LabelTemplate = this.RootGrid.Resources["DataLabelTemplate"] as DataTemplate, + SegmentLabelContent = LabelContent.LabelContentPath, +}; - pieSeries.AdornmentsInfo = adornmentInfo; +pieSeries.AdornmentsInfo = adornmentInfo; {% endhighlight %} @@ -157,15 +149,19 @@ You can explore our KB article on showing adornment labels for grouped values in {% highlight xaml %} - - + - + @@ -178,13 +174,13 @@ pieSeries.GroupMode = PieGroupMode.Angle; pieSeries.GroupTo = 30; ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() - { - ShowConnectorLine = true, - ShowLabel = true, - ConnectorHeight = 80, - LabelTemplate = this.RootGrid.Resources["DataLabelTemplate"] as DataTemplate, - SegmentLabelContent = LabelContent.LabelContentPath, - }; +{ + ShowConnectorLine = true, + ShowLabel = true, + ConnectorHeight = 80, + LabelTemplate = this.RootGrid.Resources["DataLabelTemplate"] as DataTemplate, + SegmentLabelContent = LabelContent.LabelContentPath, +}; pieSeries.AdornmentsInfo = adornmentInfo; @@ -200,15 +196,19 @@ pieSeries.AdornmentsInfo = adornmentInfo; {% highlight xaml %} - - + - + @@ -222,13 +222,13 @@ pieSeries.GroupMode = PieGroupMode.Percentage; pieSeries.GroupTo = 10; ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() - { - ShowConnectorLine = true, - ShowLabel = true, - ConnectorHeight = 80, - LabelTemplate = this.RootGrid.Resources["DataLabelTemplate"] as DataTemplate, - SegmentLabelContent = LabelContent.LabelContentPath, - }; +{ + ShowConnectorLine = true, + ShowLabel = true, + ConnectorHeight = 80, + LabelTemplate = this.RootGrid.Resources["DataLabelTemplate"] as DataTemplate, + SegmentLabelContent = LabelContent.LabelContentPath, +}; pieSeries.AdornmentsInfo = adornmentInfo; @@ -250,11 +250,8 @@ The DoughnutSeries can be added to chart as in below code example: {% highlight xaml %} - - ItemsSource="{Binding Tax}" - - YBindingPath="Percentage"/> {% endhighlight %} @@ -262,11 +259,8 @@ The DoughnutSeries can be added to chart as in below code example: DoughnutSeries series = new DoughnutSeries() { - ItemsSource = new ViewModel().Tax, - XBindingPath = "Category", - YBindingPath = "Percentage" }; @@ -284,11 +278,12 @@ The Doughnut also having coefficient property, [`DoughnutCoefficient`](https://h {% highlight xaml %} - + + {% endhighlight %} @@ -296,13 +291,9 @@ YBindingPath="Percentage" /> DoughnutSeries series = new DoughnutSeries() { - ItemsSource = new ViewModel().Tax, - XBindingPath = "Category", - YBindingPath = "Percentage", - DoughnutCoefficient = 0.9 }; @@ -323,28 +314,20 @@ The size of doughnut series can be customized by using its [`DoughnutSize`](http {% highlight xaml %} - - - - - + + - {% endhighlight %} {% highlight c# %} DoughnutSeries doughnut = new DoughnutSeries(); - doughnut.DoughnutSize = 0.8; - chart.Series.Add(doughnut); DoughnutSeries doughnut1 = new DoughnutSeries(); - doughnut1.DoughnutSize = 0.8; - chart.Series.Add(doughnut1); {% endhighlight %} @@ -361,16 +344,13 @@ chart.Series.Add(doughnut1); {% highlight xaml %} - - - + {% endhighlight %} {% highlight c# %} SfChart chart = new SfChart(); - DoughnutSeries.SetDoughnutHoleSize(chart, 0.2); {% endhighlight %} @@ -388,13 +368,14 @@ By using custom [`StartAngle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI. {% highlight xaml %} - + + {% endhighlight %} @@ -402,17 +383,11 @@ ItemsSource="{Binding}"/> PieSeries series = new PieSeries() { - ItemsSource = new ViewModel().Value, - XBindingPath = "Utilization", - YBindingPath = "ResponseTime", - StartAngle = 180, - EndAngle = 360 - }; chart.Series.Add(series); @@ -429,11 +404,13 @@ chart.Series.Add(series); + + {% endhighlight %} @@ -441,17 +418,11 @@ ItemsSource="{Binding}"/> DoughnutSeries series = new DoughnutSeries() { - ItemsSource = new ViewModel().Value, - XBindingPath = "Utilization", - YBindingPath = "ResponseTime", - StartAngle = 180, - EndAngle = 360 - }; chart.Series.Add(series); @@ -573,15 +544,14 @@ The following properties are used to explode the individual segments in Pie and {% highlight xaml %} - + + {% endhighlight %} @@ -589,17 +559,11 @@ YBindingPath="ResponseTime" /> PieSeries series = new PieSeries() { - ItemsSource = new ViewModel().Data, - XBindingPath = "Utilization", - YBindingPath = "ResponseTime", - ExplodeIndex = 2, - ExplodeRadius = 10 - }; chart.Series.Add(series); @@ -618,15 +582,13 @@ N> We have defined ExplodeRadius as 30, by default its value is zero. So you nee {% highlight xaml %} - + + {% endhighlight %} @@ -634,17 +596,11 @@ YBindingPath="Percentage"> PieSeries series = new PieSeries() { - ItemsSource = new ViewModel().Tax, - XBindingPath = "Category", - YBindingPath = "Percentage", - ExplodeAll = true, - ExplodeRadius = 15 - }; chart.Series.Add(series); diff --git a/wpf/Charts/SeriesTypes/Spline.md b/wpf/Charts/SeriesTypes/Spline.md index 7c50b87fc..c0383512b 100644 --- a/wpf/Charts/SeriesTypes/Spline.md +++ b/wpf/Charts/SeriesTypes/Spline.md @@ -17,17 +17,17 @@ documentation: ug {% highlight xaml %} - - - + + + {% endhighlight %} @@ -35,32 +35,21 @@ Interior="#4A4A4A"/> SplineSeries series1 = new SplineSeries() { - ItemsSource = new ViewModel().List, - XBindingPath = "Year", - YBindingPath = "India", - Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A)) - }; SplineSeries series2 = new SplineSeries() { - ItemsSource = new ViewModel().List, - XBindingPath = "Year", - YBindingPath = "America", - Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A)) - }; chart.Series.Add(series1); - chart.Series.Add(series2); {% endhighlight %} @@ -110,11 +99,7 @@ N> You can explore our [WPF Spline Chart](https://www.syncfusion.com/wpf-control {% highlight xaml %} - + {% endhighlight %} @@ -122,17 +107,11 @@ YBindingPath="Price" /> SplineAreaSeries series = new SplineAreaSeries() { - ItemsSource = new ViewModel().Products, - XBindingPath = "ProdName", - YBindingPath = "Price", - Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0x7F)) - }; - chart.Series.Add(series); {% endhighlight %} @@ -162,16 +141,13 @@ The following code illustrates how to set the [`SplineType`](https://help.syncfu {% highlight xaml %} - - - + {% endhighlight %} {% highlight c# %} SplineSeries series = new SplineSeries(); - series.SplineType = SplineType.Cardinal; {% endhighlight %} @@ -190,16 +166,13 @@ The following code illustrates how to set the [`SplineType`](https://help.syncfu {% highlight xaml %} - - - + {% endhighlight %} {% highlight c# %} SplineSeries series = new SplineSeries(); - series.SplineType = SplineType.Monotonic; {% endhighlight %} @@ -218,16 +191,13 @@ The following code illustrates how to set the [`SplineType`](https://help.syncfu {% highlight xaml %} - - - + {% endhighlight %} {% highlight c# %} SplineSeries series = new SplineSeries(); - series.SplineType = SplineType.Clamped; {% endhighlight %} From e651667c4c3541915fadd89768bfe94cc5e90aaa Mon Sep 17 00:00:00 2001 From: SivaThennarasu Date: Thu, 16 Apr 2026 09:43:10 +0530 Subject: [PATCH 4/7] Remove Extra spaces and Correct the Front Matter Error --- wpf/Charts/Axis.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/wpf/Charts/Axis.md b/wpf/Charts/Axis.md index 11feea25c..c04a614a7 100644 --- a/wpf/Charts/Axis.md +++ b/wpf/Charts/Axis.md @@ -4013,7 +4013,7 @@ chart.SecondaryAxis = new NumericalAxis() ShowLabelBorder = true, }; -ChartMultiLevelLabel label5 = new ChartMultiLevelLabel() +ChartMultiLevelLabel label5 = new ChartMultiLevelLabel() { Start = 32, From 03bd79f8e0b6febce3f23c243604fea10203c494 Mon Sep 17 00:00:00 2001 From: SivaThennarasu Date: Thu, 16 Apr 2026 18:51:34 +0530 Subject: [PATCH 5/7] Reviewed the code snippets and corrected the code. --- wpf/Charts/SeriesTypes/Custom.md | 86 ++-- wpf/Charts/SeriesTypes/Distribution.md | 84 +--- wpf/Charts/SeriesTypes/EmptyPoints.md | 355 ++++++++------- wpf/Charts/SeriesTypes/ErrorBars.md | 305 ++++--------- wpf/Charts/SeriesTypes/Financial.md | 100 ++--- wpf/Charts/SeriesTypes/Funnelandpyramid.md | 114 ++--- wpf/Charts/SeriesTypes/GroupingStacked.md | 125 +++--- wpf/Charts/SeriesTypes/Other.md | 144 ++---- wpf/Charts/SeriesTypes/Placesidebyside.md | 100 ++--- wpf/Charts/SeriesTypes/RadarandPolar.md | 192 +++----- wpf/Charts/SeriesTypes/Range.md | 111 ++--- wpf/Charts/SeriesTypes/Stacking.md | 499 ++++++--------------- 12 files changed, 796 insertions(+), 1419 deletions(-) diff --git a/wpf/Charts/SeriesTypes/Custom.md b/wpf/Charts/SeriesTypes/Custom.md index 4a6dccc97..08ce75963 100644 --- a/wpf/Charts/SeriesTypes/Custom.md +++ b/wpf/Charts/SeriesTypes/Custom.md @@ -38,53 +38,39 @@ The following code example illustrates the use of [`CustomTemplate`](https://hel {% highlight xaml %} - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + {% endhighlight %} @@ -92,21 +78,13 @@ The following code example illustrates the use of [`CustomTemplate`](https://hel ScatterSeries series = new ScatterSeries() { - ItemsSource = new ViewModel().Data, - XBindingPath = "Year", - YBindingPath = "Count", - ScatterHeight = 20, - ScatterWidth = 20, - Interior = new SolidColorBrush(Colors.DarkGray), - CustomTemplate = chart.Resources["seriesTemplate"] as DataTemplate - }; chart.Series.Add(series); diff --git a/wpf/Charts/SeriesTypes/Distribution.md b/wpf/Charts/SeriesTypes/Distribution.md index 7643931c3..962e22dbc 100644 --- a/wpf/Charts/SeriesTypes/Distribution.md +++ b/wpf/Charts/SeriesTypes/Distribution.md @@ -19,17 +19,13 @@ The following code example shows how to add the HistogramSeries: {% highlight xaml %} - + {% endhighlight %} @@ -37,17 +33,11 @@ YBindingPath="Value"/> HistogramSeries series = new HistogramSeries() { - ItemsSource = new ViewModel().Product, - XBindingPath = "Price", - YBindingPath = "Value", - HistogramInterval = 5, - Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC)) - }; chart.Series.Add(series); @@ -65,19 +55,14 @@ You can customize interval using [`HistogramInterval`](https://help.syncfusion.c {% highlight xaml %} - + {% endhighlight %} @@ -85,19 +70,12 @@ YBindingPath="Value"/> HistogramSeries series = new HistogramSeries() { - ItemsSource = new ViewModel().Product, - XBindingPath = "Price", - YBindingPath = "Value", - HistogramInterval = 5, - ShowNormalDistributionCurve = false, - Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC)) - }; chart.Series.Add(series); @@ -123,21 +101,15 @@ You can customize the normal distribution curve by using the [`CurveLineStyle`]( ... - + {% endhighlight %} @@ -146,21 +118,13 @@ YBindingPath="Value"/> ... HistogramSeries series = new HistogramSeries() { - ItemsSource = new ViewModel().Product, - XBindingPath = "Price", - YBindingPath = "Value", - HistogramInterval = 5, - ShowNormalDistributionCurve = True, - CurveLineStyle = histogramChart.Resources["CurveColorStyle"] as Style, - Interior = new SolidColorBrush(new SolidColorBrush(Colors.LightSkyBlue)) - }; chart.Series.Add(series); diff --git a/wpf/Charts/SeriesTypes/EmptyPoints.md b/wpf/Charts/SeriesTypes/EmptyPoints.md index 7522186ba..bb45f2ab6 100644 --- a/wpf/Charts/SeriesTypes/EmptyPoints.md +++ b/wpf/Charts/SeriesTypes/EmptyPoints.md @@ -13,12 +13,12 @@ The data collection that is passed to the chart can have NaN or Null values that {% highlight C# %} - Fruits.Add(new Model() { FruitName = "Mango", People = 5 }); - Fruits.Add(new Model() { FruitName = "Apple", People = 27 }); - Fruits.Add(new Model() { FruitName = "Orange", People = Double.NaN }); - Fruits.Add(new Model() { FruitName = "Grapes", People = 15 }); - Fruits.Add(new Model() { FruitName = "Banana", People = 5 }); - Fruits.Add(new Model() { FruitName = "Blueberry", People = 20 }); +Fruits.Add(new Model() { FruitName = "Mango", People = 5 }); +Fruits.Add(new Model() { FruitName = "Apple", People = 27 }); +Fruits.Add(new Model() { FruitName = "Orange", People = Double.NaN }); +Fruits.Add(new Model() { FruitName = "Grapes", People = 15 }); +Fruits.Add(new Model() { FruitName = "Banana", People = 5 }); +Fruits.Add(new Model() { FruitName = "Blueberry", People = 20 }); {% endhighlight %} @@ -48,40 +48,39 @@ The following code examples shows how to display the empty points: {% highlight xaml %} - - - - - - - - - + + + + + {% endhighlight %} {% highlight c# %} - LineSeries series = new LineSeries() - { - ItemsSource = new ViewModel().Fruits, - XBindingPath = "FruitName", - YBindingPath = "People", - ShowEmptyPoints = true, - Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC)) - }; +LineSeries series = new LineSeries() +{ + ItemsSource = new ViewModel().Fruits, + XBindingPath = "FruitName", + YBindingPath = "People", + ShowEmptyPoints = true, + Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC)) +}; + +ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() +{ + ShowLabel = true, + LabelPosition = AdornmentsLabelPosition.Auto +}; - ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() - { - ShowLabel = true, - LabelPosition = AdornmentsLabelPosition.Auto - }; - - series.AdornmentsInfo = adornmentInfo; +series.AdornmentsInfo = adornmentInfo; - chart.Series.Add(series); +chart.Series.Add(series); {% endhighlight %} @@ -98,40 +97,41 @@ The following code example shows the [`EmptyPointValue`](https://help.syncfusion {% highlight xaml %} - - - + - - - - - + + + + {% endhighlight %} {% highlight c# %} - LineSeries series = new LineSeries() - { - ItemsSource = new ViewModel().Fruits, - XBindingPath = "FruitName", - YBindingPath = "People", - ShowEmptyPoints = true, - EmptyPointValue = EmptyPointValue.Average, - Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC)) - }; - - ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() - { - ShowLabel = true, - LabelPosition = AdornmentsLabelPosition.Auto - }; - - series.AdornmentsInfo = adornmentInfo; - chart.Series.Add(series); +LineSeries series = new LineSeries() +{ + ItemsSource = new ViewModel().Fruits, + XBindingPath = "FruitName", + YBindingPath = "People", + ShowEmptyPoints = true, + EmptyPointValue = EmptyPointValue.Average, + Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC)) +}; + +ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() +{ + ShowLabel = true, + LabelPosition = AdornmentsLabelPosition.Auto +}; + +series.AdornmentsInfo = adornmentInfo; +chart.Series.Add(series); {% endhighlight %} @@ -158,24 +158,27 @@ The following code example illustrates the use of [`EmptyPointStyle`](https://he {% highlight xaml %} - + {% endhighlight %} {% highlight c# %} - ColumnSeries series = new ColumnSeries() - { - ItemsSource = new ViewModel().EmptyPointDatas, - XBindingPath = "Category", - YBindingPath = "Value", - ShowEmptyPoints = true, - Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC)) - }; +ColumnSeries series = new ColumnSeries() +{ + ItemsSource = new ViewModel().EmptyPointDatas, + XBindingPath = "Category", + YBindingPath = "Value", + ShowEmptyPoints = true, + Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC)) +}; - chart.Series.Add(series); +chart.Series.Add(series); {% endhighlight %} @@ -194,42 +197,43 @@ This option is used to add Symbol for the empty points as in the below code exam {% highlight xaml %} - - - - - - - - - + + + + + {% endhighlight %} {% highlight c# %} - LineSeries series = new LineSeries() - { - ItemsSource = new ViewModel().Fruits, - XBindingPath = "FruitName", - YBindingPath = "People", - ShowEmptyPoints = true, - EmptyPointValue = EmptyPointValue.Average, - EmptyPointStyle = EmptyPointStyle.Symbol, - Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC)) - }; +LineSeries series = new LineSeries() +{ + ItemsSource = new ViewModel().Fruits, + XBindingPath = "FruitName", + YBindingPath = "People", + ShowEmptyPoints = true, + EmptyPointValue = EmptyPointValue.Average, + EmptyPointStyle = EmptyPointStyle.Symbol, + Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC)) +}; + +ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() +{ + ShowLabel = true, + LabelPosition = AdornmentsLabelPosition.Auto +}; - ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() - { - ShowLabel = true, - LabelPosition = AdornmentsLabelPosition.Auto - }; - - series.AdornmentsInfo = adornmentInfo; +series.AdornmentsInfo = adornmentInfo; - chart.Series.Add(series); +chart.Series.Add(series); {% endhighlight %} @@ -246,44 +250,44 @@ This option combines above two options, which draw a symbol with defined [`Empty {% highlight xaml %} - - - - - - - - - + + + + + {% endhighlight %} {% highlight c# %} - LineSeries series = new LineSeries() - { - ItemsSource = new ViewModel().Fruits, - XBindingPath = "FruitName", - YBindingPath = "People", - ShowEmptyPoints = true, - EmptyPointValue = EmptyPointValue.Average, - EmptyPointStyle = EmptyPointStyle.SymbolAndInterior, - EmptyPointInterior = new SolidColorBrush(Colors.Red), - Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC)) - }; - - ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() - { - ShowLabel = true, - LabelPosition = AdornmentsLabelPosition.Auto - }; - -series.AdornmentsInfo = adornmentInfo; -chart.Series.Add(series); + LineSeries series = new LineSeries() + { + ItemsSource = new ViewModel().Fruits, + XBindingPath = "FruitName", + YBindingPath = "People", + ShowEmptyPoints = true, + EmptyPointValue = EmptyPointValue.Average, + EmptyPointStyle = EmptyPointStyle.SymbolAndInterior, + EmptyPointInterior = new SolidColorBrush(Colors.Red), + Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC)) + }; + + ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() + { + ShowLabel = true, + LabelPosition = AdornmentsLabelPosition.Auto + }; + + series.AdornmentsInfo = adornmentInfo; + chart.Series.Add(series); {% endhighlight %} @@ -301,48 +305,59 @@ You can add any custom shape for the empty point symbol. The following code exam {% highlight xaml %} - - - - - - - - + + + + + + + - + - - - - + + {% endhighlight %} {% highlight c# %} - LineSeries series = new LineSeries() - { - - ItemsSource = new ViewModel().Fruits, - XBindingPath = "FruitName", - YBindingPath = "People", - Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC)), - ShowEmptyPoints = true, - EmptyPointValue = EmptyPointValue.Average, - EmptyPointStyle = EmptyPointStyle.Symbol, - EmptyPointInterior =new SolidColorBrush(Colors.Red), - EmptyPointSymbolTemplate = chart.Resources["symbolTemplate"] as DataTemplate - - }; +LineSeries series = new LineSeries() +{ + ItemsSource = new ViewModel().Fruits, + XBindingPath = "FruitName", + YBindingPath = "People", + Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC)), + ShowEmptyPoints = true, + EmptyPointValue = EmptyPointValue.Average, + EmptyPointStyle = EmptyPointStyle.Symbol, + EmptyPointInterior = new SolidColorBrush(Colors.Red), + EmptyPointSymbolTemplate = chart.Resources["symbolTemplate"] as DataTemplate +}; chart.Series.Add(series); diff --git a/wpf/Charts/SeriesTypes/ErrorBars.md b/wpf/Charts/SeriesTypes/ErrorBars.md index 9e2a6ae8e..dc63f2b02 100644 --- a/wpf/Charts/SeriesTypes/ErrorBars.md +++ b/wpf/Charts/SeriesTypes/ErrorBars.md @@ -20,20 +20,23 @@ The following code examples illustrates how to create error bar series: {% highlight xaml %} - - + - - + {% endhighlight %} @@ -42,42 +45,26 @@ VerticalErrorValue="50" HorizontalErrorValue="1" > ScatterSeries series = new ScatterSeries() { - ItemsSource = new ViewModel().EnergyProductions, - XBindingPath = "ID", - YBindingPath = "Coal", - ScatterWidth = 20, - ScatterHeight = 20, - Label ="Coal", - ListenPropertyChange=true, - Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0XBC)) - }; ErrorBarSeries errorBar = new ErrorBarSeries() { - ItemsSource = new ViewModel().EnergyProductions, - XBindingPath = "ID", - YBindingPath = "Coal", - HorizontalErrorValue = 1, - VerticalErrorValue = 50 - }; chart.Series.Add(series); - chart.Series.Add(errorBar); {% endhighlight %} @@ -99,13 +86,14 @@ To view horizontal error value, you can set the Mode as Horizontal as shown in t {% highlight xaml %} - + {% endhighlight %} @@ -113,19 +101,12 @@ Mode="Horizontal"> ErrorBarSeries errorBar = new ErrorBarSeries() { - ItemsSource = new ViewModel().EnergyProductions, - XBindingPath = "ID", - YBindingPath = "Coal", - HorizontalErrorValue = 1, - VerticalErrorValue = 50, - Mode = ErrorBarMode.Horizontal - }; chart.Series.Add(errorBar); @@ -145,13 +126,14 @@ To view vertical error value, you can set the Mode as Vertical as shown in the b {% highlight xaml %} - + {% endhighlight %} @@ -159,19 +141,12 @@ Mode="Vertical"> ErrorBarSeries errorBar = new ErrorBarSeries() { - ItemsSource = new ViewModel().EnergyProductions, - XBindingPath = "ID", - YBindingPath = "Coal", - HorizontalErrorValue = 1, - VerticalErrorValue = 50, - Mode = ErrorBarMode.Vertical - }; chart.Series.Add(errorBar); @@ -203,16 +178,13 @@ The following code illustrates how to set the [`HorizontalDirection`](https://he {% highlight xaml %} - - - + {% endhighlight %} {% highlight c# %} ErrorBarSeries errorBarSeries = new ErrorBarSeries(); - errorBarSeries.HorizontalDirection = ErrorBarDirection.Both; chart.Series.Add(errorBar); @@ -231,16 +203,13 @@ The following code illustrates how to set the [`HorizontalDirection`](https://he {% highlight xaml %} - - - + {% endhighlight %} {% highlight c# %} ErrorBarSeries errorBarSeries = new ErrorBarSeries(); - errorBarSeries.HorizontalDirection = ErrorBarDirection.Minus; chart.Series.Add(errorBar); @@ -259,16 +228,13 @@ The following code illustrates how to set the [`HorizontalDirection`](https://he {% highlight xaml %} - - - + {% endhighlight %} {% highlight c# %} ErrorBarSeries errorBarSeries = new ErrorBarSeries(); - errorBarSeries.HorizontalDirection = ErrorBarDirection.Plus; chart.Series.Add(errorBar); @@ -295,16 +261,13 @@ The following code illustrates how to set the [`VerticalDirection`](https://help {% highlight xaml %} - - - + {% endhighlight %} {% highlight c# %} ErrorBarSeries errorBarSeries = new ErrorBarSeries(); - errorBarSeries.VerticalDirection= ErrorBarDirection.Both; chart.Series.Add(errorBar); @@ -323,16 +286,13 @@ The following code illustrates how to set the [`VerticalDirection`](https://help {% highlight xaml %} - - - + {% endhighlight %} {% highlight c# %} ErrorBarSeries errorBarSeries = new ErrorBarSeries(); - errorBarSeries.VerticalDirection= ErrorBarDirection.Minus; chart.Series.Add(errorBar); @@ -351,16 +311,13 @@ The following code illustrates how to set the [`VerticalDirection`](https://help {% highlight xaml %} - - - + {% endhighlight %} {% highlight c# %} ErrorBarSeries errorBarSeries = new ErrorBarSeries(); - errorBarSeries.VerticalDirection= ErrorBarDirection.Plus; chart.Series.Add(errorBar); @@ -389,17 +346,15 @@ N> The default error bar series is Fixed. {% highlight xaml %} - + {% endhighlight %} @@ -407,21 +362,13 @@ Mode="Both" Type="Fixed"> ErrorBarSeries errorBar = new ErrorBarSeries() { - ItemsSource = new ViewModel().EnergyProductions, - XBindingPath = "ID", - YBindingPath = "Coal", - HorizontalErrorValue = 10, - VerticalErrorValue = 40, - Mode = ErrorBarMode.Both, - Type = ErrorBarType.Fixed - }; chart.Series.Add(errorBar); @@ -438,17 +385,15 @@ chart.Series.Add(errorBar); {% highlight xaml %} - + {% endhighlight %} @@ -456,21 +401,13 @@ Mode="Both" Type="Percentage"> ErrorBarSeries errorBar = new ErrorBarSeries() { - ItemsSource = new ViewModel().EnergyProductions, - XBindingPath = "ID", - YBindingPath = "Coal", - HorizontalErrorValue = 10, - VerticalErrorValue = 40, - Mode = ErrorBarMode.Both, - Type = ErrorBarType.Percentage - }; chart.Series.Add(errorBar); @@ -489,17 +426,15 @@ chart.Series.Add(errorBar); {% highlight xaml %} - + {% endhighlight %} @@ -507,21 +442,13 @@ Mode="Both" Type="StandardDeviation"/> ErrorBarSeries errorBar = new ErrorBarSeries() { - ItemsSource = new ViewModel().EnergyProductions, - XBindingPath = "ID", - YBindingPath = "Coal", - HorizontalErrorValue = 10, - VerticalErrorValue = 40, - Mode = ErrorBarMode.Both, - Type = ErrorBarType.StandardDeviation - }; chart.Series.Add(errorBar); @@ -538,17 +465,15 @@ chart.Series.Add(errorBar); {% highlight xaml %} - + {% endhighlight %} @@ -556,21 +481,13 @@ Mode="Both" Type="StandardErrors"/> ErrorBarSeries errorBar = new ErrorBarSeries() { - ItemsSource = new ViewModel().EnergyProductions, - XBindingPath = "ID", - YBindingPath = "Coal", - HorizontalErrorValue = 10, - VerticalErrorValue = 40, - Mode = ErrorBarMode.Both, - Type = ErrorBarType.StandardErrors - }; chart.Series.Add(errorBar); @@ -590,19 +507,15 @@ If the Type is Custom, you have to bind [`HorizontalErrorPathValue`](https://hel {% highlight xaml %} - + {% endhighlight %} @@ -610,21 +523,13 @@ Mode="Both" Type="Custom"/> ErrorBarSeries errorBar = new ErrorBarSeries() { - ItemsSource = new ViewModel().EnergyProductions, - XBindingPath = "ID", - YBindingPath = "Coal", - HorizontalErrorValue = 10, - VerticalErrorValue = 40, - Mode = ErrorBarMode.Both, - Type = ErrorBarType.Custom - }; chart.Series.Add(errorBar); @@ -650,11 +555,7 @@ You can define the LineStyle for the error bar lines using [`HorizontalLineStyle {% highlight xaml %} - - - - - + {% endhighlight %} @@ -663,11 +564,8 @@ You can define the LineStyle for the error bar lines using [`HorizontalLineStyle errorBarSeries.HorizontalLineStyle = new LineStyle() { - Stroke = new SolidColorBrush(Colors.Black), - StrokeThickness = 2 - }; {% endhighlight %} @@ -681,11 +579,7 @@ errorBarSeries.HorizontalLineStyle = new LineStyle() {% highlight xaml %} - - - - - + {% endhighlight %} @@ -694,11 +588,8 @@ errorBarSeries.HorizontalLineStyle = new LineStyle() errorBarSeries.VerticalLineStyle = new LineStyle() { - Stroke = new SolidColorBrush(Colors.Black), - StrokeThickness = 2 - }; {% endhighlight %} @@ -717,11 +608,11 @@ ErrorBar line cap can be customized using [`HorizontalCapLineStyle`](https://hel {% highlight xaml %} - - - + + {% endhighlight %} @@ -730,13 +621,9 @@ LineWidth="10"> errorBarSeries.HorizontalCapLineStyle = new CapLineStyle() { - Stroke = new SolidColorBrush(Colors.Black), - StrokeThickness = 2, - LineWidth = 10 - }; {% endhighlight %} @@ -750,11 +637,11 @@ errorBarSeries.HorizontalCapLineStyle = new CapLineStyle() {% highlight xaml %} - - - + + {% endhighlight %} @@ -763,13 +650,9 @@ LineWidth="15"> errorBarSeries.VerticalCapLineStyle = new CapLineStyle() { - Stroke = new SolidColorBrush(Colors.Black), - StrokeThickness = 3, - LineWidth = 15 - }; {% endhighlight %} diff --git a/wpf/Charts/SeriesTypes/Financial.md b/wpf/Charts/SeriesTypes/Financial.md index a40f33f36..103afb402 100644 --- a/wpf/Charts/SeriesTypes/Financial.md +++ b/wpf/Charts/SeriesTypes/Financial.md @@ -29,15 +29,16 @@ The following code example shows how to use OHLC series: {% highlight xaml %} - + {% endhighlight %} @@ -45,17 +46,13 @@ Label="HiloOpenClose" /> HiLoOpenCloseSeries series = new HiLoOpenCloseSeries() { - ItemsSource = new ViewModel().StockPriceDetails, - XBindingPath = "Date", - - High = "High", Low = "Low", - - Open = "Open", Close = "Close", - + High = "High", + Low = "Low", + Open = "Open", + Close = "Close", Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0X4A)) - }; chart.Series.Add(series); @@ -78,13 +75,15 @@ The values for this series can be bind using [`High`](https://help.syncfusion.co {% highlight xaml %} - + {% endhighlight %} @@ -92,17 +91,13 @@ Interior="#4A4A4A"/> CandleSeries series = new CandleSeries() { - ItemsSource = new ViewModel().StockPriceDetails, - XBindingPath = "Date", - - High = "High", Low = "Low", - - Open = "Open", Close = "Close", - + High = "High", + Low = "Low", + Open = "Open", + Close = "Close", Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0X4A)) - }; chart.Series.Add(series); @@ -117,28 +112,29 @@ chart.Series.Add(series); {% highlight xaml %} - + + {% endhighlight %} {% highlight c# %} CandleSeries series = new CandleSeries() { - ItemsSource = new ViewModel().StockPriceDetails, - XBindingPath = "Date", - High = "High", Low = "Low", - Open = "Open", Close = "Close", - BearFillColor = new SolidColorBrush(Colors.Black), - BullFillColor = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0XBC)) - }; chart.Series.Add(series); @@ -165,16 +161,13 @@ While setting the [`ComparisonMode`](https://help.syncfusion.com/cr/wpf/Syncfusi {% highlight xaml %} - - - + {% endhighlight %} {% highlight c# %} CandleSeries series = new CandleSeries(); - series.ComparisonMode = Syncfusion.UI.Xaml.Charts.FinancialPrice.Open; {% endhighlight %} @@ -193,16 +186,13 @@ While setting the [`ComparisonMode`](https://help.syncfusion.com/cr/wpf/Syncfusi {% highlight xaml %} - - - + {% endhighlight %} {% highlight c# %} CandleSeries series = new CandleSeries(); - series.ComparisonMode = Syncfusion.UI.Xaml.Charts.FinancialPrice.Close; {% endhighlight %} @@ -221,16 +211,13 @@ While setting the [`ComparisonMode`](https://help.syncfusion.com/cr/wpf/Syncfusi {% highlight xaml %} - - - + {% endhighlight %} {% highlight c# %} CandleSeries series = new CandleSeries(); - series.ComparisonMode = Syncfusion.UI.Xaml.Charts.FinancialPrice.High; {% endhighlight %} @@ -249,16 +236,13 @@ series.ComparisonMode = Syncfusion.UI.Xaml.Charts.FinancialPrice.High; {% highlight xaml %} - - - + {% endhighlight %} {% highlight c# %} CandleSeries series = new CandleSeries(); - series.ComparisonMode = Syncfusion.UI.Xaml.Charts.FinancialPrice.Low; {% endhighlight %} diff --git a/wpf/Charts/SeriesTypes/Funnelandpyramid.md b/wpf/Charts/SeriesTypes/Funnelandpyramid.md index aeb925651..bc6422786 100644 --- a/wpf/Charts/SeriesTypes/Funnelandpyramid.md +++ b/wpf/Charts/SeriesTypes/Funnelandpyramid.md @@ -17,11 +17,7 @@ PyramidSeries has the form of a triangle with lines dividing it into sections an {% highlight xaml %} - + {% endhighlight %} @@ -29,13 +25,9 @@ YBindingPath="Percentage"/> PyramidSeries series = new PyramidSeries() { - ItemsSource = new ViewModel().Tax, - XBindingPath = "Category", - YBindingPath = "Percentage" - }; chart.Series.Add(series); @@ -55,13 +47,11 @@ The [`PyramidMode`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts {% highlight xaml %} - + {% endhighlight %} @@ -69,15 +59,10 @@ YBindingPath="Percentage"/> PyramidSeries series = new PyramidSeries() { - ItemsSource = new ViewModel().Tax, - XBindingPath = "Category", - YBindingPath = "Percentage", - PyramidMode = ChartPyramidMode.Surface - }; chart.Series.Add(series); @@ -95,13 +80,11 @@ chart.Series.Add(series); {% highlight xaml %} - + {% endhighlight %} @@ -109,15 +92,10 @@ YBindingPath="Percentage"/> PyramidSeries series = new PyramidSeries() { - ItemsSource = new ViewModel().Tax, - XBindingPath = "Category", - YBindingPath = "Percentage", - PyramidMode = ChartPyramidMode.Linear - }; chart.Series.Add(series); @@ -140,9 +118,7 @@ The following code example shows how to use the funnel series: {% highlight xaml %} - + {% endhighlight %} @@ -150,13 +126,9 @@ YBindingPath="Percentage" /> FunnelSeries series = new FunnelSeries() { - ItemsSource = new ViewModel().List, - XBindingPath = "Category", - YBindingPath = "Percentage", - }; chart.Series.Add(series); @@ -178,11 +150,11 @@ The [`FunnelMode`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts. {% highlight xaml %} - + {% endhighlight %} @@ -190,15 +162,10 @@ YBindingPath="Percentage"/> FunnelSeries series = new FunnelSeries() { - ItemsSource = new ViewModel().List, - XBindingPath = "Category", - YBindingPath = "Percentage", - FunnelMode = ChartFunnelMode.ValueIsHeight - }; chart.Series.Add(series); @@ -215,11 +182,11 @@ chart.Series.Add(series); {% highlight xaml %} - + {% endhighlight %} @@ -227,15 +194,10 @@ YBindingPath="Percentage" /> FunnelSeries series = new FunnelSeries() { - ItemsSource = new ViewModel().List, - XBindingPath = "Category", - YBindingPath = "Percentage", - FunnelMode = ChartFunnelMode.ValueIsWidth - }; chart.Series.Add(series); @@ -261,11 +223,12 @@ The following properties are used to explode the individual segments in Funnel a {% highlight xaml %} - - - + {% endhighlight %} @@ -273,17 +236,11 @@ ExplodeIndex="4" ExplodeOffset="70" YBindingPath="Percentage"> FunnelSeries series = new FunnelSeries() { - ItemsSource = new ViewModel().List, - XBindingPath = "Category", - YBindingPath = "Percentage", - ExplodeIndex = 4, - ExplodeOffset = 70 - }; chart.Series.Add(series); @@ -302,11 +259,11 @@ The gap between each segment using [`GapRatio`](https://help.syncfusion.com/cr/w {% highlight xaml %} - - - + {% endhighlight %} @@ -314,15 +271,10 @@ GapRatio="0.5" YBindingPath="Percentage"> FunnelSeries series = new FunnelSeries() { - ItemsSource = new ViewModel().List, - XBindingPath = "Category", - YBindingPath = "Percentage", - GapRatio = 0.5 - }; chart.Series.Add(series); diff --git a/wpf/Charts/SeriesTypes/GroupingStacked.md b/wpf/Charts/SeriesTypes/GroupingStacked.md index fe9269753..b0d27253f 100644 --- a/wpf/Charts/SeriesTypes/GroupingStacked.md +++ b/wpf/Charts/SeriesTypes/GroupingStacked.md @@ -17,64 +17,81 @@ The following code example shows how to group the stacking series. {% highlight xaml %} - - - - - - - - + + + + + + + + {% endhighlight %} {% highlight c# %} - SfChart chart = new SfChart(); - - StackingColumnSeries series1 = new StackingColumnSeries() - { - ItemsSource = new ViewModel().AnnualDetails, - XBindingPath = "Year", - YBindingPath = "Quarter1", - GroupingLabel = "Group1", - Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A)) - }; - - StackingColumnSeries series2 = new StackingColumnSeries() - { - ItemsSource = new ViewModel().AnnualDetails, - XBindingPath = "Year", - YBindingPath = "Quarter2", - GroupingLabel = "Group1", - Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC)) - }; - - StackingColumnSeries series3 = new StackingColumnSeries() - { - ItemsSource = new ViewModel().AnnualDetails, - XBindingPath = "Year", - YBindingPath = "Quarter3", - GroupingLabel = "Group2", - Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0x7F)) - }; - - StackingColumnSeries series4 = new StackingColumnSeries() - { - ItemsSource = new ViewModel().AnnualDetails, - XBindingPath = "Year", - YBindingPath = "Quarter4", - GroupingLabel = "Group2", - Interior = new SolidColorBrush(Color.FromRgb(0x34, 0x34, 0x34)) - }; - - chart.Series.Add(series1); - chart.Series.Add(series2); - chart.Series.Add(series3); - chart.Series.Add(series4); +SfChart chart = new SfChart(); + +StackingColumnSeries series1 = new StackingColumnSeries() +{ + ItemsSource = new ViewModel().AnnualDetails, + XBindingPath = "Year", + YBindingPath = "Quarter1", + GroupingLabel = "Group1", + Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A)) +}; + +StackingColumnSeries series2 = new StackingColumnSeries() +{ + ItemsSource = new ViewModel().AnnualDetails, + XBindingPath = "Year", + YBindingPath = "Quarter2", + GroupingLabel = "Group1", + Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC)) +}; + +StackingColumnSeries series3 = new StackingColumnSeries() +{ + ItemsSource = new ViewModel().AnnualDetails, + XBindingPath = "Year", + YBindingPath = "Quarter3", + GroupingLabel = "Group2", + Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0x7F)) +}; + +StackingColumnSeries series4 = new StackingColumnSeries() +{ + ItemsSource = new ViewModel().AnnualDetails, + XBindingPath = "Year", + YBindingPath = "Quarter4", + GroupingLabel = "Group2", + Interior = new SolidColorBrush(Color.FromRgb(0x34, 0x34, 0x34)) +}; + +chart.Series.Add(series1); +chart.Series.Add(series2); +chart.Series.Add(series3); +chart.Series.Add(series4); + {% endhighlight %} {% endtabs %} diff --git a/wpf/Charts/SeriesTypes/Other.md b/wpf/Charts/SeriesTypes/Other.md index a867faf87..e87d96af0 100644 --- a/wpf/Charts/SeriesTypes/Other.md +++ b/wpf/Charts/SeriesTypes/Other.md @@ -17,12 +17,9 @@ documentation: ug {% highlight xaml %} - - + {% endhighlight %} @@ -30,11 +27,8 @@ documentation: ug {% highlight c# %} BoxAndWhiskerSeries boxAndWhisker = new BoxAndWhiskerSeries(); - boxAndWhisker.ItemsSource = new BoxWhiskerViewModel().BoxWhiskerData; - boxAndWhisker.XBindingPath = "Department"; - boxAndWhisker.YBindingPath = "Age"; boxWhiskerChart.Series.Add(boxAndWhisker); @@ -65,16 +59,13 @@ The following code illustrates how to define the [`BoxPlotMode`](https://help.sy {% highlight xaml %} - - - + {% endhighlight %} {% highlight c# %} BoxAndWhiskerSeries boxAndWhisker = new BoxAndWhiskerSeries(); - boxAndWhisker.BoxPlotMode = BoxPlotMode.Normal; {% endhighlight %} @@ -91,16 +82,13 @@ The following code illustrates how to define the [`BoxPlotMode`](https://help.sy {% highlight xaml %} - - - + {% endhighlight %} {% highlight c# %} BoxAndWhiskerSeries boxAndWhisker = new BoxAndWhiskerSeries(); - boxAndWhisker.BoxPlotMode = BoxPlotMode.Inclusive; {% endhighlight %} @@ -117,16 +105,13 @@ The Median values of given dataset is viewed by enabling the [`ShowMedian`](http {% highlight xaml %} - - - + {% endhighlight %} {% highlight c# %} BoxAndWhiskerSeries boxAndWhisker = new BoxAndWhiskerSeries(); - boxAndWhisker.ShowMedian = true; {% endhighlight %} @@ -152,16 +137,13 @@ The outlier value in the box plot can be viewed by enabling the [`ShowOutlier`]( {% highlight xaml %} - - - + {% endhighlight %} {% highlight c# %} BoxAndWhiskerSeries boxAndWhisker = new BoxAndWhiskerSeries(); - boxAndWhisker.ShowOutlier = false; {% endhighlight %} @@ -179,29 +161,22 @@ The default appearance of the outlier symbol can be customized by using the [`Ou {% highlight xaml %} - - - - - - - + + - {% endhighlight %} @@ -220,12 +195,10 @@ The following code illustrates how to use the series in chart. {% highlight xaml %} - - + {% endhighlight %} @@ -233,11 +206,8 @@ The following code illustrates how to use the series in chart. {% highlight c# %} WaterfallSeries waterfallSeries = new WaterfallSeries(); - waterfallSeries.ItemsSource = new ViewModel().RevenueDetails; - waterfallSeries.XBindingPath = "Category"; - waterfallSeries.YBindingPath = "Value"; chart.Series.Add(waterfallSeries); @@ -259,16 +229,12 @@ The summary segment can be differentiated by applying the [`SummarySegmentBrush` {% highlight xaml %} - - + {% endhighlight %} @@ -276,15 +242,10 @@ The summary segment can be differentiated by applying the [`SummarySegmentBrush` {% highlight c# %} WaterfallSeries waterfallSeries = new WaterfallSeries(); - waterfallSeries.ItemsSource = new ViewModel().RevenueDetails; - waterfallSeries.XBindingPath = "Category"; - waterfallSeries.YBindingPath = "Value"; - waterfallSeries.SummaryBindingPath = "IsSummary"; - waterfallSeries.SummarySegmentBrush = new SolidColorBrush(Colors.RoyalBlue); chart.Series.Add(waterfallSeries); @@ -305,9 +266,7 @@ The following code illustrates how to change the appearance of the negative segm {% highlight xaml %} - - - + {% endhighlight %} @@ -315,7 +274,6 @@ The following code illustrates how to change the appearance of the negative segm WaterfallSeries waterfallSeries = new WaterfallSeries(); - waterfallSeries.NegativeSegmentBrush = new SolidColorBrush(Colors.Red); {% endhighlight %} @@ -334,24 +292,19 @@ The following code example illustrates how the AllowAutoSum property value can b {% highlight xaml %} - - - + + {% endhighlight %} {% highlight c# %} WaterfallSeries waterfallSeries = new WaterfallSeries(); - waterfallSeries.AllowAutoSum = true; - waterfallSeries.SummaryBindingPath = "IsSummary"; - waterfallSeries.SummarySegmentBrush = new SolidColorBrush(Colors.RoyalBlue); chart.Series.Add(waterfallSeries); @@ -370,16 +323,13 @@ The connector line of series can be enabled or disabled by using its [`ShowConne {% highlight xaml %} - - - + {% endhighlight %} {% highlight c# %} WaterfallSeries waterfallSeries = new WaterfallSeries(); - waterfallSeries.ShowConnector = false; {% endhighlight %} @@ -397,17 +347,11 @@ The connector line can be customized by applying [`ConnectorLineStyle`](https:// {% highlight xaml %} - - - + {% endhighlight %} @@ -415,15 +359,11 @@ The connector line can be customized by applying [`ConnectorLineStyle`](https:// {% highlight c# %} Style style = new Style(typeof(Line)); - style.Setters.Add(new Setter(Line.StrokeProperty, new SolidColorBrush(Colors.Red))); - style.Setters.Add(new Setter(Line.StrokeDashArrayProperty, new DoubleCollection() { 1 })); - style.Setters.Add(new Setter(Line.StrokeThicknessProperty, 2)); WaterfallSeries series = new WaterfallSeries(); - series.ConnectorLineStyle = style; {% endhighlight %} diff --git a/wpf/Charts/SeriesTypes/Placesidebyside.md b/wpf/Charts/SeriesTypes/Placesidebyside.md index eaeae179a..1b25a9ba8 100644 --- a/wpf/Charts/SeriesTypes/Placesidebyside.md +++ b/wpf/Charts/SeriesTypes/Placesidebyside.md @@ -22,47 +22,39 @@ The following code example and image illustrates the placement of series while s {% highlight xaml %} - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + @@ -71,70 +63,46 @@ Label="2014" YBindingPath="postion"/> {% highlight C# %} SfChart chart = new SfChart(); - chart.Header = "Usage of Metals"; - chart.AreaBorderBrush = new SolidColorBrush(Colors.DarkGray); - chart.SideBySideSeriesPlacement = false; - chart.AreaBorderThickness = new Thickness(1); chart.PrimaryAxis = new CategoryAxis() { - Header = "Medals" - }; chart.SecondaryAxis = new NumericalAxis() { - Header = "Usage" - }; chart.Legend = new ChartLegend() { - Visibility = Visibility.Visible - }; ColumnSeries columnSeries1 = new ColumnSeries() { - ItemsSource = new ViewModel().SneakersDetail, - XBindingPath = "Brand", - YBindingPath = "ItemsCount", - Label = "2015", - Interior = new SolidColorBrush(Color.FromRgb(0xbc, 0xbc, 0xbc)), - }; ColumnSeries columnSeries2 = new ColumnSeries() { - ItemsSource = new ViewModel().SneakersDetail, - XBindingPath = "Brand", - YBindingPath = "Position", - Label = "2014", - SegmentSpacing = 0.5, - Interior = new SolidColorBrush(Color.FromRgb(0x4a, 0x4a, 0x4a)), - }; -chart.Series.Add(columnSeries1); - +chart.Series.Add(columnSeries1); chart.Series.Add(columnSeries2); {% endhighlight %} diff --git a/wpf/Charts/SeriesTypes/RadarandPolar.md b/wpf/Charts/SeriesTypes/RadarandPolar.md index 654f711aa..677f52be4 100644 --- a/wpf/Charts/SeriesTypes/RadarandPolar.md +++ b/wpf/Charts/SeriesTypes/RadarandPolar.md @@ -19,15 +19,11 @@ The following code example illustrates the use of radar series: {% highlight xaml %} - - - + {% endhighlight %} @@ -35,15 +31,10 @@ YBindingPath="Tree" > RadarSeries series = new RadarSeries() { - ItemsSource = new ViewModel().PlantDetails, - XBindingPath = "Direction", - YBindingPath = "Tree", - Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0XBC)) - }; chart.Series.Add(series); @@ -64,13 +55,11 @@ N> You can explore our [WPF Radar Chart](https://www.syncfusion.com/wpf-controls {% highlight xaml %} - + {% endhighlight %} @@ -78,15 +67,10 @@ YBindingPath="Tree" /> PolarSeries series = new PolarSeries() { - ItemsSource = new ViewModel().PlantDetails, - XBindingPath = "Direction", - YBindingPath = "Tree", - Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0X4A)) - }; chart.Series.Add(series); @@ -112,15 +96,16 @@ This property used to draw the closed path as below. {% highlight xaml %} - + {% endhighlight %} @@ -128,23 +113,14 @@ StrokeThickness="2" /> PolarSeries series = new PolarSeries() { - ItemsSource = new ViewModel().PlantDetails, - XBindingPath = "Direction", - YBindingPath = "Tree", - IsClosed = false, - DrawType = ChartSeriesDrawType.Line, - Label = "Amount Spent", - StrokeThickness = 2, - Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0X4A)) - }; chart.Series.Add(series); @@ -165,13 +141,14 @@ This property defines type of curve, whether its [`Line`](https://help.syncfusio {% highlight xaml %} - + {% endhighlight %} @@ -179,19 +156,12 @@ XBindingPath="Direction" YBindingPath="Tree" /> PolarSeries series = new PolarSeries() { - ItemsSource = new ViewModel().PlantDetails, - XBindingPath = "Direction", - YBindingPath = "Tree", - IsClosed = True, - DrawType = ChartSeriesDrawType.Area, - Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0X4A)) - }; chart.Series.Add(series); @@ -208,15 +178,15 @@ chart.Series.Add(series); {% highlight xaml %} - + {% endhighlight %} @@ -224,21 +194,13 @@ StrokeThickness="2" /> PolarSeries series = new PolarSeries() { - ItemsSource = new ViewModel().PlantDetails, - XBindingPath = "Direction", - YBindingPath = "Tree", - IsClosed = True, - DrawType = ChartSeriesDrawType.Line, - StrokeThickness = 2, - Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0X4A)) - }; chart.Series.Add(series); @@ -262,35 +224,25 @@ The below snippet explains how the axes of series has been rotated when [`PolarA {% highlight xaml %} - - - + - - - + {% endhighlight %} {% highlight c# %} - chart.PrimaryAxis = new CategoryAxis() - - { - +chart.PrimaryAxis = new CategoryAxis() +{ PolarAngle = ChartPolarAngle.Rotate0 - - }; +}; chart.SecondaryAxis = new NumericalAxis() - { - PolarAngle = ChartPolarAngle.Rotate0 - }; {% endhighlight %} @@ -309,35 +261,25 @@ The below snippet explains how the axes of series has been rotated when [`PolarA {% highlight xaml %} - - - + - - - + {% endhighlight %} {% highlight c# %} - chart.PrimaryAxis = new CategoryAxis() - - { - +chart.PrimaryAxis = new CategoryAxis() +{ PolarAngle = ChartPolarAngle.Rotate90 - - }; +}; chart.SecondaryAxis = new NumericalAxis() - { - PolarAngle = ChartPolarAngle.Rotate90 - }; {% endhighlight %} @@ -356,35 +298,25 @@ The below snippet explains how the axes of series has been rotated when [`PolarA {% highlight xaml %} - - - + - - - + {% endhighlight %} {% highlight c# %} - chart.PrimaryAxis = new CategoryAxis() - - { - +chart.PrimaryAxis = new CategoryAxis() +{ PolarAngle = ChartPolarAngle.Rotate180 - - }; +}; chart.SecondaryAxis = new NumericalAxis() - { - PolarAngle = ChartPolarAngle.Rotate180 - }; {% endhighlight %} @@ -403,35 +335,25 @@ The below snippet explains how the axes of series has been rotated, when [`Polar {% highlight xaml %} - - - + - - - + {% endhighlight %} {% highlight c# %} - chart.PrimaryAxis = new CategoryAxis() - - { - +chart.PrimaryAxis = new CategoryAxis() +{ PolarAngle = ChartPolarAngle.Rotate270 - - }; +}; chart.SecondaryAxis = new NumericalAxis() - { - PolarAngle = ChartPolarAngle.Rotate270 - }; {% endhighlight %} diff --git a/wpf/Charts/SeriesTypes/Range.md b/wpf/Charts/SeriesTypes/Range.md index 141ad0cc0..e2e9a8b5b 100644 --- a/wpf/Charts/SeriesTypes/Range.md +++ b/wpf/Charts/SeriesTypes/Range.md @@ -19,13 +19,14 @@ The following code example shows the use of HiLo series: {% highlight xaml %} - + {% endhighlight %} @@ -33,17 +34,12 @@ High="High" Low="Low" /> HiLoSeries series = new HiLoSeries() { - ItemsSource = new ViewModel().StockPriceDetails, - XBindingPath = "Date", - - High = "High", Low = "Low", - + High = "High", + Low = "Low", StrokeThickness = 3, - Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0X4A)) - }; chart.Series.Add(series); @@ -64,11 +60,12 @@ N> You can explore our [WPF HiLo Chart](https://www.syncfusion.com/wpf-controls/ {% highlight xaml %} - + {% endhighlight %} @@ -76,15 +73,11 @@ High="High" Low="Low" /> RangeColumnSeries series = new RangeColumnSeries() { - ItemsSource = new ViewModel().FinancialDatas, - XBindingPath = "Time", - - High = "High", Low = "Low", - + High = "High", + Low = "Low", Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A)) - }; chart.Series.Add(series); @@ -106,13 +99,12 @@ N> You can explore our [WPF Range Column Chart](https://www.syncfusion.com/wpf-c {% highlight xaml %} - + {% endhighlight %} @@ -120,15 +112,11 @@ ItemsSource="{Binding Products}" /> RangeAreaSeries series = new RangeAreaSeries() { - ItemsSource = new ViewModel().Products, - XBindingPath = "ProdName", - - High = "Stock", Low = "Price", - + High = "Stock", + Low = "Price", Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC)) - }; chart.Series.Add(series); @@ -149,15 +137,14 @@ The APIs present in the RangeArea series are, {% highlight xaml %} - + {% endhighlight %} @@ -165,17 +152,12 @@ ItemsSource="{Binding Products}" /> RangeAreaSeries series = new RangeAreaSeries() { - ItemsSource = new ViewModel().Products, - XBindingPath = "ProdName", - - High = "Stock", Low = "Price", - + High = "Stock", + Low = "Price", HighValueInterior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)), - LowValueInterior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A)) - }; chart.Series.Add(series); @@ -196,33 +178,24 @@ N> You can explore our [WPF Range Area Chart](https://www.syncfusion.com/wpf-con {% highlight xaml %} - + {% endhighlight %} {% highlight c# %} SplineRangeAreaSeries splineRangeAreaSeries = new SplineRangeAreaSeries(); - splineRangeAreaSeries.ItemsSource = new ViewModel().Products; - splineRangeAreaSeries.XBindingPath = "ProdName"; - splineRangeAreaSeries.High = "Stock"; - splineRangeAreaSeries.Low = "Price"; - splineRangeAreaSeries.Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC)); - chart.Series.Add(splineRangeAreaSeries); {% endhighlight %} diff --git a/wpf/Charts/SeriesTypes/Stacking.md b/wpf/Charts/SeriesTypes/Stacking.md index bfca5f197..44b0e9cac 100644 --- a/wpf/Charts/SeriesTypes/Stacking.md +++ b/wpf/Charts/SeriesTypes/Stacking.md @@ -19,35 +19,23 @@ The following code example illustrates how to use [`StackingLineSeries`](https:/ {% highlight xaml %} - - -XBindingPath="MonthlyExpenses" - -YBindingPath="Mother" - -Interior="#BCBCBC" - -ItemsSource="{Binding Data}"/> + + XBindingPath="MonthlyExpenses" + YBindingPath="Son" + Interior="#7F7F7F" + ItemsSource="{Binding Data}"/> {% endhighlight %} @@ -55,47 +43,30 @@ ItemsSource="{Binding Data}" /> StackingLineSeries series1 = new StackingLineSeries() { - ItemsSource = new ViewModel().Data, - XBindingPath = "MonthlyExpenses", - - YBindingPath ="Father", - + YBindingPath = "Father", Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0X4A)) - }; StackingLineSeries series2 = new StackingLineSeries() -{ - +{ ItemsSource = new ViewModel().Data, - XBindingPath = "MonthlyExpenses", - YBindingPath = "Mother", - - Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0XBC)) - + Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0XBC)) }; StackingLineSeries series3 = new StackingLineSeries() { - ItemsSource = new ViewModel().Data, - XBindingPath = "MonthlyExpenses", - YBindingPath = "Son", - Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0X7F)) - }; chart.Series.Add(series1); - chart.Series.Add(series2); - chart.Series.Add(series3); {% endhighlight %} @@ -114,30 +85,23 @@ N> You can explore our [WPF Stacked Line Chart](https://www.syncfusion.com/wpf-c {% highlight xaml %} - - - + - -XBindingPath="MonthlyExpenses" - -YBindingPath="Son" - -Interior="#7F7F7F"/> + {% endhighlight %} @@ -145,47 +109,30 @@ Interior="#7F7F7F"/> StackingLine100Series series1 = new StackingLine100Series() { - ItemsSource = new ViewModel().Data, - XBindingPath = "MonthlyExpenses", - YBindingPath = "Father", - Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0X4A)) - }; StackingLine100Series series2 = new StackingLine100Series() { - ItemsSource = new ViewModel().Data, - XBindingPath = "MonthlyExpenses", - YBindingPath = "Mother", - Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0XBC)) - }; StackingLine100Series series3 = new StackingLine100Series() { - ItemsSource = new ViewModel().Data, - XBindingPath = "MonthlyExpenses", - YBindingPath = "Son", - Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0X7F)) - }; chart.Series.Add(series1); - chart.Series.Add(series2); - chart.Series.Add(series3); {% endhighlight %} @@ -206,33 +153,23 @@ The following code example illustrates how to use StackingColumnSeries: {% highlight xaml %} - + + Interior="#BCBCBC" + XBindingPath="CountryName" + YBindingPath="SilverMedals" + ItemsSource="{Binding MedalDetails}"/> + Interior="#7F7F7F" + XBindingPath="CountryName" + YBindingPath="BronzeMedals" + ItemsSource="{Binding MedalDetails}"/> {% endhighlight %} @@ -240,47 +177,30 @@ YBindingPath="BronzeMedals" /> StackingColumnSeries series1 = new StackingColumnSeries() { - ItemsSource = new ViewModel().MedalDetails, - XBindingPath = "CountryName", - YBindingPath ="GoldMedals", - Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0X4A)) - }; StackingColumnSeries series2 = new StackingColumnSeries() { - ItemsSource = new ViewModel().MedalDetails, - XBindingPath = "CountryName", - YBindingPath = "SilverMedals", - Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0XBC)) - }; StackingColumnSeries series3 = new StackingColumnSeries() { - ItemsSource = new ViewModel().MedalDetails, - XBindingPath = "CountryName", - YBindingPath = "BronzeMedals", - Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0X7F)) - }; chart.Series.Add(series1); - chart.Series.Add(series2); - chart.Series.Add(series3); {% endhighlight %} @@ -299,19 +219,17 @@ N> You can explore our [WPF Stacked Column Chart](https://www.syncfusion.com/wpf {% highlight xaml %} - -ItemsSource="{Binding MedalDetails}"/> - - + {% endhighlight %} @@ -319,47 +237,30 @@ Interior="#BCBCBC"/> StackingColumn100Series series1 = new StackingColumn100Series() { - ItemsSource = new ViewModel().MedalDetails, - XBindingPath = "CountryName", - YBindingPath = "GoldMedals", - Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0X4A)) - }; StackingColumn100Series series2 = new StackingColumn100Series() { - ItemsSource = new ViewModel().MedalDetails, - XBindingPath = "CountryName", - YBindingPath = "SilverMedals", - Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0XBC)) - }; StackingColumn100Series series3 = new StackingColumn100Series() { - ItemsSource = new ViewModel().MedalDetails, - XBindingPath = "CountryName", - YBindingPath = "BronzeMedals", - Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0X7F)) - }; chart.Series.Add(series1); - chart.Series.Add(series2); - chart.Series.Add(series3); {% endhighlight %} @@ -378,35 +279,23 @@ N> You can explore our [WPF 100% Stacked Column Chart](https://www.syncfusion.co {% highlight xaml %} - + - + - - - - - - - + {% endhighlight %} @@ -414,47 +303,30 @@ ItemsSource="{Binding MedalDetails}" > StackingBarSeries series1 = new StackingBarSeries() { - ItemsSource = new ViewModel().MedalDetails, - XBindingPath = "CountryName", - YBindingPath = "GoldMedals", - Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0X4A)) - }; StackingBarSeries series2 = new StackingBarSeries() { - ItemsSource = new ViewModel().MedalDetails, - XBindingPath = "CountryName", - YBindingPath = "SilverMedals", - Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0XBC)) - }; StackingBarSeries series3 = new StackingBarSeries() { - ItemsSource = new ViewModel().MedalDetails, - XBindingPath = "CountryName", - YBindingPath = "BronzeMedals", - Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0X7F)) - }; chart.Series.Add(series1); - chart.Series.Add(series2); - chart.Series.Add(series3); {% endhighlight %} @@ -473,29 +345,23 @@ N> You can explore our [WPF Stacked Bar Chart](https://www.syncfusion.com/wpf-co {% highlight xaml %} - - - -YBindingPath="SilverMedals" + -ItemsSource="{Binding MedalDetails}" /> - - + {% endhighlight %} @@ -503,49 +369,31 @@ ItemsSource="{Binding MedalDetails}" /> StackingBar100Series series1 = new StackingBar100Series() { - ItemsSource = new ViewModel().MedalDetails, - XBindingPath = "CountryName", - YBindingPath = "GoldMedals", - Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0X4A)) - }; StackingBar100Series series2 = new StackingBar100Series() { - ItemsSource = new ViewModel().MedalDetails, - XBindingPath = "CountryName", - YBindingPath = "SilverMedals", - Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0XBC)) - }; StackingBar100Series series3 = new StackingBar100Series() { - ItemsSource = new ViewModel().MedalDetails, - XBindingPath = "CountryName", - YBindingPath = "BronzeMedals", - Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0X7F)) - }; chart.Series.Add(series1); - chart.Series.Add(series2); - chart.Series.Add(series3); - {% endhighlight %} {% endtabs %} @@ -560,25 +408,23 @@ chart.Series.Add(series3); {% highlight xaml %} - + - -XBindingPath="Month" YBindingPath="Car" - -ItemsSource="{Binding Accidents}" /> - - + {% endhighlight %} @@ -586,47 +432,30 @@ ItemsSource="{Binding Accidents}" /> StackingAreaSeries series1 = new StackingAreaSeries() { - ItemsSource = new ViewModel().Accidents, - XBindingPath = "Month", - YBindingPath = "Bus", - Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0X4A)) - }; StackingAreaSeries series2 = new StackingAreaSeries() { - ItemsSource = new ViewModel().Accidents, - XBindingPath = "Month", - YBindingPath = "Car", - Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0XBC)) - }; StackingAreaSeries series3 = new StackingAreaSeries() { - ItemsSource = new ViewModel().Accidents, - XBindingPath = "Month", - YBindingPath = "Truck", - Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0X7F)) - }; chart.Series.Add(series1); - chart.Series.Add(series2); - chart.Series.Add(series3); {% endhighlight %} @@ -647,29 +476,23 @@ The following code example shows the way to add stacking area 100 series: {% highlight xaml %} - -YBindingPath="Bus" + -ItemsSource="{Binding Accidents}" - -/> - - - - + {% endhighlight %} @@ -677,47 +500,30 @@ ItemsSource="{Binding Accidents}" /> StackingArea100Series series1 = new StackingArea100Series() { - ItemsSource = new ViewModel().Accidents, - XBindingPath = "Month", - YBindingPath = "Bus", - Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0X4A)) - }; StackingArea100Series series2 = new StackingArea100Series() { - ItemsSource = new ViewModel().Accidents, - XBindingPath = "Month", - YBindingPath = "Car", - Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0XBC)) - }; StackingArea100Series series3 = new StackingArea100Series() { - ItemsSource = new ViewModel().Accidents, - XBindingPath = "Month", - YBindingPath = "Truck", - Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0X7F)) - }; chart.Series.Add(series1); - chart.Series.Add(series2); - chart.Series.Add(series3); {% endhighlight %} @@ -732,31 +538,32 @@ You can draw open curve like Area using this [`IsClosed`](https://help.syncfusio {% highlight xaml %} - - - - - + + + + + {% endhighlight %} @@ -764,65 +571,39 @@ ItemsSource="{Binding Accidents}" /> StackingAreaSeries series1 = new StackingAreaSeries() { - ItemsSource = new ViewModel().Accidents, - XBindingPath = "Month", - YBindingPath = "Bus", - Stroke = new SolidColorBrush(Colors.Black), - StrokeThickness = 3, - IsClosed = false, - Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0XBC)) - }; StackingAreaSeries series2 = new StackingAreaSeries() { - ItemsSource = new ViewModel().Accidents, - XBindingPath = "Month", - YBindingPath = "Car", - Stroke = new SolidColorBrush(Colors.White), - StrokeThickness = 3, - IsClosed = false, - Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0X77)) - }; StackingAreaSeries series3 = new StackingAreaSeries() { - ItemsSource = new ViewModel().Accidents, - XBindingPath = "Month", - YBindingPath = "Truck", - Stroke = new SolidColorBrush(Colors.Black), - StrokeThickness = 3, - IsClosed = false, - Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0X7F)) - }; chart.Series.Add(series1); - chart.Series.Add(series2); - chart.Series.Add(series3); {% endhighlight %} From 17e7922e186678fdc7004761d5137c24a660a83f Mon Sep 17 00:00:00 2001 From: SivaThennarasu Date: Fri, 17 Apr 2026 10:15:39 +0530 Subject: [PATCH 6/7] Changed the alignment of the Legend.md File --- wpf/Charts/Legend.md | 461 ++++++++++++++----------------------------- 1 file changed, 143 insertions(+), 318 deletions(-) diff --git a/wpf/Charts/Legend.md b/wpf/Charts/Legend.md index fedb26bc5..91d8296b7 100644 --- a/wpf/Charts/Legend.md +++ b/wpf/Charts/Legend.md @@ -18,9 +18,7 @@ You can define the legend using the following code example. {% highlight xaml %} - - - + {% endhighlight %} @@ -28,7 +26,6 @@ You can define the legend using the following code example. {% highlight c# %} SfChart chart = new SfChart(); - chart.Legend = new ChartLegend(); {% endhighlight %} @@ -53,17 +50,16 @@ This can be customized using the [`LegendIcon`](https://help.syncfusion.com/cr/w {% highlight xaml %} - + + + - - - - - + {% endhighlight %} @@ -74,17 +70,11 @@ chart.Legend = new ChartLegend(); SplineSeries splineSeries = new SplineSeries() { - Label = "Gold", - ItemsSource = new ViewModel().List, - XBindingPath = "Year", - YBindingPath = "India", - LegendIcon = ChartLegendIcon.Diamond - }; chart.Series.Add(splineSeries); @@ -113,26 +103,20 @@ The following code example illustrates the customization of legend icon. - - - + - - + {% endhighlight %} @@ -141,29 +125,17 @@ The following code example illustrates the customization of legend icon. chart.Legend = new ChartLegend() { - IconHeight = 10, - IconWidth = 10, - Margin = new Thickness(0, 0, 0, 5), - HorizontalAlignment = HorizontalAlignment.Center, - VerticalAlignment = VerticalAlignment.Center, - DockPosition = ChartDock.Top, - IconVisibility = Visibility.Visible, - CornerRadius = new CornerRadius(5), - ItemMargin = new Thickness(10), - BorderThickness = new Thickness(1), - BorderBrush = new SolidColorBrush(Colors.Black) - }; {% endhighlight %} @@ -179,13 +151,8 @@ The visibility of the legend icon can be changed by setting [`IconVisibility`](h {% highlight xaml %} - - - - + {% endhighlight %} @@ -194,13 +161,9 @@ The visibility of the legend icon can be changed by setting [`IconVisibility`](h chart.Legend = new ChartLegend() { - IconHeight = 8, - IconWidth = 8, - IconVisibility = Visibility.Collapsed, - }; {% endhighlight %} @@ -221,33 +184,27 @@ We can add custom icon for the legend using [`LegendIconTemplate`](https://help. - - - - + - - + - - - - + - + {% endhighlight %} @@ -256,15 +213,10 @@ We can add custom icon for the legend using [`LegendIconTemplate`](https://help. SplineSeries series = new SplineSeries() { - ItemsSource = new ViewModel().List, - XBindingPath = "Year", - YBindingPath = "India", - LegendIconTemplate = chart.Resources["iconTemplate"] as DataTemplate - }; chart.Series.Add(series); @@ -285,16 +237,14 @@ This allows us to specify the label for each series which is to be displayed in {% highlight xaml %} - - - - - + - + {% endhighlight %} @@ -304,15 +254,10 @@ chart.Legend = new ChartLegend(); SplineSeries splineSeries = new SplineSeries() { - Label = "Spline", - ItemsSource = new ViewModel().List, - XBindingPath = "Year", - YBindingPath = "India", - }; chart.Series.Add(splineSeries); @@ -335,9 +280,7 @@ We can enable it by using the [`CheckBoxVisibility`](https://help.syncfusion.com {% highlight xaml %} - - - + {% endhighlight %} @@ -346,9 +289,7 @@ We can enable it by using the [`CheckBoxVisibility`](https://help.syncfusion.com chart.Legend = new ChartLegend() { - CheckBoxVisibility = Visibility.Visible - }; {% endhighlight %} @@ -374,9 +315,7 @@ We can enable the [`ToggleSeriesVisibility`](https://help.syncfusion.com/cr/wpf/ {% highlight xaml %} - - - + {% endhighlight %} @@ -385,9 +324,7 @@ We can enable the [`ToggleSeriesVisibility`](https://help.syncfusion.com/cr/wpf/ chart.Legend = new ChartLegend() { - ToggleSeriesVisibility = true - }; {% endhighlight %} @@ -417,9 +354,7 @@ By default, it will be displayed outside and positioned at top (using [`DockPosi {% highlight xaml %} - - - + {% endhighlight %} @@ -428,9 +363,7 @@ By default, it will be displayed outside and positioned at top (using [`DockPosi chart.Legend = new ChartLegend() { - LegendPosition = LegendPosition.Inside - }; {% endhighlight %} @@ -452,9 +385,7 @@ To display the legend at the bottom, you can set the [`DockPosition`](https://he {% highlight xaml %} - - - + {% endhighlight %} @@ -463,9 +394,7 @@ To display the legend at the bottom, you can set the [`DockPosition`](https://he chart.Legend = new ChartLegend() { - DockPosition = ChartDock.Bottom - }; {% endhighlight %} @@ -486,9 +415,9 @@ Offset specifies x or y distance from origin. {% highlight xaml %} - - - + {% endhighlight %} @@ -497,13 +426,9 @@ Offset specifies x or y distance from origin. chart.Legend = new ChartLegend() { - DockPosition = ChartDock.Floating, - OffsetX = 30, - OffsetY = 10 - }; {% endhighlight %} @@ -525,19 +450,15 @@ You can define the [`Header`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.X - - - - - - - - - - - + + + + + @@ -549,19 +470,13 @@ ChartLegend legend = new ChartLegend(); TextBlock textBlock = new TextBlock() { - Text = "Medals", - HorizontalAlignment = HorizontalAlignment.Center, - VerticalAlignment = VerticalAlignment.Center, - Margin = new Thickness(15) - }; legend.Header = textBlock; - chart.Legend = legend; {% endhighlight %} @@ -582,35 +497,27 @@ The following code example shows how to create multiple legends in a single char {% highlight xaml %} - - - - - - - + + + - - - - - + + + - - - - - - - + + @@ -621,15 +528,12 @@ The following code example shows how to create multiple legends in a single char ChartLegendCollection legendCollection = new ChartLegendCollection(); ChartLegend legend1 = new ChartLegend(); - SfChart.SetColumn(legend1, 0); ChartLegend legend2 = new ChartLegend(); - SfChart.SetColumn(legend2, 1); legendCollection.Add(legend1); - legendCollection.Add(legend2); chart.Legend = legendCollection; @@ -637,38 +541,25 @@ chart.Legend = legendCollection; ColumnSeries columnSeries = new ColumnSeries() { Label = "Legend1", - ItemsSource = new ViewModel().SneakersDetail, - XBindingPath = "Brand", - YBindingPath = "ItemsCount1", - Interior = new SolidColorBrush(Color.FromRgb(0x4a, 0x4a, 0x4a)), - }; CategoryAxis axis = new CategoryAxis(); - SfChart.SetColumn(axis, 1); SplineSeries splineSeries = new SplineSeries() { - Label = "Legend1", - ItemsSource = new ViewModel().SneakersDetail, - XBindingPath = "Brand", - YBindingPath = "ItemsCount", - XAxis = axis - }; chart.Series.Add(columnSeries); - chart.Series.Add(splineSeries); {% endhighlight %} @@ -689,14 +580,13 @@ The following code snippets explains how the legends displaying for accumulation {% highlight xaml %} - - - + - + {% endhighlight %} @@ -706,13 +596,9 @@ chart.Legend = new ChartLegend(); PieSeries pieSeries = new PieSeries() { - ItemsSource = new ViewModel().Tax, - XBindingPath = "Category", - YBindingPath = "Percentage" - }; chart.Series.Add(pieSeries); @@ -736,28 +622,23 @@ property as shown in below example. {% highlight xaml %} - - - - - + - - + - + {% endhighlight %} @@ -768,36 +649,23 @@ chart.Legend = new ChartLegend(); SplineSeries splineSeries = new SplineSeries() { - Label = "Gold", - ItemsSource = new ViewModel().List, - XBindingPath = "Year", - YBindingPath = "India", - VisibilityOnLegend = Visibility.Collapsed - }; ColumnSeries columnSeries = new ColumnSeries() { - Label = "Silver", - ItemsSource = new ViewModel().List, - XBindingPath = "Year", - YBindingPath = "America", - VisibilityOnLegend = Visibility.Visible - }; chart.Series.Add(splineSeries); - chart.Series.Add(columnSeries); {% endhighlight %} @@ -816,9 +684,7 @@ Orientation of the Legend can be vertical or horizontal. By default the [`Orient {% highlight xaml %} - - - + {% endhighlight %} @@ -827,9 +693,7 @@ Orientation of the Legend can be vertical or horizontal. By default the [`Orient chart.Legend = new ChartLegend() { - Orientation = ChartOrientation.Vertical - }; {% endhighlight %} @@ -849,48 +713,36 @@ You can customize each legend item using `ItemTemplate` property in ChartLegend {% highlight xaml %} - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + - - - + - {% endhighlight %} @@ -901,39 +753,25 @@ SfChart chart = new SfChart(); chart.Legend = new ChartLegend() { + ItemTemplate = chart.Resources["itemTemplate"] as DataTemplate +}; - ItemTemplate = chart.Resources["itemTemplate"] as DataTemplate - -}; - -public class ImageConverter:IValueConverter - +public class ImageConverter : IValueConverter { - - public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) - - { - - LegendItem item = value as LegendItem; - - if (item.Label == "Gold") - - return new BitmapImage(new Uri(("gold_symb.png"),UriKind.RelativeOrAbsolute)); - - else - - return new BitmapImage(new Uri(("silver_symb.png"), UriKind.RelativeOrAbsolute)); - - } - - public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) - - { - - return value; - - } - + public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) + { + LegendItem item = value as LegendItem; + + if (item.Label == "Gold") + return new BitmapImage(new Uri(("gold_symb.png"), UriKind.RelativeOrAbsolute)); + else + return new BitmapImage(new Uri(("silver_symb.png"), UriKind.RelativeOrAbsolute)); + } + + public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) + { + return value; + } } @@ -953,24 +791,16 @@ When there is more number of legends, the legend exceeds the chart will be cropp {% highlight xaml %} - - - - - + - - - - + - - + {% endhighlight %} @@ -980,9 +810,7 @@ SfChart chart = new SfChart(); chart.Legend = new ChartLegend() { - ItemsPanel = chart.Resources["itemPanelTemplate"] as ItemsPanelTemplate - }; {% endhighlight %} @@ -998,19 +826,16 @@ The legend item is not showing because the chart view is running in the backgrou {% highlight c# %} ChartWindow chartWindow = new ChartWindow(); - chartWindow.DataContext = measurementChart; - chartWindow.Content = new AutoChart(); - chartWindow.Content = new SfChart() { - . . . +s . . . } Action action = chartWindow.Show; -Application.Current.Dispatcher.BeginInvoke(action, Array.Empty()); +Application.Current.Dispatcher.BeginInvoke(action, Array.Empty()); {% endhighlight %} From 8755ec38026a85019f8f2b7023ebfb5610982d26 Mon Sep 17 00:00:00 2001 From: SivaThennarasu Date: Tue, 21 Apr 2026 16:32:47 +0530 Subject: [PATCH 7/7] change some value in the file Charts/SeriesTypes/PieandDoughnut.md --- wpf/Charts/SeriesTypes/PieandDoughnut.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/wpf/Charts/SeriesTypes/PieandDoughnut.md b/wpf/Charts/SeriesTypes/PieandDoughnut.md index 293775b32..239fc22fa 100644 --- a/wpf/Charts/SeriesTypes/PieandDoughnut.md +++ b/wpf/Charts/SeriesTypes/PieandDoughnut.md @@ -121,8 +121,8 @@ The small segments in the pie chart can be grouped into the “others” categor {% highlight c# %} -pieSeries.GroupMode = PieGroupMode.Angle; -pieSeries.GroupTo = 30; +pieSeries.GroupMode = PieGroupMode.Value; +pieSeries.GroupTo = 1000; ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() {