From 6764347eeb4493ce0e22d9b7e7e87925656e07f8 Mon Sep 17 00:00:00 2001 From: mercy-orejo Date: Mon, 9 Feb 2026 16:42:09 +0300 Subject: [PATCH 01/53] Task(216023)-SEO-Bing-Reports-Help-Domain-Title-tag-has-additional-tag-WPF-Docs --- wpf/Step-ProgressBar/Data-Binding.md | 2 +- wpf/Step-ProgressBar/Getting-Started.md | 2 +- wpf/Step-ProgressBar/Overview.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/wpf/Step-ProgressBar/Data-Binding.md b/wpf/Step-ProgressBar/Data-Binding.md index fba26d1cfa..1798fb7101 100644 --- a/wpf/Step-ProgressBar/Data-Binding.md +++ b/wpf/Step-ProgressBar/Data-Binding.md @@ -1,6 +1,6 @@ --- layout: post -title: Data Binding in WPF Step ProgressBar control | Syncfusion®; +title: Data Binding in WPF Step ProgressBar control | Syncfusion description: Learn here all about Data Binding support in Syncfusion®; WPF Step ProgressBar (SfStepProgressBar) control and more. platform: wpf control: Step ProgressBar diff --git a/wpf/Step-ProgressBar/Getting-Started.md b/wpf/Step-ProgressBar/Getting-Started.md index ca8b5379c2..0014f5d083 100644 --- a/wpf/Step-ProgressBar/Getting-Started.md +++ b/wpf/Step-ProgressBar/Getting-Started.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting Started with WPF Step ProgressBar control | Syncfusion®; +title: Getting Started with WPF Step ProgressBar control | Syncfusion description: Learn here about getting started with Syncfusion®; WPF Step ProgressBar (SfStepProgressBar) control, its elements and more. platform: wpf control: SfStepProgressBar diff --git a/wpf/Step-ProgressBar/Overview.md b/wpf/Step-ProgressBar/Overview.md index 281167f687..7e9440b6d1 100644 --- a/wpf/Step-ProgressBar/Overview.md +++ b/wpf/Step-ProgressBar/Overview.md @@ -1,6 +1,6 @@ --- layout: post -title: About WPF Step ProgressBar control | Syncfusion®; +title: About WPF Step ProgressBar control | Syncfusion description: Learn here all about introduction of Syncfusion®; WPF Step ProgressBar (SfStepProgressBar) control, its elements and more. platform: WPF control: SfStepProgressBar From 627d053507a543a8375c35f527e62f882ada01bc Mon Sep 17 00:00:00 2001 From: mercy-orejo Date: Thu, 19 Mar 2026 09:42:56 +0300 Subject: [PATCH 02/53] Task(218028);SERPSTAT-Issue-fixes-Help-Domain-Server-Status-Code-Error-WPF-Docs --- wpf/MaskedTextBox/Getting-Started.md | 2 +- wpf/Syntax-Editor/Getting-Started.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/wpf/MaskedTextBox/Getting-Started.md b/wpf/MaskedTextBox/Getting-Started.md index fdd8f7e237..9eae0119f3 100644 --- a/wpf/MaskedTextBox/Getting-Started.md +++ b/wpf/MaskedTextBox/Getting-Started.md @@ -134,7 +134,7 @@ sfMaskedEdit.Mask = @"-?\d+\.?\d*"; Here, the `SfMaskedEdit` accept the positive and negative whole or float type numbers. -N> Please refer the [Restrict the user to enter valid data](https://help.syncfusion.com/wpf/maskedtextbox/working-with-sfmaskededit#restrict-the-user-to-enter-valid-data) page to know more about the various mask pattern with examples. +N> Please refer the [Restrict the user to enter valid data](https://help.syncfusion.com/wpf/maskedtextbox/input-restriction#restrict-the-user-to-enter-valid-data) page to know more about the various mask pattern with examples. N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/InputOptions) in GitHub diff --git a/wpf/Syntax-Editor/Getting-Started.md b/wpf/Syntax-Editor/Getting-Started.md index 11fd4110e2..8781a60c76 100644 --- a/wpf/Syntax-Editor/Getting-Started.md +++ b/wpf/Syntax-Editor/Getting-Started.md @@ -15,7 +15,7 @@ This section explains how to create an interactive code editor application like Refer to the [Control Dependencies](https://help.syncfusion.com/wpf/control-dependencies#edit-control) section to get the list of assemblies or NuGet package that needs to be added as a reference to use the control in any application. -Refer to this [documentation](https://help.syncfusion.com/wpf/visual-studio-integration/nuget-packages) to find more details about installing nuget packages in a WPF application. +Refer to this [documentation](https://help.syncfusion.com/wpf/installation/install-nuget-packages) to find more details about installing nuget packages in a WPF application. ## Creating simple application with EditControl From b55409fcabae2ff4296cffd4719fb9d65464f7e5 Mon Sep 17 00:00:00 2001 From: mercy-orejo Date: Tue, 24 Mar 2026 16:49:00 +0300 Subject: [PATCH 03/53] added other features --- wpf/Color-Picker-Palette/Getting-Started.md | 2 +- wpf/Diagram/Getting-Started.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/wpf/Color-Picker-Palette/Getting-Started.md b/wpf/Color-Picker-Palette/Getting-Started.md index 2ea1679232..b7cfbb6c8f 100644 --- a/wpf/Color-Picker-Palette/Getting-Started.md +++ b/wpf/Color-Picker-Palette/Getting-Started.md @@ -290,7 +290,7 @@ colorPickerPalette.Height = 40; ![WPF Color Picker Palette with more color panel](getting-started_images/wpf-color-picker-palette-window.gif) -N> We can show or hide all color panels. Refer the [Dealing with ColorPickerPalette](https://help.syncfusion.com/wpf/color-picker-palette/dealing-with-colorpickerpalette) page that explains the panel visibility support. +N> We can show or hide all color panels. Refer the [Dealing with ColorPickerPalette](https://help.syncfusion.com/wpf/color-picker-palette/working-with-colorpickerpalette) page that explains the panel visibility support. ## Reset selected color diff --git a/wpf/Diagram/Getting-Started.md b/wpf/Diagram/Getting-Started.md index cd2ec03cbc..5af1c08a55 100644 --- a/wpf/Diagram/Getting-Started.md +++ b/wpf/Diagram/Getting-Started.md @@ -14,7 +14,7 @@ documentation: ug Refer to the [control dependencies](https://help.syncfusion.com/wpf/control-dependencies#sfdiagram) section to get the list of assemblies or NuGet package that needs to be added as a reference to use the control in any application. You can find more details about installing the NuGet package in a WPF application in the following link: -[How to install nuget packages](https://help.syncfusion.com/wpf/visual-studio-integration/nuget-packages) +[How to install nuget packages](https://help.syncfusion.com/wpf/installation/install-nuget-packages) The following section helps you to build your application with SfDiagram. From 02b599867f9c095fcde283d0d327549ce09f48d9 Mon Sep 17 00:00:00 2001 From: mercy-orejo Date: Mon, 30 Mar 2026 12:02:41 +0300 Subject: [PATCH 04/53] Task(218028);SERPSTAT-Issue-fixes-Help-Domain-Redirect-Error-WPF-1 --- wpf/DataGrid/Export-To-PDF.md | 6 +++--- wpf/Welcome-to-Syncfusion-Essential-WPF.md | 10 +++++----- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/wpf/DataGrid/Export-To-PDF.md b/wpf/DataGrid/Export-To-PDF.md index 3c6c950ee1..7ee89e62f6 100644 --- a/wpf/DataGrid/Export-To-PDF.md +++ b/wpf/DataGrid/Export-To-PDF.md @@ -289,7 +289,7 @@ document.Save("Sample.pdf"); {% endhighlight %} {% endtabs %} -You can refer [PDF documentation](https://help.syncfusion.com/file-formats/pdf/open-and-save-pdf-file-in-c-sharp-vb-net#saving-a-pdf-document-to-file-system). +You can refer [PDF documentation](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/wpf/saving-the-pdf-document). ### Save as stream @@ -304,7 +304,7 @@ fileStream.Close(); {% endhighlight %} {% endtabs %} -You can refer [PDF documentation](https://help.syncfusion.com/file-formats/pdf/open-and-save-pdf-file-in-c-sharp-vb-net#saving-a-pdf-document-to-stream). +You can refer [PDF documentation](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/wpf/saving-the-pdf-document). ### Save using File dialog @@ -340,7 +340,7 @@ if (sfd.ShowDialog() == true) ## Opening exported PDF without saving -You can view exported PDF document without saving by using [PDFViewerControl](https://help.syncfusion.com/wpf/pdf-viewer/overview). +You can view exported PDF document without saving by using [PDFViewerControl](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/wpf/overview). {% tabs %} {% highlight c# %} diff --git a/wpf/Welcome-to-Syncfusion-Essential-WPF.md b/wpf/Welcome-to-Syncfusion-Essential-WPF.md index 3e4cbbf7d5..ddbfc478a8 100644 --- a/wpf/Welcome-to-Syncfusion-Essential-WPF.md +++ b/wpf/Welcome-to-Syncfusion-Essential-WPF.md @@ -201,7 +201,7 @@ N> The name of the Visual Studio Toolbox entry provided when the common control FILE VIEWERS & EDITORS
- PDF Viewer
+ PDF Viewer
@@ -213,7 +213,7 @@ N> The name of the Visual Studio Toolbox entry provided when the common control - RichTextBox
+ RichTextBox
@@ -231,17 +231,17 @@ N> The name of the Visual Studio Toolbox entry provided when the common control - PDF
+ PDF
- Word
+ Word
- PowerPoint
+ PowerPoint
From 5e84b5e7fdd3240edddcc89f69d11342e050e27b Mon Sep 17 00:00:00 2001 From: SivaThennarasu Date: Tue, 14 Apr 2026 12:39:33 +0530 Subject: [PATCH 05/53] 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 3f917e86a2..edfc7e0178 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 9178667989..a8b2c7fcb2 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 b35e69dfc8..462be976db 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 f4728a9847..cab388eaf4 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 f64227dd9f..6d271ef864 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 e750b89cbe..03140dfaf0 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 06/53] 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 a8b2c7fcb2..13ee33f41e 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 07/53] 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 13ee33f41e..11feea25cc 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 6f7d6372a9..a230b05eec 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 2f7d1d6a63..203d18894e 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 c29c5dfa31..9055aba28b 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 fc34ec3cc7..cb215ca87a 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 a85f045795..293775b32d 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 7c50b87fc0..c0383512b9 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 08/53] 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 11feea25cc..c04a614a72 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 09/53] 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 4a6dccc974..08ce759630 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 7643931c3f..962e22dbc6 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 7522186ba8..bb45f2ab64 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 9e2a6ae8e5..dc63f2b021 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 a40f33f368..103afb402d 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 aeb9256510..bc64227862 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 fe92697533..b0d27253f9 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 a867faf87a..e87d96af0b 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 eaeae179af..1b25a9ba8b 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 654f711aae..677f52be4e 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 141ad0cc0d..e2e9a8b5bf 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 bfca5f1977..44b0e9cac7 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 10/53] 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 fedb26bc55..91d8296b7a 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 56f58ef1755a7bf3f5717e9cf5abe3ea450131d7 Mon Sep 17 00:00:00 2001 From: SivaThennarasu Date: Sat, 18 Apr 2026 00:17:56 +0530 Subject: [PATCH 11/53] Check the alignments of the code snippets --- wpf/Charts/Adornments/Label.md | 458 +++++---- wpf/Charts/Adornments/Marker.md | 155 +-- .../Adornments/Positioning-Adornment.md | 66 +- wpf/Charts/Annotations.md | 918 +++++++++++------- wpf/Charts/DataBinding.md | 206 +--- wpf/Charts/FastChart/Fast-BitmapSeries.md | 243 ++--- wpf/Charts/FastChart/Fast-Series.md | 34 +- wpf/Charts/Sorting.md | 192 ++-- 8 files changed, 1150 insertions(+), 1122 deletions(-) diff --git a/wpf/Charts/Adornments/Label.md b/wpf/Charts/Adornments/Label.md index 933e44f58b..6f66815d64 100644 --- a/wpf/Charts/Adornments/Label.md +++ b/wpf/Charts/Adornments/Label.md @@ -23,17 +23,21 @@ The following code example demonstrates about define the value to be displayed a {% highlight xaml %} - + + {% endhighlight %} {% highlight c# %} - ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() - { - ShowLabel = true, - SegmentLabelContent=LabelContent.YValue - }; +ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() +{ + ShowLabel = true, + SegmentLabelContent = LabelContent.YValue +}; {% endhighlight %} @@ -67,30 +71,38 @@ The following code example demonstrates the customization of label using the abo {% highlight xaml %} - - - - + + + + {% endhighlight %} {% highlight c# %} - ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() - { - - ShowLabel = true, - LabelPosition = AdornmentsLabelPosition.Outer, - Foreground = new SolidColorBrush(Colors.Black), - BorderBrush = new SolidColorBrush(Colors.Black), - Background = new SolidColorBrush(Colors.DarkGray), - BorderThickness = new Thickness(1), - Margin = new Thickness(1), - FontStyle = FontStyles.Italic, - FontFamily = new FontFamily("Calibri"), - FontSize = 11 - }; - +ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() +{ + ShowLabel = true, + LabelPosition = AdornmentsLabelPosition.Outer, + Foreground = new SolidColorBrush(Colors.Black), + BorderBrush = new SolidColorBrush(Colors.Black), + Background = new SolidColorBrush(Colors.DarkGray), + BorderThickness= new Thickness(1), + Margin = new Thickness(1), + FontStyle = FontStyles.Italic, + FontFamily = new FontFamily("Calibri"), + FontSize = 11 +}; {% endhighlight %} @@ -106,62 +118,78 @@ The default appearance of the label can be customized using [`LabelTemplate`](ht {% highlight xaml %} - - - - - - - - - - - - - - - - - - - - - - - - ... - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + ... - - + + + + + + + ... + + {% endhighlight %} {% highlight c# %} - ColumnSeries series = new ColumnSeries() - { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Category", - YBindingPath = "Value", - Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)) - }; - - ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() - { - ShowLabel = true, - LabelPosition = AdornmentsLabelPosition.Outer, - LabelTemplate = this.Resources["adornmentTemplate"] as DataTemplate - }; - series.AdornmentsInfo = adornmentInfo; +ColumnSeries series = new ColumnSeries() +{ + ItemsSource = new ViewModel().Demands, + XBindingPath = "Category", + YBindingPath = "Value", + Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)) +}; + +ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() +{ + ShowLabel = true, + LabelPosition = AdornmentsLabelPosition.Outer, + LabelTemplate = this.Resources["adornmentTemplate"] as DataTemplate +}; + +series.AdornmentsInfo = adornmentInfo; {% endhighlight %} @@ -179,18 +207,21 @@ The following code example demonstrates the y value having three decimal digits. {% highlight xaml %} - - + + {% endhighlight %} {% highlight c# %} - ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() - { - ShowLabel = true, - SegmentLabelFormat = "0.000" - }; +ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() +{ + ShowLabel = true, + SegmentLabelFormat = "0.000" +}; {% endhighlight %} @@ -208,19 +239,25 @@ In the following image, you can see the decimal position will be rounded off to {% highlight xaml %} - - - + + + + + {% endhighlight %} {% highlight c# %} - ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() - { - ShowLabel = true, - LabelRotationAngle = 45, - LabelPosition=AdornmentsLabelPosition.Outer - }; +ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() +{ + ShowLabel = true, + LabelRotationAngle = 45, + LabelPosition = AdornmentsLabelPosition.Outer +}; + {% endhighlight %} {% endtabs %} @@ -244,51 +281,57 @@ The following code example shows the customization options for connector line: {% highlight xaml %} - - - + + + - - - - - ... - - - - - + + + ... + + + + + - ... - - + + {% endhighlight %} {% highlight c# %} - PieSeries series = new PieSeries() - { - ItemsSource = new ServerViewModel().Performance, - XBindingPath = "Year", - YBindingPath = "Plastic", - LabelPosition = CircularSeriesLabelPosition.OutsideExtended, - Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)) - }; - - ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() - { - ShowLabel = true, - ShowConnectorLine = true, - UseSeriesPalette = true, - ConnectorLineStyle=this.Resources["lineStyle"] as Style - LabelPosition =AdornmentsLabelPosition.Outer, - }; - series.AdornmentsInfo = adornmentInfo; +PieSeries series = new PieSeries() +{ + ItemsSource = new ServerViewModel().Performance, + XBindingPath = "Year", + YBindingPath = "Plastic", + LabelPosition = CircularSeriesLabelPosition.OutsideExtended, + Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)) +}; + +ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() +{ + ShowLabel = true, + ShowConnectorLine = true, + UseSeriesPalette = true, + ConnectorLineStyle=this.Resources["lineStyle"] as Style + LabelPosition =AdornmentsLabelPosition.Outer, +}; + +series.AdornmentsInfo = adornmentInfo; {% endhighlight %} @@ -305,42 +348,51 @@ The following code example shows the customization options for connector line: {% highlight xaml %} - - - - - + + + + + {% endhighlight %} {% highlight c# %} - PieSeries series = new PieSeries() - { - ItemsSource = new ServerViewModel().Performance, - XBindingPath = "Year", - YBindingPath = "Plastic", - EnableSmartLabels = true, - ExplodeAll = true, - ExplodeRadius = 3, - ConnectorType=ConnectorMode.Bezier, - LabelPosition = CircularSeriesLabelPosition.OutsideExtended, - Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)) - }; - - ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() - { - ShowLabel = true, - ShowConnectorLine = true, - HorizontalAlignment = HorizontalAlignment.Center, - VerticalAlignment = VerticalAlignment.Center, - ConnectorHeight= 80 - }; - - {% endhighlight %} +PieSeries series = new PieSeries() +{ + ItemsSource = new ServerViewModel().Performance, + XBindingPath = "ServerLoad", + YBindingPath = "Server1", + EnableSmartLabels = true, + ExplodeAll = true, + ExplodeRadius = 3, + ConnectorType = ConnectorMode.Bezier, + LabelPosition = CircularSeriesLabelPosition.OutsideExtended, + Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)) +}; + +ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() +{ + ShowLabel = true, + ShowConnectorLine = true, + HorizontalAlignment= HorizontalAlignment.Center, + VerticalAlignment = VerticalAlignment.Center, + ConnectorHeight = 80 +}; + +{% endhighlight %} {% endtabs %} @@ -366,19 +418,20 @@ The following code example shows the customization options for connector line: {% highlight xaml %} - - - + + {% endhighlight %} {% highlight c# %} - ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() - { - ShowLabel = true, - UseSeriesPalette = true - }; +ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() +{ + ShowLabel = true, + UseSeriesPalette = true +}; {% endhighlight %} @@ -394,39 +447,54 @@ The following code example demonstrates the EnableSmartLabels property: {% highlight xaml %} - - - - - + + + + + + + {% endhighlight %} {% highlight c# %} - PieSeries series = new PieSeries() - { - ItemsSource = new ViewModel().Tax, - XBindingPath = "Year", - YBindingPath = "Plastic", - EnableSmartLabels = true, - ExplodeAll = true, - ExplodeRadius = 3, - Palette = ChartColorPalette.Custom, - LabelPosition=CircularSeriesLabelPosition.OutsideExtended, - Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)) - }; - - ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() - { - ShowLabel = true, - ShowConnectorLine = true, - UseSeriesPalette = true, - HorizontalAlignment = HorizontalAlignment.Center, - VerticalAlignment = VerticalAlignment.Center - }; - series.AdornmentsInfo = adornmentInfo; +PieSeries series = new PieSeries() +{ + ItemsSource = new ViewModel().CategoricalData, + XBindingPath = "Year", + YBindingPath = "Plastic", + EnableSmartLabels = true, + ExplodeAll = true, + ExplodeRadius = 3, + Palette = ChartColorPalette.Custom, + LabelPosition = CircularSeriesLabelPosition.OutsideExtended, + Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)) +}; + +ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() +{ + ShowLabel = true, + ShowConnectorLine = true, + UseSeriesPalette = true, + HorizontalAlignment = HorizontalAlignment.Center, + VerticalAlignment = VerticalAlignment.Center +}; + +series.AdornmentsInfo = adornmentInfo; {% endhighlight %} diff --git a/wpf/Charts/Adornments/Marker.md b/wpf/Charts/Adornments/Marker.md index d43bc666b5..622401199d 100644 --- a/wpf/Charts/Adornments/Marker.md +++ b/wpf/Charts/Adornments/Marker.md @@ -21,21 +21,24 @@ The following code example demonstrates the column series with [`Diamond`](https {% highlight xaml %} - - - - + + + + {% endhighlight %} {% highlight c# %} - ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() - { - ShowMarker = true, - Symbol = ChartSymbol.Diamond, - SymbolInterior=new SolidColorBrush(Colors.Black) - }; +ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() +{ + ShowMarker = true, + Symbol = ChartSymbol.Diamond, + SymbolInterior = new SolidColorBrush(Colors.Black) +}; {% endhighlight %} @@ -73,23 +76,28 @@ We have some predefined symbols such as {% highlight xaml %} - - o> + + {% endhighlight %} {% highlight c# %} - ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() - { - ShowMarker = true, - SymbolStroke = new SolidColorBrush(Colors.Black), - SymbolInterior = new SolidColorBrush(Colors.DarkGray), - SymbolHeight = 10, - SymbolWidth = 10, - Symbol = ChartSymbol.Ellipse - }; +ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() +{ + ShowMarker = true, + SymbolStroke = new SolidColorBrush(Colors.Black), + SymbolInterior = new SolidColorBrush(Colors.DarkGray), + SymbolHeight = 10, + SymbolWidth = 10, + Symbol = ChartSymbol.Ellipse +}; {% endhighlight %} @@ -106,69 +114,74 @@ The following code example demonstrates how to use SymbolTemplate. {% highlight xaml %} - - - - - - - - - - - - - - - - - - - - - - + - + + + + + + + + + + + + + + + + + + + + + - - ... - - + + ... + - + - ... - + {% endhighlight %} {% highlight c# %} - ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() - { - AdornmentsPosition = AdornmentsPosition.Top, - SymbolTemplate = chart.Resources["symbolTemplate"] as DataTemplate, - Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)) - }; +ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() +{ + AdornmentsPosition = AdornmentsPosition.Top, + SymbolTemplate = chart.Resources["symbolTemplate"] as DataTemplate, + Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)) +}; {% endhighlight %} diff --git a/wpf/Charts/Adornments/Positioning-Adornment.md b/wpf/Charts/Adornments/Positioning-Adornment.md index b8a57a9b3b..9e176b7ea8 100644 --- a/wpf/Charts/Adornments/Positioning-Adornment.md +++ b/wpf/Charts/Adornments/Positioning-Adornment.md @@ -23,22 +23,30 @@ The following code example explains the positioning of adornments in the middle {% highlight xaml %} - - + + + + {% endhighlight %} {% highlight c# %} - ColumnSeries series = new ColumnSeries(); - ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() - { - ShowMarker = true, - Symbol = ChartSymbol.Ellipse, - SymbolInterior = new SolidColorBrush(Colors.DarkGray), - AdornmentsPosition=AdornmentsPosition.TopAndBottom - }; - series.AdornmentsInfo = adornmentInfo; +ColumnSeries series = new ColumnSeries(); + +ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() +{ + ShowMarker = true, + Symbol = ChartSymbol.Ellipse, + SymbolInterior = new SolidColorBrush(Colors.DarkGray), + AdornmentsPosition = AdornmentsPosition.TopAndBottom +}; + +series.AdornmentsInfo = adornmentInfo; {% endhighlight %} @@ -67,17 +75,17 @@ The following code sample illustrates the center position of data marker labels, {% highlight xaml %} - + {% endhighlight %} {% highlight c# %} - ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() - { - ShowLabel = true, - LabelPosition =AdornmentsLabelPosition.Center - }; +ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() +{ + ShowLabel = true, + LabelPosition =AdornmentsLabelPosition.Center +}; {% endhighlight %} @@ -93,17 +101,17 @@ The following code sample illustrates the inner position of data marker labels, {% highlight xaml %} - + {% endhighlight %} {% highlight c# %} - ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() - { - ShowLabel = true, - LabelPosition =AdornmentsLabelPosition.Inner - }; +ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() +{ + ShowLabel = true, + LabelPosition =AdornmentsLabelPosition.Inner +}; {% endhighlight %} @@ -120,17 +128,17 @@ The following code sample illustrates the outer position of data marker labels, {% highlight xaml %} - + {% endhighlight %} {% highlight c# %} - ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() - { - ShowLabel = true, - LabelPosition =AdornmentsLabelPosition.Outer - }; +ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() +{ + ShowLabel = true, + LabelPosition =AdornmentsLabelPosition.Outer +}; {% endhighlight %} diff --git a/wpf/Charts/Annotations.md b/wpf/Charts/Annotations.md index 13db7bc29a..2bd5c79c64 100644 --- a/wpf/Charts/Annotations.md +++ b/wpf/Charts/Annotations.md @@ -24,21 +24,26 @@ You can create an instance for any type of Annotation and add it to [`Annotation {% highlight xml %} - - - - + + + + {% endhighlight %} {% highlight c# %} - EllipseAnnotation annotation=new EllipseAnnotation() - { - X1 = 1.5, Y1 = 20, - X2 = 3, Y2 = 23, - Text = "Ellipse" - }; +EllipseAnnotation annotation=new EllipseAnnotation() +{ + X1 = 1.5, Y1 = 20, + X2 = 3, Y2 = 23, + Text = "Ellipse" +}; chart.Annotations.Add(annotation); @@ -61,23 +66,30 @@ To position the annotation based on axis, set the X1 and Y1, X2 and Y2 propertie {% highlight xml %} - - + + {% endhighlight %} {% highlight c# %} - RectangleAnnotation annotation=new RectangleAnnotation() - { - X1 = 1.25, Y1 = 1300, - X2 = 2.25, Y2 = 1500, - Text = "Axis Value", - CoordinateUnit=CoordinateUnit.Axis, - Text="Axis Value" - }; - -chart.Annotations.Add(annotation); +RectangleAnnotation annotation = new RectangleAnnotation() +{ + X1 = 1.25, + Y1 = 1300, + X2 = 2.25, + Y2 = 1500, + Text = "Axis Value", + CoordinateUnit = CoordinateUnit.Axis, +}; {% endhighlight %} @@ -94,20 +106,31 @@ To position based on the pixel values you have to set the CoordinateUnit as Pixe {% highlight xml %} - - + + + + {% endhighlight %} {% highlight c# %} - RectangleAnnotation annotation=new RectangleAnnotation() - { - X1 = 50, Y1 = 150, - X2 = 100, Y2 = 125, - CoordinateUnit=CoordinateUnit.Pixel, - Text="Pixel Value" - }; + +RectangleAnnotation annotation = new RectangleAnnotation() +{ + X1 = 50, + Y1 = 150, + X2 = 100, + Y2 = 125, + CoordinateUnit = CoordinateUnit.Pixel, + Text = "Pixel Value" +}; chart.Annotations.Add(annotation); @@ -125,101 +148,142 @@ You can also add annotation for a particular axis when there is multiple axes us {% highlight xaml %} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {% endhighlight %} {% highlight c# %} - SfChart chart = new SfChart(); - chart.RowDefinitions.Add(new ChartRowDefinition()); - chart.RowDefinitions.Add(new ChartRowDefinition()); - chart.PrimaryAxis = new CategoryAxis(); - chart.SecondaryAxis = new NumericalAxis(); - ChartBase.SetRow(chart.SecondaryAxis, 0); - - HorizontalLineAnnotation annotation = new HorizontalLineAnnotation() - { - X1 = -0.5, - Y1 = 1700, - X2 = 3.5, - YAxisName = "ColumnAxis", - LineCap=LineCap.Arrow, - Stroke=new SolidColorBrush(Colors.DarkGray) - }; - - RectangleAnnotation rect = new RectangleAnnotation() - { - YAxisName = "ScatterAxis", - Fill = new SolidColorBrush(Colors.LightGray), - Stroke = new SolidColorBrush(Colors.DarkGray), - Opacity = 0.5, - X1 = 0.5, - Y1 = 900, - X2 = 2.5, - Y2 = 1600 - }; - - ColumnSeries columnSeries = new ColumnSeries() - { - ItemsSource = new CategoricalViewModel().CategoricalData, - XBindingPath = "Category", - YBindingPath = "Plastic", - Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)) - }; - - ScatterSeries scatterSeries = new ScatterSeries() - { - ItemsSource = new CategoricalViewModel().CategoricalData, - XBindingPath = "Category", - YBindingPath = "Plastic", - Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)) - }; - - NumericalAxis axis = new NumericalAxis() - { - Name = "ScatterAxis", - Maximum = 2000, - FontSize = 11, - Interval = 500, - ShowGridLines = false - }; - - scatterSeries.YAxis = axis; - ChartBase.SetRow(axis, 1); - - chart.Series.Add(columnSeries); - chart.Series.Add(scatterSeries); + SfChart chart = new SfChart(); + +chart.RowDefinitions.Add(new ChartRowDefinition()); +chart.RowDefinitions.Add(new ChartRowDefinition()); + +chart.PrimaryAxis = new CategoryAxis(); + +chart.SecondaryAxis = new NumericalAxis(); +ChartBase.SetRow(chart.SecondaryAxis, 0); + +HorizontalLineAnnotation annotation = new HorizontalLineAnnotation() +{ + X1 = -0.5, + Y1 = 1700, + X2 = 3.5, + YAxisName = "ColumnAxis", + LineCap = LineCap.Arrow, + Stroke = new SolidColorBrush(Colors.DarkGray) +}; + +RectangleAnnotation rect = new RectangleAnnotation() +{ + YAxisName = "ScatterAxis", + Fill = new SolidColorBrush(Colors.LightGray), + Stroke = new SolidColorBrush(Colors.DarkGray), + Opacity = 0.5, + X1 = 0.5, + Y1 = 900, + X2 = 2.5, + Y2 = 1600 +}; + +ColumnSeries columnSeries = new ColumnSeries() +{ + ItemsSource = new CategoricalViewModel().CategoricalData, + XBindingPath = "Category", + YBindingPath = "Plastic", + Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)) +}; + +ScatterSeries scatterSeries = new ScatterSeries() +{ + ItemsSource = new CategoricalViewModel().CategoricalData, + XBindingPath = "Category", + YBindingPath = "Plastic", + Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)) +}; + +NumericalAxis axis = new NumericalAxis() +{ + Name = "ScatterAxis", + Maximum = 2000, + FontSize = 11, + Interval = 500, + ShowGridLines = false +}; + +scatterSeries.YAxis = axis; +ChartBase.SetRow(axis, 1); + +chart.Annotations.Add(rect); +chart.Annotations.Add(annotation); + +chart.Series.Add(columnSeries); +chart.Series.Add(scatterSeries); {% endhighlight %} @@ -235,21 +299,20 @@ You can also add annotation for a particular axis when there is multiple axes us {% highlight xml %} - - - - + + + {% endhighlight %} {% highlight c# %} - TextAnnotation annotation=new TextAnnotation() - { - X1 = 2.5, - Y1 = 1400, - Text="Annotation" - }; +TextAnnotation annotation=new TextAnnotation() +{ + X1 = 2.5, + Y1 = 1400, + Text="Annotation" +}; chart.Annotations.Add(annotation); @@ -288,26 +351,36 @@ The following properties are used to customize the text: {% highlight xml %} - + + + {% endhighlight %} {% highlight c# %} - TextAnnotation annotation = new TextAnnotation() - { - X1 = 3.5, - Y1 = 500, - Text = "Annotation", - EnableEditing=true, - Foreground=new SolidColorBrush(Colors.Black), - FontStyle=FontStyles.Bold, - HorizontalAlignment=HorizontalAlignment.Stretch, - VerticalAlignment=VerticalAlignment.Stretch - }; +TextAnnotation annotation = new TextAnnotation() +{ + X1 = 3.5, + Y1 = 500, + Text = "Annotation", + EnableEditing=true, + Foreground=new SolidColorBrush(Colors.Black), + FontStyle=FontStyles.Bold, + HorizontalAlignment=HorizontalAlignment.Stretch, + VerticalAlignment=VerticalAlignment.Stretch +}; - chart.Annotations.Add(annotation); +chart.Annotations.Add(annotation); {% endhighlight %} @@ -353,21 +426,26 @@ The [`EllipseAnnotation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml. {% highlight xml %} - - + + {% endhighlight %} {% highlight c# %} - EllipseAnnotation ellipse = new EllipseAnnotation() - { - X1 = 1.5, - Y1 = 1400, - X2 = 2.5, - Y2 = 1600, - Text = "Ellipse" - }; +EllipseAnnotation ellipse = new EllipseAnnotation() +{ + X1 = 1.5, + Y1 = 1400, + X2 = 2.5, + Y2 = 1600, + Text = "Ellipse" +}; {% endhighlight %} @@ -383,21 +461,27 @@ The [`RectangleAnnotation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xam {% highlight xml %} - - + + + {% endhighlight %} {% highlight c# %} - RectangleAnnotation rectangle = new RectangleAnnotation() - { - X1 = 2.5, - Y1 = 1500, - X2 = 3.5, - Y2 = 1750, - Text = "Rectangle" - }; +RectangleAnnotation rectangle = new RectangleAnnotation() +{ + X1 = 2.5, + Y1 = 1500, + X2 = 3.5, + Y2 = 1750, + Text = "Rectangle" +}; {% endhighlight %} @@ -413,21 +497,26 @@ The [`LineAnnotation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Cha {% highlight xml %} - - + + {% endhighlight %} {% highlight c# %} - LineAnnotation line = new LineAnnotation() - { - X1 = 1.5, - Y1 = 1150, - X2 = 3.5, - Y2 = 1600, - Text = "Line" - }; +LineAnnotation line = new LineAnnotation() +{ + X1 = 1.5, + Y1 = 1150, + X2 = 3.5, + Y2 = 1600, + Text = "Line" +}; {% endhighlight %} @@ -443,26 +532,31 @@ The [`VerticalLineAnnotation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI. {% highlight xml %} - - + + - + + {% endhighlight %} {% highlight c# %} - HorizontalLineAnnotation hor = new HorizontalLineAnnotation() - { - X1 = -0.5, - Y1 = 1500, - X2 = 4.5, - }; +HorizontalLineAnnotation hor = new HorizontalLineAnnotation() +{ + X1 = -0.5, + Y1 = 1500, + X2 = 4.5, +}; - VerticalLineAnnotation ver = new VerticalLineAnnotation() - { - X1 = 2.5 - }; +VerticalLineAnnotation ver = new VerticalLineAnnotation() +{ + X1 = 2.5 +}; {% endhighlight %} @@ -489,22 +583,28 @@ To display single headed arrow, set the [`LineCap`](https://help.syncfusion.com/ {% highlight xml %} - - + + {% endhighlight %} {% highlight c# %} - LineAnnotation ellipse = new LineAnnotation() - { - X1 = 0.5, - Y1 = 1500, - X2 = 3.5, - Y2 = 1500, - Text = "Line", - LineCap=LineCap.Arrow - }; +LineAnnotation ellipse = new LineAnnotation() +{ + X1 = 0.5, + Y1 = 1500, + X2 = 3.5, + Y2 = 1500, + Text = "Line", + LineCap = LineCap.Arrow +}; {% endhighlight %} @@ -521,28 +621,35 @@ To display single headed arrow, set the [`LineCap`](https://help.syncfusion.com/ {% highlight xml %} - - + + - + + {% endhighlight %} {% highlight c# %} - HorizontalLineAnnotation hor = new HorizontalLineAnnotation() - { - X1 = -0.5, - Y1 = 1500, - X2 = 4.5, - ShowAxisLabel=true - }; +HorizontalLineAnnotation hor = new HorizontalLineAnnotation() +{ + X1 = -0.5, + Y1 = 1500, + X2 = 4.5, + ShowAxisLabel=true +}; - VerticalLineAnnotation ver = new VerticalLineAnnotation() - { - X1 = 2.5, - ShowAxisLabel=true - }; +VerticalLineAnnotation ver = new VerticalLineAnnotation() +{ + X1 = 2.5, + ShowAxisLabel=true +}; {% endhighlight %} @@ -563,24 +670,32 @@ The text alignment can be changed using [`HorizontalTextAlignment`](https://help {% tabs %} {% highlight xaml %} - - + + {% endhighlight %} {% highlight c# %} - EllipseAnnotation ellipse = new EllipseAnnotation() - { - X1 = 1.5, - Y1 = 1400, - X2 = 2.5, - Y2 = 1600, - HorizontalTextAlignment =HorizontalAlignment.Center, - VerticalTextAlignment = VerticalAlignment.Center, - FontStyle=FontStyles.Bold, - Text = "Ellipse" - }; +EllipseAnnotation ellipse = new EllipseAnnotation() +{ + X1 = 1.5, + Y1 = 1400, + X2 = 2.5, + Y2 = 1600, + HorizontalTextAlignment = HorizontalAlignment.Center, + VerticalTextAlignment = VerticalAlignment.Center, + FontStyle = FontStyles.Bold, + Text = "Ellipse" +}; {% endhighlight %} @@ -607,32 +722,45 @@ SfChart allows customization of shape annotation using the following properties. {% highlight xaml %} - - + + {% endhighlight %} {% highlight c# %} - SfChart chart = new SfChart(); - - HorizontalLineAnnotation annotation = new HorizontalLineAnnotation() - { +SfChart chart = new SfChart(); + +HorizontalLineAnnotation annotation = new HorizontalLineAnnotation() +{ + X1 = -0.5, + X2 = 4.5, + Y1 = 1600, + Y2 = 1600, + StrokeThickness = 3, + Stroke = new SolidColorBrush(Colors.DarkGray), + Fill = new SolidColorBrush(Colors.LightGray), + StrokeDashArray = new DoubleCollection() { 1, 3 }, + StrokeStartLineCap = PenLineCap.Square, + StrokeEndLineCap = PenLineCap.Square, + StrokeDashCap = PenLineCap.Round, + Text = "Line" +}; - X1 = -0.5, - X2 = 4.5, - Y1 = 1500, - StrokeThickness = 3, - Stroke = new SolidColorBrush(Colors.DarkGray), - Fill = new SolidColorBrush(Colors.LightGray), - StrokeDashArray = new DoubleCollection() { 1, 3 }, - StrokeStartLineCap = PenLineCap.Square, - StrokeEndLineCap = PenLineCap.Square, - StrokeDashCap = PenLineCap.Round - }; +chart.Annotations.Add(annotation); - chart.Annotations.Add(annotation); {% endhighlight %} @@ -656,25 +784,32 @@ The following API’s are used in ImageAnnotation. {% highlight xaml %} - - + + {% endhighlight %} {% highlight c# %} - ImageAnnotation annotation = new ImageAnnotation() - { - Text = "Annotation", - HorizontalTextAlignment = HorizontalAlignment.Center, - VerticalTextAlignment = VerticalAlignment.Top, - X1 = 2.5, - Y1 = 1200, - X2 = 3.6, - Y2 = "1700", - ImageSource = new BitmapImage(new Uri(@"Images\Graduate.png", UriKind.RelativeOrAbsolute)) - }; +ImageAnnotation annotation = new ImageAnnotation() +{ + Text = "Annotation", + HorizontalTextAlignment = HorizontalAlignment.Center, + VerticalTextAlignment = VerticalAlignment.Top, + X1 = 2.5, + Y1 = 1200, + X2 = 3.6, + Y2 = "1700", + ImageSource = new BitmapImage(new Uri(@"Images\Graduate.png", UriKind.RelativeOrAbsolute)) +}; {% endhighlight %} @@ -704,25 +839,32 @@ The following code example demonstrates the dragging the rectangle annotation. {% highlight xaml %} - - + + {% endhighlight %} {% highlight c# %} - RectangleAnnotation an = new RectangleAnnotation() - { - X1 = 0.6, - Y1 = 1800, - X2 = 2.2, - Y2 = 1500, - Fill = new SolidColorBrush(Colors.LightGray), - Stroke = new SolidColorBrush(Colors.DarkGray), - CanDrag = true, - Opacity = 0.5 - }; +RectangleAnnotation an = new RectangleAnnotation() +{ + X1 = 0.6, + Y1 = 1800, + X2 = 2.2, + Y2 = 1500, + Fill = new SolidColorBrush(Colors.LightGray), + Stroke = new SolidColorBrush(Colors.DarkGray), + CanDrag = true, + Opacity = 0.5 +}; {% endhighlight %} @@ -741,29 +883,37 @@ You can resize the annotation by enabling [`CanResize`](https://help.syncfusion. {% highlight xaml %} - - + + {% endhighlight %} {% highlight c# %} - RectangleAnnotation an = new RectangleAnnotation() - { - X1 = 0.6, - Y1 = 1800, - X2 = 2.2, - Y2 = 1500, - Fill = new SolidColorBrush(Colors.LightGray), - Stroke = new SolidColorBrush(Colors.DarkGray), - CanDrag = true, - Opacity = 0.5 - }; +RectangleAnnotation an = new RectangleAnnotation() +{ + X1 = 0.6, + Y1 = 1800, + X2 = 2.2, + Y2 = 1500, + Fill = new SolidColorBrush(Colors.LightGray), + Stroke = new SolidColorBrush(Colors.DarkGray), + CanDrag = true, + Opacity = 0.5, + CanResize = true +}; - {% endhighlight %} +{% endhighlight %} - {% endtabs %} +{% endtabs %} ![Eesizing Annotation in WPF Chart](Annotation_images/wpf-chart-resize-annotation.jpeg) @@ -785,27 +935,34 @@ The following code example demonstrates the default tooltip. {% highlight xaml %} - - + + {% endhighlight %} {% highlight c# %} - SfChart chart = new SfChart(); - EllipseAnnotation annotation=new EllipseAnnotation () - { - X1 = 2.5, - Y1 = 1500, - X2 = 3.6, - Y2 = 1680, - Stroke = new SolidColorBrush(Colors.DarkGray), - Fill = new SolidColorBrush (Colors.LightGray), - ShowToolTip = true , - ToolTipContent = "Annotation" - }; - chart.Annotations.Add(annotation); +SfChart chart = new SfChart(); + +EllipseAnnotation annotation = new EllipseAnnotation() +{ + X1 = 2.5, + Y1 = 1500, + X2 = 3.6, + Y2 = 1680, + Stroke = new SolidColorBrush(Colors.DarkGray), + Fill = new SolidColorBrush(Colors.LightGray), + ShowToolTip = true, + ToolTipContent = "Annotation" +}; + +chart.Annotations.Add(annotation); {% endhighlight %} @@ -820,38 +977,54 @@ The default appearance of the Tooltip can be changed using [`TooltipTemplate`](h {% tabs %} {% highlight xaml %} - - - - - - - - - - - - - + + + + + + + + + + + + + + {% endhighlight %} {% highlight c# %} - SfChart chart = new SfChart(); - EllipseAnnotation annotation=new EllipseAnnotation () - { - X1 = 2.5, - Y1 = 1500, - X2 = 3.6, - Y2 = 1680, - Stroke = new SolidColorBrush(Colors.DarkGray), - Fill = new SolidColorBrush (Colors.LightGray), - ShowToolTip = true , - ToolTipTemplate = chart.Resources["tooltipTemplate"] as DataTemplate - }; - chart.Annotations.Add(annotation); +SfChart chart = new SfChart(); + +EllipseAnnotation annotation=new EllipseAnnotation () +{ + X1 = 2.5, + Y1 = 1500, + X2 = 3.6, + Y2 = 1680, + Stroke = new SolidColorBrush(Colors.DarkGray), + Fill = new SolidColorBrush (Colors.LightGray), + ShowToolTip = true , + ToolTipTemplate = chart.Resources["tooltipTemplate"] as DataTemplate +}; + +chart.Annotations.Add(annotation); {% endhighlight %} @@ -868,29 +1041,34 @@ SfChart allows you to clip the annotation if the annotation crosses the boundary {% highlight xaml %} - - - - - + + + + {% endhighlight %} {% highlight c# %} - SfChart chart = new SfChart(); +SfChart chart = new SfChart(); - ImageAnnotation image = new ImageAnnotation() - { - X1 = 6, - Y1 = 16, - X2 = 9, - Y2 = 18, - ImageSource = new BitmapImage(new Uri("Images\Graduate.png", UriKind.RelativeOrAbsolute)), - EnableClipping=true - }; +ImageAnnotation image = new ImageAnnotation() +{ + X1 = 6, + Y1 = 16, + X2 = 9, + Y2 = 18, + ImageSource = new BitmapImage(new Uri("Images\Graduate.png", UriKind.RelativeOrAbsolute)), + EnableClipping=true +}; - chart.Annotations.Add(image); +chart.Annotations.Add(image); {% endhighlight %} @@ -1023,31 +1201,37 @@ The corresponding DateTime value will be given as values for X1 and X2 propertie {% highlight xaml %} - - - + + + - - - + + + - - - - + + + + {% endhighlight %} {% highlight c# %} - SfChart chart = new SfChart(); - chart.PrimaryAxis = new DateTimeAxis(); - chart.SecondaryAxis = new NumericalAxis(); - RectangleAnnotation annotation = new RectangleAnnotation() - { - X1 = new DateTime(2019,12,17), X2 = new DateTime(2020,02,19), Y1 = 1200, Y2 = 1300, - }; - chart.Annotations.Add(annotation); +SfChart chart = new SfChart(); +chart.PrimaryAxis = new DateTimeAxis(); +chart.SecondaryAxis = new NumericalAxis(); + +RectangleAnnotation annotation = new RectangleAnnotation() +{ + X1 = new DateTime(2019,12,17), X2 = new DateTime(2020,02,19), Y1 = 1200, Y2 = 1300, +}; + +chart.Annotations.Add(annotation); {% endhighlight %} diff --git a/wpf/Charts/DataBinding.md b/wpf/Charts/DataBinding.md index cd04e7996b..e6b1dcfa1d 100644 --- a/wpf/Charts/DataBinding.md +++ b/wpf/Charts/DataBinding.md @@ -18,19 +18,11 @@ SfChart offers ItemsSource property to bind various datasource ranges from simpl {% highlight xaml %} - - - - - - - + + {% endhighlight %} @@ -41,83 +33,45 @@ SfChart chart = new SfChart(); LineSeries lineSeries = new LineSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2010", - }; chart.Series.Add(lineSeries); public class GoldDemand - { - public string Demand { get; set; } - - - public double Year2010 { get; set; } - - - public double Year2011 { get; set; } - } public sealed partial class MainPage : Page - { - -public MainPage() - -{ - - this.InitializeComponent(); - - this.Demands = new ObservableCollection - + public ObservableCollection Demands { get; set; } + + public MainPage() { - - new GoldDemand() {Demand = "Jewelry", Year2010 = 1998.0, Year2011 = 2361.2}, - - new GoldDemand() {Demand = "Electronics", Year2010 = 1284.0, Year2011 = 1328.0}, - - new GoldDemand() {Demand = "Research", Year2010 = 1090.5, Year2011 = 1032.0}, - - new GoldDemand() {Demand = "Investment", Year2010 = 1643.0, Year2011 = 1898.0}, - - new GoldDemand() {Demand = "Bank Purchases", Year2010 = 987.0, Year2011 = 887.0}, - - - - new GoldDemand() {Demand = "Others", Year2010 = 1090.5, Year2011 = 1032.0}, - - new GoldDemand() {Demand = "Investment", Year2010 = 1643.0, Year2011 = 1898.0}, - - new GoldDemand() {Demand = "Bank Purchases", Year2010 = 987.0, Year2011 = 887.0}, - - - - new GoldDemand() {Demand = "Electronics", Year2010 = 1284.0, Year2011 = 1328.0}, - - new GoldDemand() {Demand = "Research", Year2010 = 1090.5, Year2011 = 1032.0}, - - new GoldDemand() {Demand = "Investment", Year2010 = 1643.0, Year2011 = 1898.0}, - - new GoldDemand() {Demand = "Bank Purchases", Year2010 = 987.0, Year2011 = 887.0} - - }; - - DataContext = this; - -} - -public ObservableCollection Demands { get; set; } - + this.InitializeComponent(); + this.Demands = new ObservableCollection + { + new GoldDemand() {Demand = "Jewelry", Year2010 = 1998.0, Year2011 = 2361.2}, + new GoldDemand() {Demand = "Electronics", Year2010 = 1284.0, Year2011 = 1328.0}, + new GoldDemand() {Demand = "Research", Year2010 = 1090.5, Year2011 = 1032.0}, + new GoldDemand() {Demand = "Investment", Year2010 = 1643.0, Year2011 = 1898.0}, + new GoldDemand() {Demand = "Bank Purchases", Year2010 = 987.0, Year2011 = 887.0}, + new GoldDemand() {Demand = "Others", Year2010 = 1090.5, Year2011 = 1032.0}, + new GoldDemand() {Demand = "Investment", Year2010 = 1643.0, Year2011 = 1898.0}, + new GoldDemand() {Demand = "Bank Purchases", Year2010 = 987.0, Year2011 = 887.0}, + new GoldDemand() {Demand = "Electronics", Year2010 = 1284.0, Year2011 = 1328.0}, + new GoldDemand() {Demand = "Research", Year2010 = 1090.5, Year2011 = 1032.0}, + new GoldDemand() {Demand = "Investment", Year2010 = 1643.0, Year2011 = 1898.0}, + new GoldDemand() {Demand = "Bank Purchases", Year2010 = 987.0, Year2011 = 887.0} + }; + + DataContext = this; + } } {% endhighlight %} @@ -133,7 +87,11 @@ The complex property binding feature enables you to access nested object referen {% highlight xaml %} -  + + {% endhighlight %} @@ -143,49 +101,31 @@ StadiumDetails stadiumDetails = new StadiumDetails(); LineSeries series = new LineSeries() { - ItemsSource = new ViewModel().DataWithMulData, - XBindingPath = "stadiumDetails.CupDetailsObj.CupName", - YBindingPath = "stadiumDetails.NumSeats", - Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC)) - }; chart.Series.Add(series); public class StadiumDetails - { - public string PlaceName { get; set; } - public int NumSeats { get; set; } - public int Price { get; set; } - public CupDetails CupDetailsObj { get; set; } - } public class CupDetails - { - public string CupName { get; set; } - } public class DataPointWithMulData - { - public string Name { get; set; } - public StadiumDetails StadiumObject { get; set; } - } {% endhighlight %} @@ -203,92 +143,54 @@ The following code example demonstrates how to bind the array values for the XBi {% highlight xaml %} - - - - - + - {% endhighlight %} {% highlight C# %} public class Model - { - public string[] Brand { get; set; } - public double[] Count { get; set; } - } public class ViewModel - { - public ViewModel() - { - Brands = new ObservableCollection(); - - Brands.Add(new Model() { Brand = new string[] { "Reebok", "Adidas" }, Count  - -= new  double[] { 34, 23 } }); - - Brands.Add(new Model() { Brand = new string[] { "Benz", "Audi" }, Count  - -=  new double[] { 50, 20 } }); - - Brands.Add(new Model() { Brand = new string[] { "iPhone", "Nokia" }, Count  - -= new double[] { 24, 30 } }); - - Brands.Add(new Model() { Brand = new string[] { "Lenovo", "Acer" }, Count  - -= new double[] { 38, 23 } }); - - Brands.Add(new Model() { Brand = new string[] { "Fastrack", "Titan" },Count  - -= new double[] { 27, 29 } }); - + Brands.Add(new Model() { Brand = new string[] { "Reebok", "Adidas" }, Count = new  double[] { 34, 23 } }); + Brands.Add(new Model() { Brand = new string[] { "Benz", "Audi" }, Count =  new double[] { 50, 20 } }); + Brands.Add(new Model() { Brand = new string[] { "iPhone", "Nokia" }, Count = new double[] { 24, 30 } }); + Brands.Add(new Model() { Brand = new string[] { "Lenovo", "Acer" }, Count = new double[] { 38, 23 } }); + Brands.Add(new Model() { Brand = new string[] { "Fastrack", "Titan" },Count = new double[] { 27, 29 } }); } public ObservableCollection Brands { get; set; } - } private void CreateChart() - { - ViewModel view = new ViewModel(); - SfChart chart = new SfChart(); ColumnSeries series = new ColumnSeries(); - series.ItemsSource = view.Brands; - series.XBindingPath = "Brand[1]"; - series.YBindingPath = "Count[0]"; chart.Series.Add(series); - grid.Children.Add(chart); - } - {% endhighlight %} - {% endtabs %} ### Listening Property Changes @@ -299,12 +201,15 @@ You can notify the [`XBindingPath`](https://help.syncfusion.com/cr/wpf/Syncfusio {% highlight xaml %} - - + {% endhighlight %} @@ -313,23 +218,14 @@ XBindingPath="ID" YBindingPath="Coal"> 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)) - }; chart.Series.Add(series); diff --git a/wpf/Charts/FastChart/Fast-BitmapSeries.md b/wpf/Charts/FastChart/Fast-BitmapSeries.md index f365f83fd8..6ddb74cc1c 100644 --- a/wpf/Charts/FastChart/Fast-BitmapSeries.md +++ b/wpf/Charts/FastChart/Fast-BitmapSeries.md @@ -21,11 +21,12 @@ The following code example shows how to use the fast line bitmap series: {% highlight xaml %} - + {% endhighlight %} @@ -33,15 +34,10 @@ YBindingPath="Value" /> FastLineBitmapSeries series = new FastLineBitmapSeries() { - ItemsSource = new ViewModel().Data, - XBindingPath = "Date", - YBindingPath = "Value", - Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0x7F)) - }; chart.Series.Add(series); @@ -60,13 +56,12 @@ N> As it was rendered using bitmap, there might be some jagged lines at edges. T {% highlight xaml %} - + {% endhighlight %} @@ -74,19 +69,12 @@ YBindingPath="Value" EnableAntiAliasing="True"/> FastLineBitmapSeries series = new FastLineBitmapSeries() { - ItemsSource = new ViewModel().Data, - XBindingPath = "Date", - YBindingPath = "Value", - EnableAntiAliasing =true, - StrokeDashArray =new DoubleCollection() { 5,5}, - Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0x7F)) - }; chart.Series.Add(series); @@ -106,11 +94,11 @@ chart.Series.Add(series); {% highlight xaml %} - + {% endhighlight %} @@ -118,15 +106,10 @@ XBindingPath="Date" YBindingPath="Price" /> FastColumnBitmapSeries series = new FastColumnBitmapSeries() { - ItemsSource = new ViewModel().List, - XBindingPath = "Date", - YBindingPath = "Value", - Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0x7F)) - }; chart.Series.Add(series); @@ -145,11 +128,12 @@ chart.Series.Add(series); {% highlight xaml %} - + {% endhighlight %} @@ -157,15 +141,10 @@ Interior="#7F7F7F"/> FastBarBitmapSeries series = new FastBarBitmapSeries() { - ItemsSource = new ViewModel().List, - XBindingPath = "Date", - YBindingPath = "Value", - Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0x7F)) - }; chart.Series.Add(series); @@ -185,15 +164,15 @@ chart.Series.Add(series); {% highlight xaml %} - + {% endhighlight %} @@ -201,19 +180,12 @@ BearFillColor="#4A4A4A" /> FastCandleBitmapSeries series = new FastCandleBitmapSeries() { - ItemsSource = new ViewModel().TestingModel, - XBindingPath = "X", - High="Y", Low="Y1", - Open="Y2", Close="Y3", - BullFillColor = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC)), - BearFillColor = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A)) - }; chart.Series.Add(series); @@ -233,11 +205,13 @@ chart.Series.Add(series); {% highlight xaml %} - + {% endhighlight %} @@ -245,17 +219,11 @@ Low="Price"/> FastHiLoBitmapSeries series = new FastHiLoBitmapSeries() { - ItemsSource = new ViewModel().List, - XBindingPath = "Date", - High = "Stock",Low = "Price", - Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0X7F)), - StrokeThickness = 5 - }; chart.Series.Add(series); @@ -274,13 +242,15 @@ chart.Series.Add(series); {% highlight xaml %} - + {% endhighlight %} @@ -288,20 +258,14 @@ BearFillColor="#4A4A4A"/> FastHiLoOpenCloseBitmapSeries series = new FastHiLoOpenCloseBitmapSeries() { - ItemsSource = new ViewModel().TestingModel, - XBindingPath = "X", - - High="Y", Low="Y1", - - Open="Y2", Close="Y3", - + High="Y", + Low="Y1", + Open="Y2", + Close="Y3", BullFillColor = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC)), - - BearFillColor = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A)) - -}; + BearFillColor = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A))}; chart.Series.Add(series); @@ -319,15 +283,14 @@ chart.Series.Add(series); {% highlight xaml %} - + {% endhighlight %} @@ -335,19 +298,12 @@ ScatterWidth="4"/> FastScatterBitmapSeries series = new FastScatterBitmapSeries() { - ItemsSource = new ViewModel().Data, - XBindingPath = "Date", - YBindingPath = "Value", - ScatterHeight = 4, - ScatterWidth = 4, - Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0X7F)) - }; chart.Series.Add(series); @@ -367,11 +323,11 @@ chart.Series.Add(series); {% highlight xaml %} - + {% endhighlight %} @@ -379,15 +335,10 @@ YBindingPath="Value" Interior="#4A4A4A" /> FastStepLineBitmapSeries series = new FastStepLineBitmapSeries() { - ItemsSource = new ViewModel().Data, - XBindingPath = "Date", - YBindingPath = "Value", - Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0X4A)) - }; chart.Series.Add(series); @@ -404,11 +355,13 @@ The anti aliasing mode can be enabled using [`EnableAntiAliasing`](https://help. {% highlight xaml %} - + {% endhighlight %} @@ -416,17 +369,11 @@ YBindingPath="Value" Interior="#4A4A4A"/> FastStepLineBitmapSeries series = new FastStepLineBitmapSeries() { - ItemsSource = new ViewModel().Data, - XBindingPath = "Date", - YBindingPath = "Value", - EnableAntiAliasing = true , - Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0X4A)) - }; chart.Series.Add(series); @@ -446,34 +393,29 @@ chart.Series.Add(series); {% highlight xaml %} - + {% endhighlight %} {% highlight c# %} + FastRangeAreaBitmapSeries fastRangeAreaBitmapSeries = new FastRangeAreaBitmapSeries(); fastRangeAreaBitmapSeries.ItemsSource = new ViewModel().Data; - fastRangeAreaBitmapSeries.XBindingPath = "Date"; - fastRangeAreaBitmapSeries.High = "HighTemperature"; - fastRangeAreaBitmapSeries.Low = "LowTemperature"; - fastRangeAreaBitmapSeries.Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0x75)); +chart.Series.Add(fastRangeAreaBitmapSeries) -chart.Series.Add(fastRangeAreaBitmapSeries); {% endhighlight %} @@ -487,17 +429,14 @@ The anti-aliasing mode can be enabled using [`EnableAntiAliasing`](https://help {% highlight xaml %} - + {% endhighlight %} @@ -506,18 +445,12 @@ The anti-aliasing mode can be enabled using [`EnableAntiAliasing`](https://help FastRangeAreaBitmapSeries fastRangeAreaBitmapSeries = new FastRangeAreaBitmapSeries(); fastRangeAreaBitmapSeries.ItemsSource = new ViewModel().Data; - fastRangeAreaBitmapSeries.XBindingPath = "Date"; - fastRangeAreaBitmapSeries.High = "HighTemperature"; - fastRangeAreaBitmapSeries.Low = "LowTemperature"; - fastRangeAreaBitmapSeries.EnableAntiAliasing = true; - fastRangeAreaBitmapSeries.Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0x75)); - chart.Series.Add(fastRangeAreaBitmapSeries); {% endhighlight %} diff --git a/wpf/Charts/FastChart/Fast-Series.md b/wpf/Charts/FastChart/Fast-Series.md index 4df7396840..599955f566 100644 --- a/wpf/Charts/FastChart/Fast-Series.md +++ b/wpf/Charts/FastChart/Fast-Series.md @@ -19,11 +19,12 @@ The [`FastLineSeries`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Cha {% highlight xaml %} - + {% endhighlight %} @@ -31,15 +32,10 @@ YBindingPath="Value"/> FastLineSeries series = new FastLineSeries() { - ItemsSource = new ViewModel().Data, - XBindingPath = "Date", - YBindingPath = "Value", - Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0x7F)) - }; chart.Series.Add(series); @@ -66,13 +62,12 @@ The following line properties are available for FastLineSeries: {% highlight xaml %} - + {% endhighlight %} @@ -80,15 +75,10 @@ Interior="#4A4A4A" /> FastStackingColumnBitmapSeries series = new FastStackingColumnBitmapSeries() { - ItemsSource = new ViewModel().MedalDetails, - XBindingPath = "CountryName", - YBindingPath = "GoldMedals", - Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0X4A)) - }; chart.Series.Add(series); diff --git a/wpf/Charts/Sorting.md b/wpf/Charts/Sorting.md index 121ebb0d5a..a93380ed44 100644 --- a/wpf/Charts/Sorting.md +++ b/wpf/Charts/Sorting.md @@ -35,13 +35,14 @@ The following example illustrates a simple chart (without apply sorting): {% tabs %} {% highlight xml %} - + {% endhighlight %} @@ -49,21 +50,13 @@ The following example illustrates a simple chart (without apply sorting): ColumnSeries columnSeries = new ColumnSeries() { - IsSortData = true, - SortBy = SortingAxis.X, - SortDirection = Direction.Ascending, - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2011", - Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A)) - }; chart.Series.Add(columnSeries); @@ -81,13 +74,14 @@ chart.Series.Add(columnSeries); {% highlight xml %} - + {% endhighlight %} @@ -95,21 +89,13 @@ chart.Series.Add(columnSeries); ColumnSeries columnSeries = new ColumnSeries() { - IsSortData = true, - SortBy = SortingAxis.X, - SortDirection = Direction.Descending, - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2011", - Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A)) - }; chart.Series.Add(columnSeries); @@ -127,13 +113,14 @@ chart.Series.Add(columnSeries); {% highlight xml %} - + {% endhighlight %} @@ -142,21 +129,13 @@ chart.Series.Add(columnSeries); ColumnSeries columnSeries = new ColumnSeries() { - IsSortData = true, - SortBy = SortingAxis.Y, - SortDirection = Direction.Ascending, - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2011", - Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A)) - }; chart.Series.Add(columnSeries); @@ -174,13 +153,14 @@ chart.Series.Add(columnSeries); {% highlight xml %} - + {% endhighlight %} @@ -189,21 +169,13 @@ chart.Series.Add(columnSeries); ColumnSeries columnSeries = new ColumnSeries() { - IsSortData = true, - SortBy = SortingAxis.X, - SortDirection = Direction.Descending, - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2011", - Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A)) - }; chart.Series.Add(columnSeries); @@ -233,13 +205,14 @@ The following example illustrates a simple chart having AutumnBrights palette (w {% highlight xml %} - + {% endhighlight %} @@ -247,23 +220,14 @@ The following example illustrates a simple chart having AutumnBrights palette (w ColumnSeries columnSeries = new ColumnSeries() { - IsSortData = true, - SortBy = SortingAxis.X, - SortDirection = Direction.Ascending, - Palette = ChartColorPalette.AutumnBrights, - ItemsSource = new ViewModel().Demands, - XBindingPath = "Position", - YBindingPath = "Year2011", - Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A)) - }; chart.Series.Add(columnSeries); @@ -280,15 +244,14 @@ chart.Series.Add(columnSeries); {% highlight xml %} - + {% endhighlight %} @@ -296,23 +259,14 @@ chart.Series.Add(columnSeries); ColumnSeries columnSeries = new ColumnSeries() { - IsSortData = true, - SortBy = SortingAxis.X, - SortDirection = Direction.Descending, - Palette = ChartColorPalette.AutumnBrights, - ItemsSource = new ViewModel().Demands, - XBindingPath = "Position", - YBindingPath = "Year2011", - Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A)) - }; chart.Series.Add(columnSeries); @@ -328,15 +282,15 @@ chart.Series.Add(columnSeries); {% tabs %} {% highlight xml %} - + {% endhighlight %} @@ -344,23 +298,14 @@ chart.Series.Add(columnSeries); ColumnSeries columnSeries = new ColumnSeries() { - IsSortData = true, - SortBy = SortingAxis.Y, - SortDirection = Direction.Ascending, - Palette = ChartColorPalette.AutumnBrights, - ItemsSource = new ViewModel().Demands, - XBindingPath = "Position", - YBindingPath = "Year2011", - Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A)) - }; chart.Series.Add(columnSeries); @@ -376,15 +321,15 @@ chart.Series.Add(columnSeries); {% tabs %} {% highlight xml %} - + {% endhighlight %} @@ -392,23 +337,14 @@ chart.Series.Add(columnSeries); ColumnSeries columnSeries = new ColumnSeries() { - IsSortData = true, - SortBy = SortingAxis.Y, - SortDirection = Direction.Descending, - Palette = ChartColorPalette.AutumnBrights, - ItemsSource = new ViewModel().Demands, - XBindingPath = "Position", - YBindingPath = "Year2011", - Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A)) - }; chart.Series.Add(columnSeries); From 18adb463258959a4fdefc1dec26b454377e37a2e Mon Sep 17 00:00:00 2001 From: SivaThennarasu Date: Mon, 20 Apr 2026 09:31:24 +0530 Subject: [PATCH 12/53] Corrected the code snippets and check the alignments --- wpf/Charts/Annotations.md | 5 +- wpf/Charts/ScaleBreaks.md | 180 ++++------- wpf/Charts/Striplines.md | 504 ++++++++++------------------- wpf/Charts/Technical-Indicators.md | 473 ++++++++++++--------------- wpf/Charts/Trendlines.md | 379 +++++++--------------- wpf/Charts/Vertical-Charts.md | 208 +++++------- 6 files changed, 652 insertions(+), 1097 deletions(-) diff --git a/wpf/Charts/Annotations.md b/wpf/Charts/Annotations.md index 2bd5c79c64..882e2ab936 100644 --- a/wpf/Charts/Annotations.md +++ b/wpf/Charts/Annotations.md @@ -1202,11 +1202,11 @@ The corresponding DateTime value will be given as values for X1 and X2 propertie {% highlight xaml %} - + - + @@ -1223,6 +1223,7 @@ The corresponding DateTime value will be given as values for X1 and X2 propertie {% highlight c# %} SfChart chart = new SfChart(); + chart.PrimaryAxis = new DateTimeAxis(); chart.SecondaryAxis = new NumericalAxis(); diff --git a/wpf/Charts/ScaleBreaks.md b/wpf/Charts/ScaleBreaks.md index 133ea7f5f4..c80fa3464e 100644 --- a/wpf/Charts/ScaleBreaks.md +++ b/wpf/Charts/ScaleBreaks.md @@ -26,37 +26,33 @@ Applying scale breaks helps in proper visualization of all the data points. {% highlight xaml %} - - - - - - - - - - - + + + + + + {% endhighlight %} {% highlight c# %} + NumericalAxis axis = new NumericalAxis(); ChartAxisScaleBreak scaleBreak = new ChartAxisScaleBreak(); scaleBreak.Start = 300; - scaleBreak.End = 8500; axis.AxisScaleBreaks.Add(scaleBreak); chart.SecondaryAxis = axis; + {% endhighlight %} {% endtabs %} @@ -85,19 +81,11 @@ Range [0,350] takes nearly 4/5th of the axis height and the range [8000,10000] t {% highlight xaml %} - - - - - - - - - - - + + + + + {% endhighlight %} @@ -111,7 +99,6 @@ axis.BreakPosition = ScaleBreakPosition.DataCount; ChartAxisScaleBreak scaleBreak = new ChartAxisScaleBreak(); scaleBreak.Start = 350; - scaleBreak.End = 8000; axis.AxisScaleBreaks.Add(scaleBreak); @@ -134,19 +121,11 @@ chart.SecondaryAxis = axis; {% highlight xaml %} - - - - - - - - - - - + + + + + {% endhighlight %} @@ -154,13 +133,11 @@ End="8000"> {% highlight c# %} NumericalAxis axis = new NumericalAxis(); - axis.BreakPosition = ScaleBreakPosition.Scale; ChartAxisScaleBreak scaleBreak = new ChartAxisScaleBreak(); scaleBreak.Start = 350; - scaleBreak.End = 8000; axis.AxisScaleBreaks.Add(scaleBreak); @@ -187,27 +164,23 @@ In the below image, each break is given percent value as 50. First break is posi {% highlight xaml %} - - - - - - - - - - - - - - - - - + + + + + + + + + {% endhighlight %} @@ -219,23 +192,15 @@ NumericalAxis axis = new NumericalAxis(); axis.BreakPosition = ScaleBreakPosition.Percent; ChartAxisScaleBreak scaleBreak1 = new ChartAxisScaleBreak(); - scaleBreak1.Start = 300; - scaleBreak1.End = 8000; - scaleBreak1.BreakPercent = 50; - axis.AxisScaleBreaks.Add(scaleBreak1); ChartAxisScaleBreak scaleBreak2 = new ChartAxisScaleBreak(); - scaleBreak2.Start = 12500; - scaleBreak2.End = 19000; - scaleBreak2.BreakPercent = 50; - axis.AxisScaleBreaks.Add(scaleBreak2); chart.SecondaryAxis = axis; @@ -256,27 +221,12 @@ Multiple breaks can be included in the chart. {% highlight xaml %} - - - - - - - - - - - - - - - - - + + + + + + {% endhighlight %} @@ -286,19 +236,13 @@ End="19000"> NumericalAxis axis = new NumericalAxis(); ChartAxisScaleBreak scaleBreak1 = new ChartAxisScaleBreak(); - scaleBreak1.Start = 300; - scaleBreak1.End = 8000; - axis.AxisScaleBreaks.Add(scaleBreak1); ChartAxisScaleBreak scaleBreak2 = new ChartAxisScaleBreak(); - scaleBreak2.Start = 12500; - scaleBreak2.End = 19000; - axis.AxisScaleBreaks.Add(scaleBreak2); chart.SecondaryAxis = axis; @@ -321,25 +265,19 @@ Line type such as [`Wave`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml {% highlight xaml %} - - - - - - - - - - - - - + + + + + + {% endhighlight %} @@ -351,17 +289,11 @@ NumericalAxis axis = new NumericalAxis(); ChartAxisScaleBreak scaleBreak = new ChartAxisScaleBreak(); scaleBreak.Start = 300; - scaleBreak.End = 8500; - scaleBreak.LineType = BreakLineType.Wave; - scaleBreak.BreakSpacing = 12; - scaleBreak.Fill = new SolidColorBrush(Colors.PaleTurquoise); - scaleBreak.Stroke = new SolidColorBrush(Colors.Black); - scaleBreak.StrokeThickness = 1.2; axis.AxisScaleBreaks.Add(scaleBreak); diff --git a/wpf/Charts/Striplines.md b/wpf/Charts/Striplines.md index deec31c03a..f10c11d16e 100644 --- a/wpf/Charts/Striplines.md +++ b/wpf/Charts/Striplines.md @@ -20,17 +20,11 @@ SfChart provides [`Start`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml {% highlight xaml %} - - - - - - - - - - - + + + + + {% endhighlight %} @@ -38,14 +32,11 @@ SfChart provides [`Start`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml {% highlight c# %} NumericalAxis axis = new NumericalAxis(); - ChartStripLine stripline = new ChartStripLine() { - - Start = 20, Width = 10, - + Start = 20, + Width = 10, Background = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC)) - }; axis.StripLines.Add(stripline); @@ -70,19 +61,11 @@ The following code example illustrates the positioning of stripline based on pix {% highlight xaml %} - - - - - - - - - - - + + + + + {% endhighlight %} @@ -93,13 +76,10 @@ NumericalAxis axis = new NumericalAxis(); ChartStripLine stripline = new ChartStripLine() { - - Start = 20, Width = 10, - + Start = 20, + Width = 10, IsPixelWidth = true, - Background = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC)) - }; axis.StripLines.Add(stripline); @@ -124,25 +104,17 @@ The [`LabelHorizontalAlignment`](https://help.syncfusion.com/cr/wpf/Syncfusion.U {% highlight xaml %} - - - - - - - - - - - + + + + + {% endhighlight %} @@ -153,17 +125,12 @@ NumericalAxis axis = new NumericalAxis(); ChartStripLine stripline = new ChartStripLine() { - - Start = 20, Width = 10, - + Start = 20, + Width = 10, Label = "Stock Price", - LabelHorizontalAlignment = HorizontalAlignment.Center, - LabelVerticalAlignment = VerticalAlignment.Top, - Background = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC)) - }; axis.StripLines.Add(stripline); @@ -186,23 +153,16 @@ The label can be rotated to the specified angle using [`LabelAngle`](https://hel {% highlight xaml %} - - - - - - - - - - - + + + + + {% endhighlight %} @@ -213,15 +173,11 @@ NumericalAxis axis = new NumericalAxis(); ChartStripLine stripline = new ChartStripLine() { - - Start = 20, Width = 10, - + Start = 20, + Width = 10, Label = "Stock Price", - LabelAngle = -45, - Background = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC)) - }; axis.StripLines.Add(stripline); @@ -245,46 +201,35 @@ N> Here, Start and Width of the stripline as adjusted based on the rotation angl {% highlight xaml %} - - + - - - - - - - - + + + - - - - - - - - - - - - + + + + + - {% endhighlight %} @@ -292,22 +237,15 @@ N> Here, Start and Width of the stripline as adjusted based on the rotation angl {% highlight c# %} SfChart chart = new SfChart(); - chart.PrimaryAxis = new NumericalAxis(); ChartStripLine stripline = new ChartStripLine() { - Width = 20, - Start = 10, - Label = "Stock Price", - Background =new SolidColorBrush(Color.FromRgb(0xC3,0XC3,0XC3)), - LabelTemplate = chart.Resources["labelTemplate"] as DataTemplate - }; chart.PrimaryAxis.StripLines.Add(stripline); @@ -328,35 +266,28 @@ You can add multiple number of striplines in the same axis like the following co {% highlight xaml %} - - - - - - - - - - - - - - - + + + + + + + + + {% endhighlight %} @@ -367,41 +298,31 @@ NumericalAxis axis = new NumericalAxis(); ChartStripLine stripline1 = new ChartStripLine() { - - SegmentStartValue = 0, Start = 0, - - Width = 10, Label = "Low", - + SegmentStartValue = 0, + Start = 0, + Width = 10, + Label = "Low", Background = new SolidColorBrush(Color.FromRgb(0xC3, 0xC3, 0xC3)) - }; ChartStripLine stripline2 = new ChartStripLine() { - - Start = 20, Width = 10, - + Start = 20, + Width = 10, Label = "Average", - Background = new SolidColorBrush(Color.FromRgb(0xC3, 0xC3, 0xC3)) - }; ChartStripLine stripline3 = new ChartStripLine() { - - Start = 40,Width = 10, - + Start = 40, + Width = 10, Label = "High", - Background = new SolidColorBrush(Color.FromRgb(0xC3, 0xC3, 0xC3)) - }; axis.StripLines.Add(stripline1); - axis.StripLines.Add(stripline2); - axis.StripLines.Add(stripline3); chart.SecondaryAxis = axis; @@ -422,15 +343,19 @@ N> This can be used to fill plot area background alternatively. {% highlight xaml %} - - - - - + + + {% endhighlight %} @@ -440,35 +365,24 @@ Width="10" Start="10" Background="#A3A3A3"/> NumericalAxis axis = new NumericalAxis(); ChartStripLine stripline1 = new ChartStripLine() - { - RepeatEvery = 20, - RepeatUntil = 50, - - Start = 0, Width = 10, - + Start = 0, + Width = 10, Background = new SolidColorBrush(Color.FromRgb(0xC3, 0xC3, 0xC3)) - }; ChartStripLine stripline2 = new ChartStripLine() - { - RepeatEvery = 20, - RepeatUntil = 50, - - Start = 10, Width = 10, - + Start = 10, + Width = 10, Background = new SolidColorBrush(Color.FromRgb(0xA3, 0xA3, 0xA3)) - }; axis.StripLines.Add(stripline1); - axis.StripLines.Add(stripline2); chart.SecondaryAxis = axis; @@ -493,45 +407,39 @@ The following code example demonstrates segmented striplines. {% highlight xaml %} - - - - - - - - - - - - - - - + + + + + + + + + {% endhighlight %} @@ -542,63 +450,42 @@ NumericalAxis axis = new NumericalAxis(); ChartStripLine stripline1 = new ChartStripLine() { - IsSegmented = true, - SegmentStartValue = 0, - SegmentEndValue = 2, - SegmentAxisName = "Segment1", - - Start = 0, Width = 10, - + Start = 0, + Width = 10, Label = "Low", - Background = new SolidColorBrush(Color.FromRgb(0xC3, 0xC3, 0xC3)) - }; ChartStripLine stripline2 = new ChartStripLine() { IsSegmented = true, - SegmentStartValue = 2, - SegmentEndValue = 4, - SegmentAxisName = "Segment2", - - Start = 20, Width = 10, - + Start = 20, + Width = 10, Label = "Average", - Background = new SolidColorBrush(Color.FromRgb(0xC3, 0xC3, 0xC3)) }; ChartStripLine stripline3 = new ChartStripLine() { - IsSegmented = true, - SegmentStartValue = 4, - SegmentEndValue = 6, - SegmentAxisName = "Segment3", - - Start = 40, Width = 10, - + Start = 40, + Width = 10, Label = "High", - Background = new SolidColorBrush(Color.FromRgb(0xC3, 0xC3, 0xC3)) - }; axis.StripLines.Add(stripline1); - axis.StripLines.Add(stripline2); - axis.StripLines.Add(stripline3); chart.SecondaryAxis = axis; @@ -619,23 +506,16 @@ The background, border brush and border thickness of the stripline can be modifi {% highlight xaml %} - - - - - - - - - - - + + + + + {% endhighlight %} @@ -645,17 +525,12 @@ Background="#C3C3C3"/> NumericalAxis axis = new NumericalAxis(); ChartStripLine stripline = new ChartStripLine() - { - - Start = 20, Width = 15, - + Start = 20, + Width = 15, BorderThickness = new Thickness(2), - BorderBrush = new SolidColorBrush(Colors.Black), - Background = new SolidColorBrush(Color.FromRgb(0xC3, 0xC3, 0xC3)) - }; axis.StripLines.Add(stripline); @@ -678,39 +553,27 @@ You can set the transparency for the striplines using `Opacity` property as in t {% highlight xaml %} - - - - - - - - - - - + + + + + - - - - - - - - - - - - - - - - - + + + + + + + + + {% endhighlight %} @@ -721,13 +584,10 @@ NumericalAxis axis = new NumericalAxis(); ChartStripLine stripline = new ChartStripLine() { - - Start = 25,Width = 15, - + Start = 25, + Width = 15, Opacity = 0.4, - Background = new SolidColorBrush(Color.FromRgb(0xC3, 0xC3, 0xC3)) - }; axis.StripLines.Add(stripline); @@ -736,19 +596,13 @@ chart.SecondaryAxis = axis; chart.Watermark = new Watermark() { - HorizontalAlignment = HorizontalAlignment.Center, - VerticalAlignment = VerticalAlignment.Center - }; TextBlock textBlock = new TextBlock(); - textBlock.Text = "StockValue"; - textBlock.FontSize = 70; - textBlock.RenderTransform = new RotateTransform() { Angle = 345 }; chart.Watermark.Content = textBlock; diff --git a/wpf/Charts/Technical-Indicators.md b/wpf/Charts/Technical-Indicators.md index 8bcc8f9243..6f71ad07e8 100644 --- a/wpf/Charts/Technical-Indicators.md +++ b/wpf/Charts/Technical-Indicators.md @@ -26,11 +26,7 @@ Here for instance, the [Accumulation Distribution](https://help.syncfusion.com/c {% highlight xaml %} - - - - - + {% endhighlight %} @@ -54,11 +50,12 @@ Next you need to bind the property path for the [`Open`](https://help.syncfusion {% highlight xaml %} - - - - - + + {% endhighlight %} @@ -67,11 +64,10 @@ Next you need to bind the property path for the [`Open`](https://help.syncfusion AccumulationDistributionIndicator indicator = new AccumulationDistributionIndicator() { - - Open = "Open", Close = "Close", - - High = "High", Low = "Low" - + Open = "Open", + Close = "Close", + High = "High", + Low = "Low" }; chart.TechnicalIndicators.Add(indicator); @@ -87,15 +83,14 @@ chart.TechnicalIndicators.Add(indicator); {% highlight xaml %} - - - - - + + {% endhighlight %} @@ -104,15 +99,12 @@ XBindingPath="Date"> AccumulationDistributionIndicator indicator = new AccumulationDistributionIndicator() { - - ItemsSource = new ViewModel().StockPriceDetails, - + ItemsSource = new ViewModel().StockPriceDetails, XBindingPath = "Date", - - Open = "Open", Close = "Close", - - High = "High", Low = "Low" - + Open = "Open", + Close = "Close", + High = "High", + Low = "Low" }; chart.TechnicalIndicators.Add(indicator); @@ -137,15 +129,16 @@ You can define the [`AverageTrueRangeIndicator`](https://help.syncfusion.com/cr/ {% highlight xaml %} - - - + {% endhighlight %} @@ -154,19 +147,15 @@ Open="Open" Close="Close"/ > AverageTrueRangeIndicator indicator = new AverageTrueRangeIndicator() { - ItemsSource = new ViewModel().StockPriceDetails, - XBindingPath = "Date", - - Open = "Open", Close = "Close", - - High = "High", Low = "Low", - - Volume ="Volume", Period = 3, - + Open = "Open", + Close = "Close", + High = "High", + Low = "Low", + Volume ="Volume", + Period = 3, SignalLineColor = new SolidColorBrush(Colors.Black) - }; chart.TechnicalIndicators.Add(indicator); @@ -187,17 +176,17 @@ The following code example demonstrates the usage of [`SimpleAverageIndicator`]( {% highlight xaml %} - - - - - + + {% endhighlight %} @@ -206,19 +195,15 @@ High="High" Low="Low" Open="Open" Close="Close" > SimpleAverageIndicator indicator = new SimpleAverageIndicator() { - - ItemsSource = new ViewModel().StockPriceDetails, - + ItemsSource = new ViewModel().ViewModel1, XBindingPath = "Date", - - Open = "Open", Close = "Close", - - High = "High", Low = "Low", - - Volume ="Volume", Period = 3, - + Open = "Open", + Close = "Close", + High = "High", + Low = "Low", + Volume = "Volume", + Period = 3, SignalLineColor = new SolidColorBrush(Colors.Black) - }; chart.TechnicalIndicators.Add(indicator); @@ -243,17 +228,18 @@ To define the [`RSITechnicalIndicator`](https://help.syncfusion.com/cr/wpf/Syncf {% highlight xaml %} - - - + {% endhighlight %} @@ -262,23 +248,17 @@ High="High" Low="Low" Open="Open" Close="Close"/> RSITechnicalIndicator indicator = new RSITechnicalIndicator() { - ItemsSource = new ViewModel().StockPriceDetails, - XBindingPath = "Date", - - Open = "Open", Close = "Close", - - High = "High", Low = "Low", - - Volume ="Volume", Period = 3, - + Open = "Open", + Close = "Close", + High = "High", + Low = "Low", + Volume = "Volume", + Period = 3, SignalLineColor = new SolidColorBrush(Colors.Black), - UpperLineColor = new SolidColorBrush(Colors.Blue), - LowerLineColor = new SolidColorBrush(Colors.Red) - }; chart.TechnicalIndicators.Add(indicator); @@ -300,17 +280,21 @@ The [`MomentumLineColor`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml. {% highlight xaml %} - - - + + + {% endhighlight %} @@ -318,21 +302,16 @@ High="High" Low="Low" Open="Open" Close="Close"/ > MomentumTechnicalIndicator indicator = new MomentumTechnicalIndicator() { - - ItemsSource = new ViewModel().StockPriceDetails, - + ItemsSource = new ViewModel().ViewModel1, XBindingPath = "Date", - - Open = "Open", Close = "Close", - - High = "High", Low = "Low", - - Volume ="Volume", Period = 3, - + Open = "Open", + Close = "Close", + High = "High", + Low = "Low", + Volume = "Volume", + Period = 3, MomentumLineColor = new SolidColorBrush(Colors.Black), - CenterLineColor = new SolidColorBrush(Colors.Red) - }; chart.TechnicalIndicators.Add(indicator); @@ -357,17 +336,21 @@ You can define stochastic technical indicator using the following code example: {% highlight xaml %} - - - + {% endhighlight %} @@ -376,25 +359,20 @@ High="High" Low="Low" Open="Open" Close="Close"/> StochasticTechnicalIndicator indicator = new StochasticTechnicalIndicator() { - - ItemsSource = new ViewModel().StockPriceDetails, - - XBindingPath = "Date", Volume = "Volume", - - Open = "Open", Close = "Close", - - High = "High", Low = "Low", - - Period = 3,KPeriod = 8,DPeriod = 5, - + ItemsSource = new ViewModel().ViewModel1, + XBindingPath = "Date", + Volume = "Volume", + Open = "Open", + Close = "Close", + High = "High", + Low = "Low", + Period = 3, + KPeriod = 8, + DPeriod = 5, SignalLineColor = new SolidColorBrush(Colors.Black), - PeriodLineColor = new SolidColorBrush(Colors.Red), - UpperLineColor = new SolidColorBrush(Colors.Blue), - LowerLineColor = new SolidColorBrush(Colors.Purple) - }; chart.TechnicalIndicators.Add(indicator); @@ -415,15 +393,16 @@ The [`ExponentialAverageIndicator`](https://help.syncfusion.com/cr/wpf/Syncfusio {% highlight xaml %} - - - + {% endhighlight %} @@ -432,19 +411,15 @@ Open="Open" Close="Close"/ > ExponentialAverageIndicator indicator = new ExponentialAverageIndicator() { - - ItemsSource = new ViewModel().StockPriceDetails, - + ItemsSource = new ViewModel().ViewModel1, XBindingPath = "Date", - - Open = "Open", Close = "Close", - - High = "High", Low = "Low", - - Volume ="Volume", Period = 3, - + Open = "Open", + Close = "Close", + High = "High", + Low = "Low", + Volume = "Volume", + Period = 3, SignalLineColor = new SolidColorBrush(Colors.Black) - }; chart.TechnicalIndicators.Add(indicator); @@ -465,15 +440,16 @@ The [`TriangularAverageIndicator`](https://help.syncfusion.com/cr/wpf/Syncfusion {% highlight xaml %} - - - + {% endhighlight %} @@ -482,19 +458,15 @@ Open="Open" Close="Close"/ > TriangularAverageIndicator indicator = new TriangularAverageIndicator() { - ItemsSource = new ViewModel().StockPriceDetails, - XBindingPath = "Date", - - Open = "Open", Close = "Close", - - High = "High", Low = "Low", - - Volume ="Volume", Period = 3, - + Open = "Open", + Close = "Close", + High = "High", + Low = "Low", + Volume = "Volume", + Period = 3 SignalLineColor = new SolidColorBrush(Colors.Black) - }; chart.TechnicalIndicators.Add(indicator); @@ -515,19 +487,16 @@ The following code example help you to add [`AccumulationDistributionIndicator`] {% highlight xaml %} - - - - - + + {% endhighlight %} @@ -536,19 +505,14 @@ Open="Open" Close="Close" > AccumulationDistributionIndicator indicator = new AccumulationDistributionIndicator() { - ItemsSource = new ViewModel().StockPriceDetails, - XBindingPath = "Date", - - Open = "Open", Close = "Close", - - High = "High", Low = "Low", - - Volume ="Volume", Period = 3, - + Open = "Open", + Close = "Close", + High = "High", + Low = "Low", + Volume = "Volume", SignalLineColor = new SolidColorBrush(Colors.Black) - }; chart.TechnicalIndicators.Add(indicator); @@ -571,17 +535,18 @@ You can define the [`BollingerBandIndicator`](https://help.syncfusion.com/cr/wpf {% highlight xaml %} - - - + {% endhighlight %} @@ -590,23 +555,17 @@ High="High" Low="Low" Open="Open" Close="Close"/> BollingerBandIndicator indicator = new BollingerBandIndicator() { - - ItemsSource = new ViewModel().StockPriceDetails, - + ItemsSource = new ViewModel().ViewModel1, XBindingPath = "Date", - - Open = "Open", Close = "Close", - - High = "High", Low = "Low", - - Volume ="Volume", Period = 3, - + Open = "Open", + Close = "Close", + High = "High", + Low = "Low", + Volume = "Volume", + Period = 3, SignalLineColor = new SolidColorBrush(Colors.Black), - UpperLineColor = new SolidColorBrush(Colors.Blue), - LowerLineColor = new SolidColorBrush(Colors.Red) - }; chart.TechnicalIndicators.Add(indicator); @@ -633,19 +592,22 @@ You can define the [`MACDTechnicalIndicator`](https://help.syncfusion.com/cr/wpf {% highlight xaml %} - - - - - + + {% endhighlight %} @@ -654,25 +616,20 @@ High="High" Low="Low" Open="Open" Close="Close" > MACDTechnicalIndicator indicator = new MACDTechnicalIndicator() { - ItemsSource = new ViewModel().StockPriceDetails, - - XBindingPath = "Date", Volume = "Volume", - - Open = "Open", Close = "Close", - - High = "High", Low = "Low", - - Period = 3, ShortPeriod = 2, LongPeriod = 6, - - Type = MACDType.Line , - + XBindingPath = "Date", + Volume = "Volume", + Open = "Open", + Close = "Close", + High = "High", + Low = "Low", + Period = 3, + ShortPeriod = 2, + LongPeriod = 6, + Type = MACDType.Line, SignalLineColor = new SolidColorBrush(Colors.Black), - ConvergenceLineColor = new SolidColorBrush(Colors.Red), - - DivergenceLineColor = new SolidColorBrush(Colors.Blue), - + DivergenceLineColor = new SolidColorBrush(Colors.Blue) }; chart.TechnicalIndicators.Add(indicator); diff --git a/wpf/Charts/Trendlines.md b/wpf/Charts/Trendlines.md index a73a8e3a41..15a205bb8b 100644 --- a/wpf/Charts/Trendlines.md +++ b/wpf/Charts/Trendlines.md @@ -17,49 +17,42 @@ The following code examples illustrate how to add trend lines to the chart. {% highlight xaml %} - - - - - - - + + + + + + {% endhighlight %} {% highlight c# %} ScatterSeries scatterSeries = new ScatterSeries() { - ItemsSource = new ViewModel().List, - XBindingPath = "Year", - YBindingPath = "India", - ScatterHeight = 15, - ScatterWidth = 15, - Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A)), - Label = "Series" - }; Trendline trendline = new Trendline() { - Label ="Trend" - }; + scatterSeries.Trendlines.Add(trendline); chart.Series.Add(scatterSeries); @@ -79,17 +72,20 @@ The visibility of the trend line is defined using [`IsTrendlineVisible`](https:/ {% highlight xaml %} - - - - - - - + + + + + @@ -99,34 +95,22 @@ ScatterHeight="15" ScatterWidth="15"> ScatterSeries scatterSeries = new ScatterSeries() { - ItemsSource = new ViewModel().List, - XBindingPath = "Year", - YBindingPath = "India", - ScatterHeight = 15, - ScatterWidth = 15, - Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A)), - Label = "Series" - }; Trendline trendline = new Trendline() { - - Label ="Trend", - + Label = "Trend", IsTrendlineVisible = true - }; scatterSeries.Trendlines.Add(trendline); - chart.Series.Add(scatterSeries); {% endhighlight %} @@ -162,55 +146,40 @@ The following is the code example of this trend line. {% highlight xaml %} - - - - - + - + + + - + {% endhighlight %} {% highlight c# %} -FastLineSeries fastSeries = new FastLineSeries() { - ItemsSource = new ViewModel().StockPriceDetails, - XBindingPath = "Date", - YBindingPath = "Value", - Interior = new SolidColorBrush(Color.FromRgb(0x7f, 0x7f, 0x7f)), - Label = "Stock Price" - }; Trendline trendline = new Trendline() { - Label = "Trend", - - Stroke =new SolidColorBrush(Colors.Black), - + Stroke = new SolidColorBrush(Colors.Black), Type = TrendlineType.Linear - }; fastSeries.Trendlines.Add(trendline); -chart.Series.Add(fastS +chart.Series.Add(fastSeries); {% endhighlight %} @@ -242,46 +211,32 @@ Interior="#7F7F7F" ItemsSource="{Binding StockPriceDetails}"> - - - + - - {% endhighlight %} {% highlight c# %} FastLineSeries fastSeries = new FastLineSeries() { - ItemsSource = new ViewModel().StockPriceDetails, - XBindingPath = "Date", - YBindingPath = "Value", - Interior = new SolidColorBrush(Color.FromRgb(0x7f, 0x7f, 0x7f)), - Label = "Stock Price" - }; Trendline trendline = new Trendline() { - Label = "Trend", - Stroke =new SolidColorBrush(Colors.Black), - Type = TrendlineType.Exponential - }; fastSeries.Trendlines.Add(trendline); -chart.Series.Add(fastS +chart.Series.Add(fastSeries); {% endhighlight %} @@ -306,19 +261,15 @@ The following code example explains how to define the power trendline. {% highlight xaml %} - +< - - - - - + + + @@ -330,31 +281,22 @@ FastLineSeries fastSeries = new FastLineSeries() { ItemsSource = new ViewModel().StockPriceDetails, - XBindingPath = "Date", - YBindingPath = "Value", - Interior = new SolidColorBrush(Color.FromRgb(0x7f, 0x7f, 0x7f)), - Label = "Stock Price" - }; Trendline trendline = new Trendline() { - Label = "Trend", - Stroke =new SolidColorBrush(Colors.Black), - Type = TrendlineType.Power - }; fastSeries.Trendlines.Add(trendline); -chart.Series.Add(fastS +chart.Series.Add(fastSeries); {% endhighlight %} @@ -376,19 +318,15 @@ The following code example illustrates the use of logarithmic trend line. {% highlight xaml %} - + - - - - - + + + @@ -398,33 +336,23 @@ ItemsSource="{Binding StockPriceDetails}"> FastLineSeries fastSeries = new FastLineSeries() { - ItemsSource = new ViewModel().StockPriceDetails, - XBindingPath = "Date", - YBindingPath = "Value", - Interior = new SolidColorBrush(Color.FromRgb(0x7f, 0x7f, 0x7f)), - Label = "Stock Price" - }; Trendline trendline = new Trendline() { - Label = "Trend", - Stroke =new SolidColorBrush(Colors.Black), - Type = TrendlineType.Logarithmic - }; fastSeries.Trendlines.Add(trendline); -chart.Series.Add(fastS +chart.Series.Add(fastSeries); {% endhighlight %} @@ -446,19 +374,15 @@ To define the polynomial trendline, you can use the following code example. {% highlight xaml %} - -Interior="#7F7F7F" - -ItemsSource="{Binding StockPriceDetails}"> - - - - - - + + + @@ -468,33 +392,23 @@ ItemsSource="{Binding StockPriceDetails}"> FastLineSeries fastSeries = new FastLineSeries() { - ItemsSource = new ViewModel().StockPriceDetails, - XBindingPath = "Date", - YBindingPath = "Value", - Interior = new SolidColorBrush(Color.FromRgb(0x7f, 0x7f, 0x7f)), - Label = "Stock Price" - }; Trendline trendline = new Trendline() { - Label = "Trend", - Stroke =new SolidColorBrush(Colors.Black), - Type = TrendlineType.Polynomial - }; fastSeries.Trendlines.Add(trendline); -chart.Series.Add(fastS +chart.Series.Add(fastSeries); {% endhighlight %} @@ -510,21 +424,18 @@ You can set the Polynomial order for this trendline. Polynomial order calculates {% highlight xaml %} - -YBindingPath="Value" - -Interior="#7F7F7F" - -ItemsSource="{Binding StockPriceDetails}"> - - - - - - + + + @@ -534,30 +445,19 @@ PolynomialOrder="5"/> FastLineSeries fastSeries = new FastLineSeries() { - ItemsSource = new ViewModel().StockPriceDetails, - XBindingPath = "Date", - YBindingPath = "Value", - Interior = new SolidColorBrush(Color.FromRgb(0x7f, 0x7f, 0x7f)), - Label = "Stock Price" - }; Trendline trendline = new Trendline() { - Label = "Trend", - Stroke =new SolidColorBrush(Colors.Black), - Type = TrendlineType.Polynomial, - PolynomialOrder = 5 - }; fastSeries.Trendlines.Add(trendline); @@ -587,19 +487,20 @@ For determining the future trends (in forward direction). The following code exa {% highlight xaml %} - - - - - - - + + + + + @@ -609,32 +510,20 @@ Type="Polynomial" PolynomialOrder="3" ForwardForecast="5" /> FastLineSeries fastSeries = new FastLineSeries() { - ItemsSource = new ViewModel().StockPriceDetails, - XBindingPath = "Date", - YBindingPath = "Value", - Interior = new SolidColorBrush(Color.FromRgb(0x7f, 0x7f, 0x7f)), - Label = "Stock Price" - }; Trendline trendline = new Trendline() { - Label = "Trend", - Stroke =new SolidColorBrush(Colors.Black), - Type = TrendlineType.Polynomial, - PolynomialOrder = 3, - ForwardForecast = 5 - }; fastSeries.Trendlines.Add(trendline); @@ -655,20 +544,20 @@ For determining the past trends (in backward direction). The following code exam {% highlight xaml %} - - - - - - - - + + + + + {% endhighlight %} @@ -677,32 +566,20 @@ Type="Polynomial" PolynomialOrder="3" BackwardForecast="5" /> FastLineSeries fastSeries = new FastLineSeries() { - ItemsSource = new ViewModel().StockPriceDetails, - XBindingPath = "Date", - YBindingPath = "Value", - Interior = new SolidColorBrush(Color.FromRgb(0x7f, 0x7f, 0x7f)), - Label = "Stock Price" - }; Trendline trendline = new Trendline() { - Label = "Trend", - Stroke =new SolidColorBrush(Colors.Black), - Type = TrendlineType.Polynomial, - PolynomialOrder = 3, - BackwardForecast = 5 - }; fastSeries.Trendlines.Add(trendline); @@ -724,19 +601,20 @@ You can customize the trendline [`Stroke`](https://help.syncfusion.com/cr/wpf/Sy {% highlight xaml %} - - - - - - - + + + + + @@ -746,36 +624,23 @@ StrokeDashArray="4,4" StrokeThickness="2" /> FastLineSeries fastSeries = new FastLineSeries() { - ItemsSource = new ViewModel().StockPriceDetails, - XBindingPath = "Date", - YBindingPath = "Value", - Interior = new SolidColorBrush(Color.FromRgb(0x7f, 0x7f, 0x7f)), - Label = "Stock Price" - }; Trendline trendline = new Trendline() { - Label = "Trend", - Stroke = new SolidColorBrush(Colors.Black), - Type = TrendlineType.Linear, - StrokeThickness = 2, - StrokeDashArray = new DoubleCollection() { 4, 4 } - }; fastSeries.Trendlines.Add(trendline); - chart.Series.Add(fastSeries); {% endhighlight %} diff --git a/wpf/Charts/Vertical-Charts.md b/wpf/Charts/Vertical-Charts.md index 21b7e4fbe1..f2d58f8c14 100644 --- a/wpf/Charts/Vertical-Charts.md +++ b/wpf/Charts/Vertical-Charts.md @@ -20,42 +20,34 @@ Allows to position the axis in the opposite direction to the default position. T {% highlight xaml %} - - - - - + + - - - + + {% endhighlight %} {% highlight c# %} chart.PrimaryAxis = new CategoryAxis() { - - OpposedPosition = true - + OpposedPosition = true }; chart.SecondaryAxis = new NumericalAxis() { - Minimum = 0, - - Maximum = 40, - - Interval = 10, - - OpposedPosition = true - + Minimum = 0, + Maximum = 40, + Interval = 10, + OpposedPosition = true }; {% endhighlight %} @@ -73,11 +65,12 @@ This property used to switch the plotting of the series to vertical. {% highlight xaml %} - + + {% endhighlight %} @@ -85,15 +78,10 @@ YBindingPath="ItemsCount" > LineSeries series = new LineSeries() { - - IsTransposed = true, - - ItemsSource = new ViewModel().SneakersDetail, - - XBindingPath = "Brand", - - YBindingPath = "ItemsCount" - + IsTransposed = true, + ItemsSource = new ViewModel().SneakersDetail, + XBindingPath = "Brand", + YBindingPath = "ItemsCount" }; {% endhighlight %} @@ -109,70 +97,61 @@ The following example demonstrates the vertical charts. {% highlight xaml %} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {% endhighlight %} @@ -182,94 +161,61 @@ SymbolInterior="DarkGray" SymbolWidth="10"> SfChart chart = new SfChart(); chart.ColumnDefinitions.Add(new ChartColumnDefinition()); - chart.ColumnDefinitions.Add(new ChartColumnDefinition()); chart.PrimaryAxis = new CategoryAxis() { - ShowGridLines = true - }; NumericalAxis axis = new NumericalAxis(); - chart.SecondaryAxis = axis; - ChartBase.SetColumn(axis, 1); LineSeries series1 = new LineSeries() { - IsTransposed = true, - ItemsSource = new ViewModel().SneakersDetail, - XBindingPath = "Brand", - YBindingPath = "ItemsCount" - }; ChartAdornmentInfo adornmentInfo1 = new ChartAdornmentInfo() { - ShowMarker = true, - Symbol = ChartSymbol.Ellipse, - SymbolHeight = 10, - SymbolWidth = 10, - SymbolInterior = new SolidColorBrush(Color.FromRgb(0x7f, 0x7f, 0x7f)), - }; LineSeries series2 = new LineSeries() { - IsTransposed = true, - Interior = new SolidColorBrush(Colors.DarkGray), - ItemsSource = new ViewModel().SneakersDetail, - XBindingPath = "Brand", - YBindingPath = "position", - YAxis = new NumericalAxis() - }; ChartAdornmentInfo adornmentInfo2 = new ChartAdornmentInfo() { - ShowLabel = false, - ShowMarker = true, - Symbol = ChartSymbol.Ellipse, - SymbolHeight = 10, - SymbolWidth = 10, - SymbolInterior = new SolidColorBrush(Colors.DarkGray), - }; series1.AdornmentsInfo = adornmentInfo1; - series2.AdornmentsInfo = adornmentInfo2; ChartBase.SetColumn(series1, 0); - ChartBase.SetColumn(series2, 1); chart.Series.Add(series1); - chart.Series.Add(series2); {% endhighlight %} From 9e3317ed17cb0432817bbd6e259ea72834d49476 Mon Sep 17 00:00:00 2001 From: SivaThennarasu Date: Mon, 20 Apr 2026 17:34:52 +0530 Subject: [PATCH 13/53] Check the alignments and corrected the code snippets --- wpf/Charts/Animation.md | 27 +- wpf/Charts/Appearance.md | 446 ++++++++---------- wpf/Charts/Exporting.md | 10 +- wpf/Charts/Interactive-Features/Crosshair.md | 168 ++----- .../Resizable-Scrollbar.md | 73 +-- wpf/Charts/Interactive-Features/Selection.md | 301 ++++-------- wpf/Charts/Interactive-Features/Tooltip.md | 442 ++++++++--------- wpf/Charts/Interactive-Features/Trackball.md | 259 +++------- .../Visual-Data-Editing.md | 306 +++++------- wpf/Charts/Interactive-Features/zoompan.md | 178 ++----- wpf/Charts/Printing.md | 80 ++-- wpf/Charts/Watermark.md | 87 ++-- 12 files changed, 845 insertions(+), 1532 deletions(-) diff --git a/wpf/Charts/Animation.md b/wpf/Charts/Animation.md index 3589a6f61b..cb7e021c1b 100644 --- a/wpf/Charts/Animation.md +++ b/wpf/Charts/Animation.md @@ -40,11 +40,12 @@ The following example shows the Animation feature for chart series. {% highlight xaml %} - - - + {% endhighlight %} @@ -53,17 +54,11 @@ XBindingPath="Category" YBindingPath="Count" ItemsSource="{Binding}"/> ColumnSeries columnSeries = new ColumnSeries() { - - ItemsSource = new ViewModel().Data, - - XBindingPath = "Category", - - YBindingPath = "Count", - - EnableAnimation = true, - - AnimationDuration = new TimeSpan(00, 00, 03) - + ItemsSource = new ViewModel().Data, + XBindingPath = "Category", + YBindingPath = "Count", + EnableAnimation = true, + AnimationDuration = new TimeSpan(00, 00, 03) }; chart.Series.Add(columnSeries); diff --git a/wpf/Charts/Appearance.md b/wpf/Charts/Appearance.md index 3af66caa81..4da53198a8 100644 --- a/wpf/Charts/Appearance.md +++ b/wpf/Charts/Appearance.md @@ -40,7 +40,7 @@ Each palette applies a set of predefined brushes to the series in a predefined o {% highlight xaml %} - + {% endhighlight %} @@ -84,26 +84,22 @@ Each palette applies a set of predefined brushes to the segment in a predefined {% highlight xaml %} - + {% endhighlight %} {% highlight c# %} DoughnutSeries series = new DoughnutSeries() - { - ItemsSource = new ViewModel().Tax, - XBindingPath = "Category", - YBindingPath = "Percentage", - Palette = ChartColorPalette.Metro - }; chart.Series.Add(series); @@ -120,26 +116,22 @@ The following code example defined Palette as **AutumnBrights**. {% highlight xaml %} - + {% endhighlight %} {% highlight c# %} DoughnutSeries series = new DoughnutSeries() - { - ItemsSource = new ViewModel().Tax, - XBindingPath = "Category", - YBindingPath = "Percentage", - Palette = ChartColorPalette.AutumnBrights - }; chart.Series.Add(series); @@ -161,26 +153,19 @@ SfChart provides option which enables you to define your own color brushes with {% highlight xaml %} - - - - - - - - - - - - - - - - - - + + + + + + + + + {% endhighlight %} @@ -188,24 +173,16 @@ XBindingPath="Category" ItemsSource="{Binding Tax}" > {% highlight c# %} ChartColorModel colorModel = new ChartColorModel(); - colorModel.CustomBrushes.Add(new SolidColorBrush(Colors.Cyan)); - colorModel.CustomBrushes.Add(new SolidColorBrush(Colors.DarkCyan)); DoughnutSeries series = new DoughnutSeries() { - - ItemsSource = new ViewModel().Tax, - + ItemsSource = new ViewModel().Tax, XBindingPath = "Category", - YBindingPath = "Percentage", - - Palette = ChartColorPalette.Custom, - - ColorModel = colorModel - + Palette = ChartColorPalette.Custom, + ColorModel = colorModel }; chart.Series.Add(series); @@ -223,25 +200,20 @@ You can define the custom palette for series as in the below code example: {% highlight xaml %} - - - - - - - - - - - + - - - - - - - + + + + + + + + + @@ -250,13 +222,10 @@ You can define the custom palette for series as in the below code example: {% highlight c# %} chart.Palette = ChartColorPalette.Custom; - ChartColorModel colorModel = new ChartColorModel(); colorModel.CustomBrushes.Add(new SolidColorBrush(Colors.BlueViolet)); - colorModel.CustomBrushes.Add(new SolidColorBrush(Colors.PeachPuff)); - colorModel.CustomBrushes.Add(new SolidColorBrush(Colors.Purple)); chart.ColorModel = colorModel; @@ -323,46 +292,52 @@ ChartColorModel colorModel = new ChartColorModel(); LinearGradientBrush gradientColor1 = new LinearGradientBrush(); -GradientStop stop1 = new GradientStop() { Offset = 1, Color = Color.FromRgb(255, 231, 199) }; +GradientStop stop1 = new GradientStop() +{ + Offset = 1, + Color = Color.FromRgb(255, 231, 199) +}; -GradientStop stop2 = new GradientStop() { Offset = 0, Color = Color.FromRgb(252, 182, 159) }; +GradientStop stop2 = new GradientStop() +{ + Offset = 0, + Color = Color.FromRgb(252, 182, 159) +}; gradientColor1.GradientStops.Add(stop1); - gradientColor1.GradientStops.Add(stop2); LinearGradientBrush gradientColor2 = new LinearGradientBrush(); -stop1 = new GradientStop() { Offset = 1, Color = Color.FromRgb(250, 221, 125) }; +stop1 = new GradientStop() +{ + Offset = 1, + Color = Color.FromRgb(250, 221, 125) +}; -stop2 = new GradientStop() { Offset = 0, Color = Color.FromRgb(252, 204, 45) }; +stop2 = new GradientStop() +{ + Offset = 0, + Color = Color.FromRgb(252, 204, 45) +}; gradientColor2.GradientStops.Add(stop1); - gradientColor2.GradientStops.Add(stop2); ... colorModel.CustomBrushes.Add(gradientColor1); - colorModel.CustomBrushes.Add(gradientColor2); ... ColumnSeries series = new ColumnSeries() - { - - ItemsSource = new ViewModel().Data, - + ItemsSource = new ViewModel().Data, XBindingPath = "Element", - YBindingPath = "YValue", - - Palette = ChartColorPalette.Custom, - - ColorModel = colorModel - + Palette = ChartColorPalette.Custom, + ColorModel = colorModel }; chart.Series.Add(series); @@ -379,14 +354,15 @@ The following code sample and screenshot illustrates how to apply the gradient c {% highlight xaml %} - + - - + + @@ -402,28 +378,29 @@ SfChart chart = new SfChart(); LinearGradientBrush gradientColor = new LinearGradientBrush(); -GradientStop stop1 = new GradientStop() { Offset = 1, Color = Color.FromRgb(168, 234, 238) }; +GradientStop stop1 = new GradientStop() +{ + Offset = 1, + Color = Color.FromRgb(168, 234, 238) +}; -GradientStop stop2 = new GradientStop() { Offset = 0, Color = Color.FromRgb(123, 176, 249) }; +GradientStop stop2 = new GradientStop() +{ + Offset = 0, + Color = Color.FromRgb(123, 176, 249) +}; gradientColor.GradientStops.Add(stop1); - gradientColor.GradientStops.Add(stop2); ... ColumnSeries series = new ColumnSeries() - { - - ItemsSource = new ViewModel().Data, - + ItemsSource = new ViewModel().Data, XBindingPath = "Element", - YBindingPath = "YValue", - - Interior = gradientColor, - + Interior = gradientColor }; chart.Series.Add(series); @@ -443,20 +420,15 @@ The color for the chart segments can be bound from its items source collection b {% highlight xaml %} - - - + {% endhighlight %} {% highlight c# %} ColumnSeries series = new ColumnSeries() - { - SegmentColorPath = "SegmentColor" - }; {% endhighlight %} @@ -479,63 +451,38 @@ The following code example demonstrates applying the palette color to the legend {% highlight xaml %} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + {% endhighlight %} @@ -544,11 +491,8 @@ Text="{Binding Label}"> chart.Legend = new ChartLegend() { - DockPosition = ChartDock.Left, - ItemTemplate = chart.Resources["itemTemplate"] as DataTemplate - }; {% endhighlight %} @@ -567,90 +511,77 @@ SfChart provides the option to define your own template for Tooltip. The followi {% highlight xaml %} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {% endhighlight %} @@ -659,19 +590,12 @@ Foreground="Black" FontSize="10"/> BarSeries series = new BarSeries() { - ItemsSource = new ViewModel().CategoricalDatas, - XBindingPath = "Category", - YBindingPath = "Value", - Palette = ChartColorPalette.FloraHues, - ShowTooltip = true, - TooltipTemplate = chart.Resources["tooltipTemplate"] as DataTemplate - }; ChartTooltip.SetShowDuration(series, 5000); diff --git a/wpf/Charts/Exporting.md b/wpf/Charts/Exporting.md index 57a8e16da4..94c2aa324f 100644 --- a/wpf/Charts/Exporting.md +++ b/wpf/Charts/Exporting.md @@ -54,19 +54,15 @@ This helps to export the chart to any stream as in below code example. private void SaveImageEncoder_Click(object sender, RoutedEventArgs e) { SaveFileDialog sfd = new SaveFileDialog(); - - sfd.Filter = "Bitmap(*.bmp)|*.bmp|JPEG(*.jpg,*.jpeg)|*.jpg;*.jpeg|Gif (*.gif)|*.gif|PNG(*.png)|*.png|TIFF(*.tif,*.tiff)|*.tif|All files (*.*)|*.*"; + + sfd.Filter = "Bitmap(*.bmp)|*.bmp|JPEG(*.jpg,*.jpeg)|*.jpg;*.jpeg|Gif (*.gif)|*.gif|PNG(*.png)|*.png|TIFF(*.tif,*.tiff)|*.tif|All files (*.*)|*.*"; if (sfd.ShowDialog() == true) { - using (Stream fs = sfd.OpenFile()) { - SampleChart.Save(fs, new PngBitmapEncoder()); - } - } } @@ -89,13 +85,11 @@ static IntPtr ApplicationMessageFilter(IntPtr hwnd, int message, IntPtr wParam, return IntPtr.Zero; } - HwndSourceParameters sourceParameters = new HwndSourceParameters(); sourceParameters.HwndSourceHook = ApplicationMessageFilter; HwndSource source = new HwndSource(sourceParameters); - source.RootVisual = chart; //Save chart diff --git a/wpf/Charts/Interactive-Features/Crosshair.md b/wpf/Charts/Interactive-Features/Crosshair.md index b9dd75f0df..1711c3b105 100644 --- a/wpf/Charts/Interactive-Features/Crosshair.md +++ b/wpf/Charts/Interactive-Features/Crosshair.md @@ -20,9 +20,7 @@ You can create an instance [`ChartCrossHairBehavior`](https://help.syncfusion.co {% highlight xaml %} - - - + {% endhighlight %} @@ -44,15 +42,11 @@ To view the axis labels then set the [`ShowTrackBallInfo`](https://help.syncfusi {% highlight xml %} - - - + - - - + {% endhighlight %} @@ -65,16 +59,12 @@ chart.Behaviors.Add(behavior); chart.PrimaryAxis = new CategoryAxis() { - ShowTrackBallInfo = true - }; chart.SecondaryAxis = new NumericalAxis() { - ShowTrackBallInfo = true - }; {% endhighlight %} @@ -102,27 +92,18 @@ The following code snippet demonstrates the line style for horizontal line in cr {% highlight xaml %} - - - - - + - - - - - - - - - - - + + + + {% endhighlight %} @@ -130,9 +111,7 @@ The following code snippet demonstrates the line style for horizontal line in cr ChartCrossHairBehavior crosshair = new ChartCrossHairBehavior() { - HorizontalLineStyle = chart.Resources["lineStyle"] as Style - }; chart.Behaviors.Add(crosshair); @@ -151,27 +130,18 @@ chart.Behaviors.Add(crosshair); {% highlight xaml %} - - - - - - - + + + - {% endhighlight %} @@ -180,9 +150,7 @@ chart.Behaviors.Add(crosshair); ChartCrossHairBehavior crosshair = new ChartCrossHairBehavior() { - VerticalLineStyle = chart.Resources["lineStyle"] as Style - }; chart.Behaviors.Add(crosshair); @@ -220,11 +188,7 @@ The following image demonstrates the horizontal axis label positioned center to {% highlight xaml %} - - - - - + {% endhighlight %} @@ -233,9 +197,7 @@ The following image demonstrates the horizontal axis label positioned center to ChartCrossHairBehavior behavior = new ChartCrossHairBehavior() { - HorizontalAxisLabelAlignment = ChartAlignment.Far - }; chart.Behaviors.Add(behavior); @@ -254,11 +216,7 @@ chart.Behaviors.Add(behavior); {% highlight xaml %} - - - - - + {% endhighlight %} @@ -267,9 +225,7 @@ chart.Behaviors.Add(behavior); ChartCrossHairBehavior behavior = new ChartCrossHairBehavior() { - HorizontalAxisLabelAlignment = ChartAlignment.Near - }; chart.Behaviors.Add(behavior); @@ -299,11 +255,7 @@ The following image demonstrates the horizontal axis label positioned center to {% highlight xml %} - - - - - + {% endhighlight %} @@ -312,9 +264,7 @@ The following image demonstrates the horizontal axis label positioned center to ChartCrossHairBehavior behavior = new ChartCrossHairBehavior() { - VerticalAxisLabelAlignment = ChartAlignment.Near - }; chart.Behaviors.Add(behavior); @@ -332,11 +282,7 @@ chart.Behaviors.Add(behavior); {% highlight xaml %} - - - - - + {% endhighlight %} @@ -345,9 +291,7 @@ chart.Behaviors.Add(behavior); ChartCrossHairBehavior behavior = new ChartCrossHairBehavior() { - VerticalAxisLabelAlignment = ChartAlignment.Far - }; chart.Behaviors.Add(behavior); @@ -367,63 +311,43 @@ The default appearance of the crosshair axis labels can be customized by using t {% highlight xaml %} - - - - - - - - + + - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + - - - + {% endhighlight %} diff --git a/wpf/Charts/Interactive-Features/Resizable-Scrollbar.md b/wpf/Charts/Interactive-Features/Resizable-Scrollbar.md index 7e00bca875..8430c1722d 100644 --- a/wpf/Charts/Interactive-Features/Resizable-Scrollbar.md +++ b/wpf/Charts/Interactive-Features/Resizable-Scrollbar.md @@ -20,9 +20,7 @@ The resizable scrollbar is a type of scrollbar that can be resized within the tr {% highlight xaml %} - - - + {% endhighlight %} @@ -31,9 +29,7 @@ The resizable scrollbar is a type of scrollbar that can be resized within the tr chart.PrimaryAxis = new CategoryAxis() { - EnableScrollBar = true - }; {% endhighlight %} @@ -51,9 +47,7 @@ SfChart provides support to suspend the value updates for every thumb values. Th {% highlight xml %} - - - + {% endhighlight %} @@ -62,11 +56,8 @@ SfChart provides support to suspend the value updates for every thumb values. Th chart.PrimaryAxis = new CategoryAxis() { - EnableScrollBar = true, - DeferredScrolling = true, - }; {% endhighlight %} @@ -82,9 +73,7 @@ SfChart allows you to resize the scrollbar using [`EnableScrollBarResizing`](htt {% highlight xaml %} - - - + {% endhighlight %} @@ -93,11 +82,8 @@ SfChart allows you to resize the scrollbar using [`EnableScrollBarResizing`](htt chart.PrimaryAxis = new CategoryAxis() { - EnableScrollBar = true, - EnableScrollBarResizing = false, - }; {% endhighlight %} @@ -116,9 +102,7 @@ Scrollbar provides a touch mode style by enabling [`EnableTouchMode`](https://he {% highlight xaml %} - - - + {% endhighlight %} @@ -127,11 +111,8 @@ Scrollbar provides a touch mode style by enabling [`EnableTouchMode`](https://he chart.PrimaryAxis = new CategoryAxis() { - EnableScrollBar = true, - EnableTouchMode = true - }; {% endhighlight %} @@ -152,9 +133,7 @@ The following code example demonstrates the thumb labels in scrollbar. {% highlight xml %} - - - + {% endhighlight %} @@ -163,13 +142,9 @@ The following code example demonstrates the thumb labels in scrollbar. chart.PrimaryAxis = new CategoryAxis() { - EnableScrollBar = true, - EnableTouchMode = true, - ThumbLabelVisibility = Visibility.Visible - }; {% endhighlight %} @@ -188,37 +163,28 @@ chart.PrimaryAxis = new CategoryAxis() {% highlight xaml %} - - - - - - - - + + - - - - - - + - {% endhighlight %} @@ -227,15 +193,10 @@ chart.PrimaryAxis = new CategoryAxis() chart.PrimaryAxis = new CategoryAxis() { - EnableTouchMode = true, - EnableScrollBar = true, - ThumbLabelVisibility = Visibility.Visible, - ThumbLabelTemplate = chart.Resources["labelTemplate"] as DataTemplate - }; {% endhighlight %} diff --git a/wpf/Charts/Interactive-Features/Selection.md b/wpf/Charts/Interactive-Features/Selection.md index 58c69f6fdc..4d697a71d1 100644 --- a/wpf/Charts/Interactive-Features/Selection.md +++ b/wpf/Charts/Interactive-Features/Selection.md @@ -20,11 +20,8 @@ You can create an instance [`ChartSelectionBehavior`](https://help.syncfusion.co {% highlight xml %} - - - - - + + {% endhighlight %} @@ -49,46 +46,39 @@ Segment Selection allows you to highlight a segment in a chart series. To enable {% highlight xaml %} - - - - - + + + + - - {% endhighlight %} {% highlight c# %} ChartSelectionBehavior selection = new ChartSelectionBehavior() { - EnableSegmentSelection = true - }; chart.Behaviors.Add(selection); ColumnSeries series = new ColumnSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - - YBindingPath = "Year2010", - + YBindingPath = "Year2011", Label ="2011", - SegmentSelectionBrush = new SolidColorBrush(Colors.Green), - Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)) - }; chart.Series.Add(series); @@ -109,19 +99,20 @@ The following code example demonstrates the spline series segment selection by c {% highlight xml %} - - - - - - - + + + + + + @@ -131,41 +122,28 @@ YBindingPath="Year2010"> ChartSelectionBehavior selection = new ChartSelectionBehavior() { - EnableSegmentSelection = true - }; chart.Behaviors.Add(selection); SplineSeries series = new SplineSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2010", - SegmentSelectionBrush = new SolidColorBrush(Colors.Red), - Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A)) - }; ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() { - ShowMarker = true, - HighlightOnSelection = true, - Symbol = ChartSymbol.Ellipse - }; series.AdornmentsInfo = adornmentInfo; - chart.Series.Add(series); {% endhighlight %} @@ -184,27 +162,27 @@ The following code example demonstrates highlighting a series. {% highlight xml %} - - - - - - - - + - + -YBindingPath="Year2011"/> + + + {% endhighlight %} @@ -212,51 +190,33 @@ YBindingPath="Year2011"/> ChartSelectionBehavior selection = new ChartSelectionBehavior() { - EnableSegmentSelection = true, - EnableSeriesSelection = true - }; chart.Behaviors.Add(selection); ScatterSeries series1 = new ScatterSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2010", - Label = "2010", - SegmentSelectionBrush = new SolidColorBrush(Colors.Green), - Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A)) - }; ScatterSeries series2 = new ScatterSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2011", - Label = "2011", - SegmentSelectionBrush = new SolidColorBrush(Colors.Green), - Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)) - }; chart.Series.Add(series1); - chart.Series.Add(series2); {% endhighlight %} @@ -281,23 +241,23 @@ The following code example demonstrates the segment selection with adornments {% highlight xaml %} - - - - - - - - - + + + + + + + {% endhighlight %} @@ -305,41 +265,27 @@ ConnectorHeight="30" ShowLabel="True" HighlightOnSelection="True"> ChartSelectionBehavior selection = new ChartSelectionBehavior() { - EnableSegmentSelection = true - }; chart.Behaviors.Add(selection); ColumnSeries series = new ColumnSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2010", - SegmentSelectionBrush = new SolidColorBrush(Colors.Green), - Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A)) - }; ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() { - ShowLabel = true, - ShowConnectorLine = true, - + ConnectorHeight = 30, HighlightOnSelection = true, - - UseSeriesPalette = true, - - ConnectorHeight = 30 - + UseSeriesPalette = true }; series.AdornmentsInfo = adornmentInfo; @@ -361,53 +307,39 @@ The following code example demonstrates the series selection with adornments. {% highlight xml %} - - - + - - - - - - - - - - + + + + + + - - - - - - - - - - + + + + + + {% endhighlight %} @@ -416,69 +348,47 @@ HighlightOnSelection="True"> ChartSelectionBehavior selection = new ChartSelectionBehavior() { - EnableSegmentSelection = false, - EnableSeriesSelection = true - }; chart.Behaviors.Add(selection); SplineSeries series1 = new SplineSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2010", - SeriesSelectionBrush = new SolidColorBrush(Colors.Green) - }; ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() { - ShowMarker = true, - Symbol = ChartSymbol.Ellipse - }; series1.AdornmentsInfo = adornmentInfo; SplineSeries series2 = new SplineSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2011", - SeriesSelectionBrush = new SolidColorBrush(Colors.Green), - - Interior = new SolidColorBrush(Color.FromRgb(0x4A,0x4A,0x4A)) - + Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A)) }; ChartAdornmentInfo adornmentInfo1 = new ChartAdornmentInfo() { - ShowMarker = true, - Symbol = ChartSymbol.Ellipse, - HighlightOnSelection = true - }; series2.AdornmentsInfo = adornmentInfo1; chart.Series.Add(series1); - chart.Series.Add(series2); {% endhighlight %} @@ -511,11 +421,8 @@ The following code snippet demonstrates the selection mode using [`MouseMove`](h ChartSelectionBehavior selection = new ChartSelectionBehavior() { - SelectionMode = Syncfusion.UI.Xaml.Charts.SelectionMode.MouseMove, - EnableSeriesSelection = true - }; chart.Behaviors.Add(selection); @@ -535,11 +442,7 @@ The following code snippet demonstrates multiple segment selection. {% highlight xml %} - - - - - + {% endhighlight %} @@ -548,11 +451,8 @@ The following code snippet demonstrates multiple segment selection. ChartSelectionBehavior selection = new ChartSelectionBehavior() { - SelectionStyle = SelectionStyle.Multiple, - EnableSegmentSelection = true - }; chart.Behaviors.Add(selection); @@ -575,11 +475,7 @@ The following code snippet demonstrates hand cursor in segment selection. {% highlight xml %} - - - - - + {% endhighlight %} @@ -588,11 +484,8 @@ The following code snippet demonstrates hand cursor in segment selection. ChartSelectionBehavior selection = new ChartSelectionBehavior() { - SelectionCursor = Cursors.Hand, - EnableSegmentSelection = true - }; chart.Behaviors.Add(selection); diff --git a/wpf/Charts/Interactive-Features/Tooltip.md b/wpf/Charts/Interactive-Features/Tooltip.md index 2b9c8d81a5..000ca93b60 100644 --- a/wpf/Charts/Interactive-Features/Tooltip.md +++ b/wpf/Charts/Interactive-Features/Tooltip.md @@ -22,16 +22,17 @@ The tooltip will be visible if you enable [`ShowTooltip`](https://help.syncfusio {% highlight xaml %} - - - + + + {% endhighlight %} @@ -39,32 +40,21 @@ XBindingPath="Demand" YBindingPath="Year2011"/> ColumnSeries series1 = new ColumnSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2010", - ShowTooltip = true - }; ColumnSeries series2 = new ColumnSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2011", - ShowTooltip = true - }; chart.Series.Add(series1); - chart.Series.Add(series2); {% endhighlight %} @@ -95,9 +85,7 @@ The following properties are used to customize and configure tooltip which is av {% highlight xml %} - - - + {% endhighlight %} @@ -107,7 +95,6 @@ The following properties are used to customize and configure tooltip which is av SfChart chart = new SfChart(); ChartTooltipBehavior behavior = new ChartTooltipBehavior(); - chart.Behaviors.Add(behavior); {% endhighlight %} @@ -127,9 +114,7 @@ The following code example explains positioning the tooltip at `Pointer` positio {% highlight xml %} - - - + {% endhighlight %} @@ -140,6 +125,7 @@ SfChart chart = new SfChart(); ... ChartTooltipBehavior chartTooltipBehavior = new ChartTooltipBehavior(); chartTooltipBehavior.Position = TooltipPosition.Pointer; + chart.Behaviors.Add(chartTooltipBehavior); {% endhighlight %} @@ -160,13 +146,13 @@ The following code example explains applying the style for tooltip. ... - + {% endhighlight %} @@ -174,12 +160,16 @@ The following code example explains applying the style for tooltip. {% highlight c# %} SfChart chart = new SfChart(); + Style style = new Style(typeof(Path)); style.Setters.Add(new Setter(Path.StrokeProperty, new SolidColorBrush(Colors.Black))); style.Setters.Add(new Setter(Path.FillProperty, new SolidColorBrush(Colors.Gray))); + ... + ChartTooltipBehavior tooltipBehavior = new ChartTooltipBehavior(); tooltipBehavior.Style = style; + chart.Behaviors.Add(tooltipBehavior); ... @@ -201,13 +191,13 @@ The following code example explains applying the style for a tooltip label. ... - + {% endhighlight %} @@ -215,12 +205,14 @@ The following code example explains applying the style for a tooltip label. {% highlight c# %} SfChart chart = new SfChart(); + Style labelStyle = new Style(typeof(TextBlock)); labelStyle.Setters.Add(new Setter(TextBlock.FontSizeProperty, 14d)); labelStyle.Setters.Add(new Setter(TextBlock.ForegroundProperty, new SolidColorBrush(Colors.Red))); ... ChartTooltipBehavior tooltipBehavior = new ChartTooltipBehavior(); tooltipBehavior.LabelStyle = labelStyle; + chart.Behaviors.Add(tooltipBehavior); ... @@ -244,17 +236,19 @@ The following code example explains the positioning of tooltip to the left of th {% highlight xaml %} - -XBindingPath="Demand" YBindingPath="Year2010" /> - - + {% endhighlight %} @@ -262,36 +256,25 @@ XBindingPath="Demand" YBindingPath="Year2011"/> ColumnSeries series1 = new ColumnSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2010", - ShowTooltip = true - }; ChartTooltip.SetHorizontalAlignment(series1, HorizontalAlignment.Left); ColumnSeries series2 = new ColumnSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2011", - ShowTooltip = true - }; ChartTooltip.SetHorizontalAlignment(series2, HorizontalAlignment.Left); chart.Series.Add(series1); - chart.Series.Add(series2); {% endhighlight %} @@ -310,17 +293,19 @@ The following code example explains the positioning of tooltip to the bottom of {% highlight xaml %} - -XBindingPath="Demand" YBindingPath="Year2010" /> - - + {% endhighlight %} @@ -328,36 +313,25 @@ ShowTooltip="True" XBindingPath="Demand" YBindingPath="Year2011"/> ColumnSeries series1 = new ColumnSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2010", - ShowTooltip = true - }; ChartTooltip.SetVerticalAlignment(series1, VerticalAlignment.Bottom); ColumnSeries series2 = new ColumnSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2011", - ShowTooltip = true - }; ChartTooltip.SetVerticalAlignment(series2, VerticalAlignment.Bottom); chart.Series.Add(series1); - chart.Series.Add(series2); {% endhighlight %} @@ -374,21 +348,23 @@ You can also set the distance for the margin to be positioned from the cursor us {% highlight xaml %} - - - + + + {% endhighlight %} @@ -396,44 +372,29 @@ ShowTooltip="True" XBindingPath="Demand" YBindingPath="Year2011"/> ColumnSeries series1 = new ColumnSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2010", - ShowTooltip = true, - Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)), - Label = "2010" - }; ChartTooltip.SetTooltipMargin(series1, new Thickness(25)); ColumnSeries series2 = new ColumnSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2011", - ShowTooltip = true, - Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A)), - Label = "2011" - }; ChartTooltip.SetTooltipMargin(series2, new Thickness(25)); chart.Series.Add(series1); - chart.Series.Add(series2); {% endhighlight %} @@ -452,23 +413,21 @@ The tooltip can be positioned at a particular distance from the cursor horizonta {% highlight xaml %} - - - + + + {% endhighlight %} @@ -476,48 +435,31 @@ XBindingPath="Demand" YBindingPath="Year2011"/> ColumnSeries series1 = new ColumnSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2010", - ShowTooltip = true, - Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)), - Label = "2010" - }; ChartTooltip.SetHorizontalOffset(series1, 40); - ChartTooltip.SetVerticalOffset(series1, 40); ColumnSeries series2 = new ColumnSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2011", - ShowTooltip = true, - Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A)), - Label = "2011" - }; ChartTooltip.SetHorizontalOffset(series2, 40); - ChartTooltip.SetVerticalOffset(series2, 40); chart.Series.Add(series1); - chart.Series.Add(series2); {% endhighlight %} @@ -536,14 +478,13 @@ The following code example demonstrates the duration of the tooltip set as 5 sec {% highlight xml %} - - + {% endhighlight %} @@ -552,19 +493,12 @@ XBindingPath="Demand" YBindingPath="Year2010"> ColumnSeries series = new ColumnSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2010", - ShowTooltip = true, - Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)), - Label = "2010" - }; ChartTooltip.SetShowDuration(series, 5000); @@ -587,13 +521,14 @@ The following code example demonstrates the tooltip will be delayed for 1 second {% highlight xml %} - + {% endhighlight %} @@ -601,19 +536,12 @@ XBindingPath="Demand" YBindingPath="Year2010" /> ColumnSeries series = new ColumnSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2010", - ShowTooltip = true, - Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)), - Label = "2010" - }; ChartTooltip.SetInitialShowDelay(series, 1000); @@ -632,15 +560,14 @@ You can also provide animation effects for tooltip by setting the [`EnableAnimat {% highlight xml %} - - - + {% endhighlight %} @@ -648,19 +575,12 @@ XBindingPath="Demand" YBindingPath="Year2010"> ColumnSeries series = new ColumnSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2010", - ShowTooltip = true, - Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)), - Label = "2010" - }; ChartTooltip.SetEnableAnimation(series, true); @@ -681,45 +601,91 @@ The [`TooltipTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Ch + ... - + + - - - + + + + - + + - - - + + + + + ... + - + ... @@ -729,52 +695,52 @@ The [`TooltipTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Ch ... - DataTemplate tooltip = new DataTemplate(); +DataTemplate tooltip = new DataTemplate(); - FrameworkElementFactory stackpanel = new FrameworkElementFactory(typeof(StackPanel)); - stackpanel.SetValue(StackPanel.OrientationProperty, Orientation.Horizontal); +FrameworkElementFactory stackpanel = new FrameworkElementFactory(typeof(StackPanel)); +stackpanel.SetValue(StackPanel.OrientationProperty, Orientation.Horizontal); - FrameworkElementFactory textblock = new FrameworkElementFactory(typeof(TextBlock)); - textblock.SetBinding(TextBlock.TextProperty, new Binding("Item.Demand")); - textblock.SetValue(TextBlock.FontWeightProperty, FontWeights.Bold); - textblock.SetValue(TextBlock.HorizontalAlignmentProperty, HorizontalAlignment.Center); - textblock.SetValue(TextBlock.VerticalAlignmentProperty, VerticalAlignment.Center); - textblock.SetValue(TextBlock.ForegroundProperty, new SolidColorBrush(Colors.Black)); +FrameworkElementFactory textblock = new FrameworkElementFactory(typeof(TextBlock)); +textblock.SetBinding(TextBlock.TextProperty, new Binding("Item.Demand")); +textblock.SetValue(TextBlock.FontWeightProperty, FontWeights.Bold); +textblock.SetValue(TextBlock.HorizontalAlignmentProperty, HorizontalAlignment.Center); +textblock.SetValue(TextBlock.VerticalAlignmentProperty, VerticalAlignment.Center); +textblock.SetValue(TextBlock.ForegroundProperty, new SolidColorBrush(Colors.Black)); - stackpanel.AppendChild(textblock); +stackpanel.AppendChild(textblock); - FrameworkElementFactory textblock1 = new FrameworkElementFactory(typeof(TextBlock)); - textblock1.SetValue(TextBlock.TextProperty, " : "); - textblock1.SetValue(TextBlock.FontWeightProperty, FontWeights.Bold); - textblock1.SetValue(TextBlock.HorizontalAlignmentProperty, HorizontalAlignment.Center); - textblock1.SetValue(TextBlock.VerticalAlignmentProperty, VerticalAlignment.Center); - textblock1.SetValue(TextBlock.ForegroundProperty, new SolidColorBrush(Colors.Black)); +FrameworkElementFactory textblock1 = new FrameworkElementFactory(typeof(TextBlock)); +textblock1.SetValue(TextBlock.TextProperty, " : "); +textblock1.SetValue(TextBlock.FontWeightProperty, FontWeights.Bold); +textblock1.SetValue(TextBlock.HorizontalAlignmentProperty, HorizontalAlignment.Center); +textblock1.SetValue(TextBlock.VerticalAlignmentProperty, VerticalAlignment.Center); +textblock1.SetValue(TextBlock.ForegroundProperty, new SolidColorBrush(Colors.Black)); - stackpanel.AppendChild(textblock1); +stackpanel.AppendChild(textblock1); - FrameworkElementFactory textblock2 = new FrameworkElementFactory(typeof(TextBlock)); - textblock2.SetBinding(TextBlock.TextProperty, new Binding("Item.Year2010")); - textblock2.SetValue(TextBlock.FontWeightProperty, FontWeights.Bold); - textblock2.SetValue(TextBlock.HorizontalAlignmentProperty, HorizontalAlignment.Center); - textblock2.SetValue(TextBlock.VerticalAlignmentProperty, VerticalAlignment.Center); - textblock2.SetValue(TextBlock.ForegroundProperty, new SolidColorBrush(Colors.Black)); +FrameworkElementFactory textblock2 = new FrameworkElementFactory(typeof(TextBlock)); +textblock2.SetBinding(TextBlock.TextProperty, new Binding("Item.Year2010")); +textblock2.SetValue(TextBlock.FontWeightProperty, FontWeights.Bold); +textblock2.SetValue(TextBlock.HorizontalAlignmentProperty, HorizontalAlignment.Center); +textblock2.SetValue(TextBlock.VerticalAlignmentProperty, VerticalAlignment.Center); +textblock2.SetValue(TextBlock.ForegroundProperty, new SolidColorBrush(Colors.Black)); - stackpanel.AppendChild(textblock2); - tooltip.VisualTree = stackpanel; +stackpanel.AppendChild(textblock2); +tooltip.VisualTree = stackpanel; - ColumnSeries series1 = new ColumnSeries() - { +ColumnSeries series1 = new ColumnSeries() +{ - ItemsSource = Demands, - XBindingPath = "Demand", - YBindingPath = "Year2010", - Label = "2010", - ShowTooltip = true, - TooltipTemplate = tooltip + ItemsSource = new ViewModel().Demands, + XBindingPath = "Demand", + YBindingPath = "Year2010", + Label = "2010", + ShowTooltip = true, + TooltipTemplate = tooltip - }; +}; - chart.Series.Add(series1); +chart.Series.Add(series1); ... {% endhighlight %} diff --git a/wpf/Charts/Interactive-Features/Trackball.md b/wpf/Charts/Interactive-Features/Trackball.md index 19295ce384..fcda2a79e2 100644 --- a/wpf/Charts/Interactive-Features/Trackball.md +++ b/wpf/Charts/Interactive-Features/Trackball.md @@ -20,11 +20,8 @@ You can create an instance [`ChartTrackBallBehavior`](https://help.syncfusion.co {% highlight xml %} - - - - - + + {% endhighlight %} @@ -48,9 +45,7 @@ To view the TrackBall in the particular Axis, you have to enable the ShowTrackBa {% highlight xml %} - - - + {% endhighlight %} @@ -63,9 +58,7 @@ chart.Behaviors.Add(behavior); chart.PrimaryAxis = new CategoryAxis() { - ShowTrackBallInfo = true - }; {% endhighlight %} @@ -98,9 +91,7 @@ The following code snippet explains how to collapse the visibility of trackball {% highlight xaml %} - - - + {% endhighlight %} @@ -109,9 +100,7 @@ The following code snippet explains how to collapse the visibility of trackball ChartTrackBallBehavior behavior = new ChartTrackBallBehavior() { - ShowLine = false - }; chart.Behaviors.Add(behavior); @@ -134,27 +123,17 @@ The following code snippet explains the customization of trackball line. {% highlight xaml %} - - - - - - {% endhighlight %} @@ -163,9 +142,7 @@ The following code snippet explains the customization of trackball line. ChartTrackBallBehavior trackball = new ChartTrackBallBehavior() { - LineStyle = chart.Resources["lineStyle"] as Style - }; chart.Behaviors.Add(trackball); @@ -186,23 +163,15 @@ By default, the trackball symbol is displayed as ellipse to change the default s {% highlight xaml %} - - - - - - {% endhighlight %} @@ -213,9 +182,7 @@ SfChart chart = new SfChart(); ChartTrackBallBehavior trackball = new ChartTrackBallBehavior() { - ChartTrackBallStyle = chart.Resources["trackballStyle"] as Style - }; chart.Behaviors.Add(trackball); @@ -251,13 +218,9 @@ Center-Axis label is aligned to the center of the trackball. By default, the axi {% highlight xaml %} - - - - - - - + + + {% endhighlight %} @@ -265,9 +228,7 @@ Center-Axis label is aligned to the center of the trackball. By default, the axi ChartTrackBallBehavior behavior = new ChartTrackBallBehavior() { - AxisLabelAlignment = ChartAlignment.Far - }; chart.Behaviors.Add(behavior); @@ -286,11 +247,7 @@ chart.Behaviors.Add(behavior); {% highlight xaml %} - - - - - + {% endhighlight %} @@ -299,9 +256,7 @@ chart.Behaviors.Add(behavior); ChartTrackBallBehavior behavior = new ChartTrackBallBehavior() { - AxisLabelAlignment = ChartAlignment.Near - }; chart.Behaviors.Add(behavior); @@ -321,36 +276,27 @@ You can change the default appearance of the axis label in trackball using [`Tra {% highlight xaml %} - - + + - - - - - - + + - - - - - + - - - + @@ -363,11 +309,8 @@ SfChart chart = new SfChart(); chart.PrimaryAxis = new NumericalAxis() { - ShowTrackBallInfo = true, - TrackBallLabelTemplate = chart.Resources["labelTemplate"] as DataTemplate - }; {% endhighlight %} @@ -389,7 +332,7 @@ The [`ShowTrackballInfo`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml. {% highlight xaml %} - + @@ -399,22 +342,27 @@ The [`ShowTrackballInfo`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml. {% highlight c# %} - SplineSeries series1 = new SplineSeries() - { - Interior = new SolidColorBrush(Color.FromArgb(0, 0x4a, 0x4a, 0x4a)) - }; - chart.Series.Add(series1); - SplineSeries series2 = new SplineSeries() - { - Interior = new SolidColorBrush(Color.FromArgb(0, 0x7f, 0x7f, 0x7f)), - ShowTrackballInfo = false - }; - chart.Series.Add(series2); - SplineSeries series3 = new SplineSeries() - { - Interior = new SolidColorBrush(Color.FromArgb(0, 0xbc, 0xbc, 0xbc)) - }; - chart.Series.Add(series3); +SplineSeries series1 = new SplineSeries() +{ + Interior = new SolidColorBrush(Color.FromArgb(0, 0x4a, 0x4a, 0x4a)) +}; + +chart.Series.Add(series1); + +SplineSeries series2 = new SplineSeries() +{ + Interior = new SolidColorBrush(Color.FromArgb(0, 0x7f, 0x7f, 0x7f)), + ShowTrackballInfo = false +}; + +chart.Series.Add(series2); + +SplineSeries series3 = new SplineSeries() +{ + Interior = new SolidColorBrush(Color.FromArgb(0, 0xbc, 0xbc, 0xbc)) +}; + +chart.Series.Add(series3); {% endhighlight %} @@ -435,13 +383,7 @@ The following code snippet explains how to align the series label to the center {% highlight xaml %} - - - - - + {% endhighlight %} @@ -450,11 +392,8 @@ LabelVerticalAlignment="Center"> ChartTrackBallBehavior behavior = new ChartTrackBallBehavior() { - LabelHorizontalAlignment = ChartAlignment.Center, - LabelVerticalAlignment = ChartAlignment.Center - }; chart.Behaviors.Add(behavior); @@ -477,11 +416,7 @@ When there is a multiple series, by default, the trackball series label will be {% highlight xaml %} - - - - - + {% endhighlight %} @@ -490,9 +425,7 @@ When there is a multiple series, by default, the trackball series label will be ChartTrackBallBehavior behavior = new ChartTrackBallBehavior() { - LabelDisplayMode = TrackballLabelDisplayMode.FloatAllPoints - }; chart.Behaviors.Add(behavior); @@ -511,11 +444,7 @@ chart.Behaviors.Add(behavior); {% highlight xaml %} - - - - - + {% endhighlight %} @@ -524,9 +453,7 @@ chart.Behaviors.Add(behavior); ChartTrackBallBehavior behavior = new ChartTrackBallBehavior() { - LabelDisplayMode = TrackballLabelDisplayMode.NearestPoint - }; chart.Behaviors.Add(behavior); @@ -546,11 +473,7 @@ chart.Behaviors.Add(behavior); {% highlight xaml %} - - - - - + {% endhighlight %} @@ -559,9 +482,7 @@ chart.Behaviors.Add(behavior); ChartTrackBallBehavior behavior = new ChartTrackBallBehavior() { - LabelDisplayMode = TrackballLabelDisplayMode.GroupAllPoints - }; chart.Behaviors.Add(behavior); @@ -587,30 +508,22 @@ In trackball label, the data point value of the technical indicator also can be {% highlight xaml %} - - - - - + + + - - - - - - + + {% endhighlight %} {% highlight c# %} ChartTrackBallBehavior behavior = new ChartTrackBallBehavior(); - chart.Behaviors.Add(behavior); AverageTrueRangeIndicator average = new AverageTrueRangeIndicator(); - average.ShowTrackballInfo = true; chart.TechnicalIndicators.Add(average); @@ -631,43 +544,32 @@ N> By default, [`ShowTrackballInfo`](https://help.syncfusion.com/cr/wpf/Syncfusi {% highlight xaml %} - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + - ItemsSource="{Binding Demands}" + + + - XBindingPath="Demand" - - YBindingPath="Year2010" - - TrackBallLabelTemplate="{StaticResource labelTemplate}"/> - + - {% endhighlight %} {% highlight c# %} @@ -680,17 +582,11 @@ chart.Behaviors.Add(trackball); ColumnSeries series = new ColumnSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2010", - TrackBallLabelTemplate = chart.Resources["labelTemplate"] as DataTemplate, - Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A)) - }; chart.Series.Add(series); @@ -711,11 +607,8 @@ Palette or interior color of the Series is applied to the series label by settin {% highlight xaml %} - - - - - + + {% endhighlight %} @@ -724,9 +617,7 @@ Palette or interior color of the Series is applied to the series label by settin ChartTrackBallBehavior behavior = new ChartTrackBallBehavior() { - - UseSeriesPalette = true - + UseSeriesPalette = true }; chart.Behaviors.Add(behavior); diff --git a/wpf/Charts/Interactive-Features/Visual-Data-Editing.md b/wpf/Charts/Interactive-Features/Visual-Data-Editing.md index 117527df62..8db4469268 100644 --- a/wpf/Charts/Interactive-Features/Visual-Data-Editing.md +++ b/wpf/Charts/Interactive-Features/Visual-Data-Editing.md @@ -21,14 +21,13 @@ Segment Dragging defines the dragging a particular point or segment based on the {% highlight xml %} - - + {% endhighlight %} @@ -37,22 +36,15 @@ YBindingPath="Year2010"> LineSeries series = new LineSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2010", - EnableSegmentDragging = true, - Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)), - Label = "2010" - }; -chart.Series.Add(series) +chart.Series.Add(series); {% endhighlight %} @@ -67,14 +59,14 @@ chart.Series.Add(series) {% highlight xml %} - - + {% endhighlight %} @@ -83,24 +75,16 @@ YBindingPath="Year2010"> ColumnSeries series = new ColumnSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2010", - EnableSegmentDragging = true, - EnableDragTooltip = true, - Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)), - Label = "2010" - }; -chart.Series.Add(series) +chart.Series.Add(series); {% endhighlight %} @@ -116,37 +100,30 @@ This series supports dragging in both the x and y co-ordinates. The dragging co- {% highlight xml %} - - - + + {% endhighlight %} {% highlight c# %} ScatterSeries series = new ScatterSeries() - { - -ItemsSource = new ViewModel().Data, - -XBindingPath = "Index", - -YBindingPath = "Value", - -Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)), - -EnableSegmentDragging = true, - -DragDirection = DragType.XY - + ItemsSource = new ViewModel().Data, + XBindingPath = "Index", + YBindingPath = "Value", + Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)), + EnableSegmentDragging = true, + DragDirection = DragType.XY }; -chart.Series.Add(series) +chart.Series.Add(series); {% endhighlight %} @@ -166,11 +143,15 @@ The following code snippet explains the series dragging feature in LineSeries. {% highlight xaml %} - + + {% endhighlight %} @@ -178,21 +159,13 @@ YBindingPath="Year2010"/> LineSeries series = new LineSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2010", - EnableSeriesDragging = true, - - EnableDragTooltip = true , - + EnableDragTooltip = true, Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)), - Label = "2010" - }; chart.Series.Add(series); @@ -214,14 +187,15 @@ While the series or segment is dragged by default you can view the tooltip showi {% highlight xml %} - {% endhighlight %} @@ -230,23 +204,14 @@ ItemsSource="{Binding Demands}" LineSeries series = new LineSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2010", - EnableSeriesDragging = true, - - EnableDragTooltip = true , - + EnableDragTooltip = false, Focusable = false, - Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)), - Label = "2010" - }; chart.Series.Add(series); @@ -268,45 +233,35 @@ chart.Series.Add(series); {% highlight xaml %} - - - - - - - - - + + - - - - + - {% endhighlight %} @@ -315,21 +270,13 @@ chart.Series.Add(series); ColumnSeries series = new ColumnSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2010", - Focusable = false, - EnableSegmentDragging = true, - DragTooltipTemplate = chart.Resources["tooltipTemplate"] as DataTemplate, - Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)) - }; chart.Series.Add(series); @@ -361,13 +308,12 @@ The following are the API’s in `ChartDragTooltipStyle`. {% highlight xml %} - - - + {% endhighlight %} @@ -375,19 +321,12 @@ The following are the API’s in `ChartDragTooltipStyle`. {% highlight c# %} series.DragTooltipStyle = new ChartDragTooltipStyle() - { - FontFamily = new FontFamily("Calibri"), - - FontSize = 14, - - FontStyle = FontStyles.Italic, - + FontSize = 14, + FontStyle = FontStyles.Italic, Background = new SolidColorBrush(Colors.DarkGray), - Foreground = new SolidColorBrush(Colors.Black) - }; {% endhighlight %} @@ -404,14 +343,15 @@ To round off the dragged values, you have to set the [`SnapToPoint`](https://hel {% highlight xml %} - {% endhighlight %} @@ -420,23 +360,14 @@ ItemsSource="{Binding Demands}" SplineSeries series = new SplineSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2010", - EnableSegmentDragging = true, - - UpdateSource = true , - + UpdateSource = true, RoundToDecimal = 2, - SnapToPoint = SnapToPoint.Round, - Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)) - }; chart.Series.Add(series); @@ -453,14 +384,13 @@ When dragging the series or segment at run time, to update the underlying data b {% highlight xml %} - - + {% endhighlight %} @@ -469,19 +399,12 @@ YBindingPath="Year2010"> SplineSeries series = new SplineSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2010", - EnableSegmentDragging = true, - - UpdateSource = true , - + UpdateSource = true, Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)) - }; chart.Series.Add(series); @@ -498,20 +421,13 @@ While you are dragging you can set the KeyModifiers to cancel the drag by settin {% highlight xml %} - - + {% endhighlight %} @@ -520,21 +436,13 @@ YBindingPath="Year2010"> SplineSeries series = new SplineSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2010", - EnableSegmentDragging = true, - DragCancelKeyModifiers = ModifierKeys.Alt, - UpdateSource = true , - Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)) - }; chart.Series.Add(series); diff --git a/wpf/Charts/Interactive-Features/zoompan.md b/wpf/Charts/Interactive-Features/zoompan.md index f0331ca68a..364185575c 100644 --- a/wpf/Charts/Interactive-Features/zoompan.md +++ b/wpf/Charts/Interactive-Features/zoompan.md @@ -21,13 +21,9 @@ You can create an instance ChartZoomPanBehavior and add it to the Behaviors coll {% highlight xml %} - - - - - - - + + + {% endhighlight %} @@ -55,13 +51,10 @@ The following code example demonstrates the zooming the chart axis by setting zo {% highlight xaml %} - - - + {% endhighlight %} @@ -70,13 +63,9 @@ ZoomFactor="0.3" ZoomPosition="0.1" /> chart.PrimaryAxis = new CategoryAxis() { - ShowGridLines = false, - ZoomFactor = 0.1, - ZoomPosition = 0.3 - }; {% endhighlight %} @@ -94,11 +83,7 @@ Zooming can be performed by mouse wheel action by setting [`EnableMouseWheelZoom {% highlight xml %} - - - - - + {% endhighlight %} @@ -107,9 +92,7 @@ Zooming can be performed by mouse wheel action by setting [`EnableMouseWheelZoom ChartZoomPanBehavior zooming = new ChartZoomPanBehavior() { - EnableMouseWheelZooming = true - }; chart.Behaviors.Add(zooming); @@ -126,13 +109,9 @@ If you want to zoom using fingers by touch, then you have to set [`EnablePinchZo {% highlight xml %} - - - - - - - + + + {% endhighlight %} @@ -140,9 +119,7 @@ If you want to zoom using fingers by touch, then you have to set [`EnablePinchZo ChartZoomPanBehavior zooming = new ChartZoomPanBehavior() { - EnablePinchZooming = true - }; chart.Behaviors.Add(zooming); @@ -160,11 +137,7 @@ To enable the zooming relative to cursor position you can set [`ZoomRelativeToCu {% highlight xml %} - - - - - + {% endhighlight %} @@ -173,9 +146,7 @@ To enable the zooming relative to cursor position you can set [`ZoomRelativeToCu ChartZoomPanBehavior zooming = new ChartZoomPanBehavior() { - ZoomRelativeToCursor = true - }; chart.Behaviors.Add(zooming); @@ -195,11 +166,7 @@ The following code snippet demonstrated selection zooming. {% highlight xml %} - - - - - + {% endhighlight %} @@ -208,9 +175,7 @@ The following code snippet demonstrated selection zooming. ChartZoomPanBehavior zooming = new ChartZoomPanBehavior() { - EnableSelectionZooming = true - }; chart.Behaviors.Add(zooming); @@ -237,13 +202,12 @@ The following code example demonstrates the customization of selection rectangle {% highlight xml %} - - - - - + + {% endhighlight %} @@ -252,15 +216,10 @@ Fill="LightBlue" Stroke="Blue" StrokeThickness="2" > ChartZoomPanBehavior zooming = new ChartZoomPanBehavior() { - EnableSelectionZooming = true, - Fill = new SolidColorBrush(Colors.LightBlue), - Stroke = new SolidColorBrush(Colors.Blue), - StrokeThickness = 2 - }; chart.Behaviors.Add(zooming); @@ -283,11 +242,7 @@ Zooming along [`X`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts {% highlight xml %} - - - - - + {% endhighlight %} @@ -319,11 +274,7 @@ Zooming along Y axis {% highlight xml %} - - - - - + {% endhighlight %} @@ -332,11 +283,8 @@ Zooming along Y axis ChartZoomPanBehavior zooming = new ChartZoomPanBehavior() { - EnableSelectionZooming = true, - ZoomMode = ZoomMode.Y - }; chart.Behaviors.Add(zooming); @@ -356,11 +304,7 @@ You can also limit the zooming by setting [`MaximumZoomLevel`](https://help.sync {% highlight xaml %} - - - - - + {% endhighlight %} @@ -369,11 +313,8 @@ You can also limit the zooming by setting [`MaximumZoomLevel`](https://help.sync ChartZoomPanBehavior zooming = new ChartZoomPanBehavior() { - EnableSelectionZooming = true, - MaximumZoomLevel = 100 - }; chart.Behaviors.Add(zooming); @@ -391,11 +332,7 @@ Zooming Toolbar encompassed with buttons for performing actions like Zoom In/Out {% highlight xaml %} - - - - - + {% endhighlight %} @@ -404,9 +341,7 @@ Zooming Toolbar encompassed with buttons for performing actions like Zoom In/Out ChartZoomPanBehavior zooming = new ChartZoomPanBehavior() { - EnableZoomingToolBar = true - }; chart.Behaviors.Add(zooming); @@ -429,11 +364,7 @@ Zooming Toolbar can be positioned using the [`HorizontalPosition`](https://help. {% highlight xml %} - - - - - + {% endhighlight %} @@ -442,13 +373,9 @@ Zooming Toolbar can be positioned using the [`HorizontalPosition`](https://help. ChartZoomPanBehavior zooming = new ChartZoomPanBehavior() { - EnableZoomingToolBar = true, - HorizontalPosition = HorizontalAlignment.Left, - VerticalPosition = VerticalAlignment.Bottom - }; chart.Behaviors.Add(zooming); @@ -475,15 +402,14 @@ Zooming Toolbar can be customized using the following APIs: {% highlight xml %} - - - - - + + {% endhighlight %} @@ -492,19 +418,12 @@ ToolBarItems="All" ToolBarItemMargin="2"> ChartZoomPanBehavior zooming = new ChartZoomPanBehavior() { - EnableZoomingToolBar = true, - ToolBarBackground = new SolidColorBrush(Colors.AliceBlue), - ToolBarItemHeight = 20, - ToolBarItemWidth = 20, - ToolBarItemMargin = new Thickness(2), - ToolBarItems = ZoomToolBarItems.All - }; chart.Behaviors.Add(zooming); @@ -527,13 +446,7 @@ Zooming toolbar orientation is horizontal by default.You can change the orientat {% highlight xml %} - - - - - + {% endhighlight %} @@ -542,11 +455,8 @@ ToolBarOrientation="Vertical"> ChartZoomPanBehavior zooming = new ChartZoomPanBehavior() { - EnableZoomingToolBar = true, - ToolBarOrientation = Orientation.Vertical - }; chart.Behaviors.Add(zooming); @@ -565,12 +475,9 @@ Panning feature allows moving the visible area of the chart when it is zoomed in {% tabs %} {% highlight xml %} - - - - - + + {% endhighlight %} @@ -579,11 +486,8 @@ Panning feature allows moving the visible area of the chart when it is zoomed in ChartZoomPanBehavior zooming = new ChartZoomPanBehavior() { - EnableMouseWheelZooming = true, - - EnablePanning = true - + EnablePanning = true }; chart.Behaviors.Add(zooming); @@ -606,11 +510,7 @@ SfChart provides support to reset to the default view when you double tap the ch {% highlight xml %} - - - - - + {% endhighlight %} @@ -619,9 +519,7 @@ SfChart provides support to reset to the default view when you double tap the ch ChartZoomPanBehavior zooming = new ChartZoomPanBehavior() { - - ResetOnDoubleTap = true - + ResetOnDoubleTap = true }; chart.Behaviors.Add(zooming); diff --git a/wpf/Charts/Printing.md b/wpf/Charts/Printing.md index b3a54a7643..c3d2bede62 100644 --- a/wpf/Charts/Printing.md +++ b/wpf/Charts/Printing.md @@ -21,51 +21,38 @@ The following code example demonstrates the printing of chart in button click ev {% highlight xaml %} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + @@ -74,11 +61,8 @@ ShowLabel="True"/> {% highlight C# %} private void Button_Click_1(object sender, RoutedEventArgs e) - { - ExportDemoChart.Print(); - } {% endhighlight %} diff --git a/wpf/Charts/Watermark.md b/wpf/Charts/Watermark.md index 7e82ccf2b1..5e92238efe 100644 --- a/wpf/Charts/Watermark.md +++ b/wpf/Charts/Watermark.md @@ -24,25 +24,16 @@ The following code example explains how to set your custom text as Watermark. {% highlight xaml %} - - - - - - - - - - - - - + + + + + {% endhighlight %} @@ -51,22 +42,15 @@ Foreground="Black" > chart.Watermark = new Watermark() { - - HorizontalAlignment = HorizontalAlignment.Center, - - VerticalAlignment = VerticalAlignment.Center - + HorizontalAlignment = HorizontalAlignment.Center, + VerticalAlignment = VerticalAlignment.Center }; chart.Watermark.Content = new TextBlock() { - - Text = "Metals", - - FontSize = 70, - - Foreground = new SolidColorBrush(Colors.Black) - + Text = "Metals", + FontSize = 70, + Foreground = new SolidColorBrush(Colors.Black) }; {% endhighlight %} @@ -84,19 +68,16 @@ You can also set images as Watermark as in below code snippet. {% highlight xaml %} - - - - - - - - - - - + + + + + {% endhighlight %} @@ -105,22 +86,16 @@ HorizontalAlignment="Center" > chart.Watermark = new Watermark() { - - HorizontalAlignment = HorizontalAlignment.Center, - - VerticalAlignment = VerticalAlignment.Center - + HorizontalAlignment = HorizontalAlignment.Center, + VerticalAlignment = VerticalAlignment.Center }; chart.Watermark.Content = new Image() { - - Height = 175, - - Width = 175, - - Source = new BitmapImage(new Uri(@"demands.png", UriKind.RelativeOrAbsolute)) - + Height = 175, + Width = 175, + Source = new BitmapImage( + new Uri(@"demands.png", UriKind.RelativeOrAbsolute)) }; {% endhighlight %} From be4f563c7518a3a6c28acf800c3f81c624eb20f9 Mon Sep 17 00:00:00 2001 From: SivaThennarasu Date: Tue, 21 Apr 2026 14:59:18 +0530 Subject: [PATCH 14/53] Changed the snipped code alignment and minor mistakes --- wpf/Charts/CodedUI.md | 52 +- .../Export-Chart-to-Image-Windows-8-1.md | 23 +- wpf/Charts/How-To/Serialize-the-SfChart.md | 31 +- ...xis-value-to-pixel-value-and-vice-versa.md | 52 +- wpf/Charts/Migrating-from-Chart-to-SfChart.md | 1586 ++++++++--------- wpf/Charts/Serialization.md | 87 +- 6 files changed, 816 insertions(+), 1015 deletions(-) diff --git a/wpf/Charts/CodedUI.md b/wpf/Charts/CodedUI.md index a6bd382366..7b950541e2 100644 --- a/wpf/Charts/CodedUI.md +++ b/wpf/Charts/CodedUI.md @@ -106,35 +106,32 @@ Once the record is completed, click the GenerateCode icon in CodedUITestBuilder {% highlight c# %} - public void RecordedMethod1() - - { - - #region Variable Declarations - - WpfSfChart uISfChartCustom = this.UICUITestSampleDemoWindow.UISfChartCustom; +public void RecordedMethod1() +{ + #region Variable Declarations - WpfChartSeries uIColumnSeriesCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UIColumnSeriesCustom; + WpfSfChart uISfChartCustom = this.UICUITestSampleDemoWindow.UISfChartCustom; - WpfLegend uIChartLegendCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UIChartLegendCustom; + WpfChartSeries uIColumnSeriesCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UIColumnSeriesCustom; - WpfChartAxis uINumericalAxisCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UINumericalAxisCustom; + WpfLegend uIChartLegendCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UIChartLegendCustom; - WpfChartAxis uICategoryAxisCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UICategoryAxisCustom; + WpfChartAxis uINumericalAxisCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UINumericalAxisCustom; - WpfZoomingBehavior uIZoomInCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UIZoomInCustom; + WpfChartAxis uICategoryAxisCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UICategoryAxisCustom; - WpfZoomingBehavior uIZoomOutCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UIZoomOutCustom; + WpfZoomingBehavior uIZoomInCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UIZoomInCustom; - WpfZoomingBehavior uIZoomResetCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UIZoomResetCustom; + WpfZoomingBehavior uIZoomOutCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UIZoomOutCustom; - WpfZoomingBehavior uIZoomPanCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UIZoomPanCustom; + WpfZoomingBehavior uIZoomResetCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UIZoomResetCustom; - WpfZoomingBehavior uISelectionZoomCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UISelectionZoomCustom; + WpfZoomingBehavior uIZoomPanCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UIZoomPanCustom; - #endregion + WpfZoomingBehavior uISelectionZoomCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UISelectionZoomCustom; - } + #endregion +} {% endhighlight %} @@ -164,21 +161,14 @@ Click Generate code icon to generate assertion code then close the builder if va {% highlight c# %} public void AssertMethod1() - { - - #region Variable Declarations - - WpfChartSeries uIColumnSeriesCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UIColumnSeriesCustom; - - #endregion - - // Verify that the 'SegmentsCount' property of 'ColumnSeries' custom control equals '10' - - Assert.AreEqual(this.AssertMethod1ExpectedValues.UIColumnSeriesCustomSegmentsCount, uIColumnSeriesCustom.SegmentsCount, "Segemnts Count Mismatched..."); - + #region Variable Declarations + WpfChartSeries uIColumnSeriesCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UIColumnSeriesCustom; + #endregion + + // Verify that the 'SegmentsCount' property of 'ColumnSeries' custom control equals '10' + Assert.AreEqual(this.AssertMethod1ExpectedValues.UIColumnSeriesCustomSegmentsCount, uIColumnSeriesCustom.SegmentsCount, "Segemnts Count Mismatched..."); } - {% endhighlight %} ## Run Tests diff --git a/wpf/Charts/How-To/Export-Chart-to-Image-Windows-8-1.md b/wpf/Charts/How-To/Export-Chart-to-Image-Windows-8-1.md index 3789145b1a..15f7fd5f5f 100644 --- a/wpf/Charts/How-To/Export-Chart-to-Image-Windows-8-1.md +++ b/wpf/Charts/How-To/Export-Chart-to-Image-Windows-8-1.md @@ -54,25 +54,16 @@ chart.Save("sfchart.jpg", KnownFolders.PicturesLibrary); {% highlight c# %} var memoryStream = new InMemoryRandomAccessStream(); - chart.Save(memoryStream, BitmapEncoder.BmpEncoderId); +chart.Save(memoryStream, BitmapEncoder.BmpEncoderId); +StorageFolder storageFolder = Windows.ApplicationModel.Package.Current.InstalledLocation; +var file = await storageFolder.CreateFileAsync("chartwithstream.jpg", CreationCollisionOption.GenerateUniqueName); - StorageFolder storageFolder = Windows.ApplicationModel.Package.Current.InstalledLocation; - - - - var file = await storageFolder.CreateFileAsync("chartwithstream.jpg", CreationCollisionOption.GenerateUniqueName); - - - - var stream = await file.OpenAsync(Windows.Storage.FileAccessMode.ReadWrite); - - { - - chart.Save(stream, BitmapEncoder.BmpEncoderId); - - } +var stream = await file.OpenAsync(Windows.Storage.FileAccessMode.ReadWrite); +{ + chart.Save(stream, BitmapEncoder.BmpEncoderId); +} {% endhighlight %} diff --git a/wpf/Charts/How-To/Serialize-the-SfChart.md b/wpf/Charts/How-To/Serialize-the-SfChart.md index 01f4909f24..37d3951a81 100644 --- a/wpf/Charts/How-To/Serialize-the-SfChart.md +++ b/wpf/Charts/How-To/Serialize-the-SfChart.md @@ -50,17 +50,16 @@ XAML {% highlight xaml %} - - - + - -