From 8d930114a95ba298929057ff44206ee48fca1fc9 Mon Sep 17 00:00:00 2001 From: Harsha Date: Thu, 22 May 2025 23:37:00 +0530 Subject: [PATCH 1/4] Updated UG Content of series folder --- wpf/Charts/Adornments/DataMarkers.md | 56 +- wpf/Charts/Adornments/Label.md | 449 ++++--- wpf/Charts/Adornments/Marker.md | 61 +- .../Adornments/Positioning-Adornment.md | 106 +- wpf/Charts/Animation.md | 50 +- wpf/Charts/Annotations.md | 1061 +++++++---------- wpf/Charts/Appearance.md | 398 ++----- wpf/Charts/Area.md | 6 +- wpf/Charts/CodedUI.md | 156 +-- wpf/Charts/DataBinding.md | 278 ++--- wpf/Charts/Exporting.md | 23 +- wpf/Charts/FastChart/Fast-BitmapSeries.md | 317 ++--- wpf/Charts/FastChart/Fast-Series.md | 42 +- wpf/Charts/FastChart/FastCharts.md | 14 +- wpf/Charts/Getting-Started.md | 130 +- wpf/Charts/Header.md | 61 +- ...dd-custom-labels-to-track-ball-behavior.md | 29 +- .../How-To/Add-range-of-points-dynamically.md | 27 +- .../Export-Chart-to-Image-Windows-8-1.md | 71 +- wpf/Charts/How-To/Print-the-SfChart.md | 16 +- wpf/Charts/How-To/Serialize-the-SfChart.md | 102 +- ...xis-value-to-pixel-value-and-vice-versa.md | 66 +- wpf/Charts/Interactive-Features/Crosshair.md | 193 +-- .../InteractiveFeatures.md | 7 +- .../Resizable-Scrollbar.md | 119 +- wpf/Charts/Interactive-Features/Selection.md | 342 ++---- wpf/Charts/Interactive-Features/Tooltip.md | 273 +---- wpf/Charts/Interactive-Features/Trackball.md | 361 ++---- .../Visual-Data-Editing.md | 281 ++--- wpf/Charts/Interactive-Features/zoompan.md | 392 ++---- wpf/Charts/Legend.md | 411 ++----- wpf/Charts/Overview.md | 22 +- wpf/Charts/Performance.md | 28 +- wpf/Charts/Printing.md | 75 +- wpf/Charts/ScaleBreaks.md | 228 +--- wpf/Charts/Serialization.md | 138 ++- wpf/Charts/SeriesTypes/Area.md | 55 +- wpf/Charts/SeriesTypes/BubbleandScatter.md | 65 +- wpf/Charts/SeriesTypes/ColumnandBar.md | 70 +- wpf/Charts/SeriesTypes/Custom.md | 74 +- wpf/Charts/SeriesTypes/Distribution.md | 81 +- wpf/Charts/SeriesTypes/EmptyPoints.md | 327 +++-- wpf/Charts/SeriesTypes/ErrorBars.md | 413 ++----- wpf/Charts/SeriesTypes/Financial.md | 91 +- wpf/Charts/SeriesTypes/Funnelandpyramid.md | 165 +-- wpf/Charts/SeriesTypes/GroupingStacked.md | 109 +- wpf/Charts/SeriesTypes/LineandStepLine.md | 42 +- wpf/Charts/SeriesTypes/Other.md | 113 +- wpf/Charts/SeriesTypes/PieandDoughnut.md | 237 ++-- wpf/Charts/SeriesTypes/Placesidebyside.md | 112 +- wpf/Charts/SeriesTypes/RadarandPolar.md | 234 +--- wpf/Charts/SeriesTypes/Range.md | 120 +- wpf/Charts/SeriesTypes/Series.md | 12 +- wpf/Charts/SeriesTypes/Spline.md | 80 +- wpf/Charts/SeriesTypes/Stacking.md | 495 +++----- wpf/Charts/Sorting.md | 160 +-- wpf/Charts/Striplines.md | 505 +++----- wpf/Charts/Technical-Indicators.md | 571 ++++----- wpf/Charts/Trendlines.md | 515 +++----- wpf/Charts/Vertical-Charts.md | 219 ++-- wpf/Charts/Watermark.md | 104 +- 61 files changed, 3599 insertions(+), 7759 deletions(-) diff --git a/wpf/Charts/Adornments/DataMarkers.md b/wpf/Charts/Adornments/DataMarkers.md index bb47f00763..bf25467c0f 100644 --- a/wpf/Charts/Adornments/DataMarkers.md +++ b/wpf/Charts/Adornments/DataMarkers.md @@ -1,7 +1,7 @@ --- layout: post title: Data Markers in WPF Charts control | Syncfusion -description: Learn here all about Data Markers support in Syncfusion® WPF Charts (SfChart) control, its elements and more details. +description: Learn here all about Data Markers support in Syncfusion WPF Charts (SfChart) control, its elements and more details. platform: wpf control: SfChart documentation: ug @@ -9,40 +9,40 @@ documentation: ug # Data Markers in WPF Charts (SfChart) -Chart adornments (Data Markers) are used to display values related to a chart segment element. Values from data point(x, y) or other custom properties from a data source can be displayed. +Chart adornments (Data Markers) are used to display values related to a chart segment element. Values from data point (X, Y) or other custom properties from a data source can be displayed. -Each adornment can be represented by the following: +Each adornment can be represented by the following elements: -* Label - Displays the segment label content at the (X, Y) point. -* Marker- Displays the desired symbol at the (X, Y) point. -* ConnectorLine - Line used to connect the (X, Y) point and the label element. +* **Label** - Displays the segment label content at the (X, Y) point. +* **Marker** - Displays the desired symbol at the (X, Y) point. +* **ConnectorLine** - Line used to connect the (X, Y) point and the label element. -The following code example illustrates how to initialize the adornment. +The following code example illustrates how to initialize the adornment: {% tabs %} {% highlight xaml %} - - - - - + + + + + {% endhighlight %} {% highlight c# %} - ColumnSeries series = new ColumnSeries() - { - ItemsSource = ViewModel().Demands, - XBindingPath = "Demands", - YBindingPath = "Value", - Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)) - }; - ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo(); - series.AdornmentsInfo = adornmentInfo; - chart.Series.Add(series); +ColumnSeries series = new ColumnSeries() +{ + ItemsSource = ViewModel().Demands, + XBindingPath = "Category", + YBindingPath = "Value", + Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)) +}; +ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo(); +series.AdornmentsInfo = adornmentInfo; +chart.Series.Add(series); {% endhighlight %} @@ -52,14 +52,12 @@ The following code example illustrates how to initialize the adornment. ## See also -[`How to show different data marker based on the value in the WPF Chart`](https://support.syncfusion.com/kb/article/9396/how-to-show-different-data-marker-based-on-the-value-in-the-wpf-chart) +[How to show different data marker based on the value in the WPF Chart](https://support.syncfusion.com/kb/article/9396/how-to-show-different-data-marker-based-on-the-value-in-the-wpf-chart) -[`How to show custom data marker in the WPF Chart`](https://support.syncfusion.com/kb/article/9620/how-to-show-custom-data-marker-in-the-wpf-chart) +[How to show custom data marker in the WPF Chart](https://support.syncfusion.com/kb/article/9620/how-to-show-custom-data-marker-in-the-wpf-chart) -[`How to rotate text in adornment`](https://support.syncfusion.com/kb/article/3135/how-to-rotate-text-in-adornment-of-wpf-chart-sfchart) - -[`How to display the labels inside segments`](https://support.syncfusion.com/kb/article/2773/how-to-display-the-labels-inside-segments-in-wpf-chart-sfchart) - -[`How to bind the underlying DataTable model to the DataMarker Template in WPF Charts`](https://support.syncfusion.com/kb/article/10047/how-to-bind-the-underlying-datatable-model-to-the-datamarker-template-in-wpf-charts) +[How to rotate text in adornment](https://support.syncfusion.com/kb/article/3135/how-to-rotate-text-in-adornment-of-wpf-chart-sfchart) +[How to display the labels inside segments](https://support.syncfusion.com/kb/article/2773/how-to-display-the-labels-inside-segments-in-wpf-chart-sfchart) +[How to bind the underlying DataTable model to the DataMarker Template in WPF Charts](https://support.syncfusion.com/kb/article/10047/how-to-bind-the-underlying-datatable-model-to-the-datamarker-template-in-wpf-charts) \ No newline at end of file diff --git a/wpf/Charts/Adornments/Label.md b/wpf/Charts/Adornments/Label.md index 933e44f58b..ad10b2b7c2 100644 --- a/wpf/Charts/Adornments/Label.md +++ b/wpf/Charts/Adornments/Label.md @@ -9,31 +9,31 @@ documentation: ug # Data Label in WPF Charts (SfChart) -Data points can be easily annotated with labels to help improve the readability of data. +Data points can be easily annotated with labels to improve the readability of data. ## Define Data Label -To enable the Label in adornments you have to set the [`ShowLabel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_ShowLabel) property of [`ChartAdornmentInfo`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfo.html). +To enable labels in adornments, set the [`ShowLabel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_ShowLabel) property of [`ChartAdornmentInfo`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfo.html) to true. -[`SegmentLabelContent`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_SegmentLabelContent) property allows you to define the value to be displayed as adornment label. +The [`SegmentLabelContent`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_SegmentLabelContent) property allows you to define the value to be displayed as the adornment label. -The following code example demonstrates about define the value to be displayed as adornment label. +The following code example demonstrates how to define the value to be displayed as an adornment label: {% tabs %} {% highlight xaml %} - + {% endhighlight %} {% highlight c# %} - ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() - { - ShowLabel = true, - SegmentLabelContent=LabelContent.YValue - }; +ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() +{ + ShowLabel = true, + SegmentLabelContent = LabelContent.YValue +}; {% endhighlight %} @@ -42,7 +42,7 @@ The following code example demonstrates about define the value to be displayed a | SegmentLabelContent values | Description | Output | |---|--|---| | DateTime | Displays LabelContent.DateTime value | ![ DateTime in Adornment](Adornments_images/Datetime.png) | -|LabelContentPath | Without using a LabelTemplate, it displays the y value by default. If we use LabelTemplate for Adornment, we must specify this in to get the underlying data model as DataContext. |![ LabelContentPath in Adornment](Adornments_images/LabelContentPath.png)| +| LabelContentPath | Without using a LabelTemplate, it displays the y value by default. If we use LabelTemplate for Adornment, we must specify this to get the underlying data model as DataContext. |![ LabelContentPath in Adornment](Adornments_images/LabelContentPath.png)| | Percentage | Displays the percentage value of series' point among other points |![ Percentage in Adornment](Adornments_images/Percentage.png) | | XValue | Displays the X value of series' point|![ XValue in Adornment](Adornments_images/Xvalue.png) | | YofTot | Displays the value of Y of total values' point|![ YofTot in Adornment](Adornments_images/YofTot.png) | @@ -50,16 +50,16 @@ The following code example demonstrates about define the value to be displayed a ## Customizing Labels -The following properties are used to customize the adornment label. +The following properties are used to customize the adornment label: -* [`BorderBrush`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_BorderBrush)- used to change the border color. -* [`BorderThickness`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_BorderThickness)- used to change the thickness of the border. -* [`Margin`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_Margin)- used to change the margin size for label. -* [`FontStyle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_FontStyle)- used to change font family of the label. -* [`FontSize`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_FontSize) - used to change font size of the label. -* [`Foreground`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_Foreground)- used to change the color of the label. -* [`FontFamily`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_FontFamily)- used to change the font family of the label. -* [`Background`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_Background)- used to change the label background color. +* [`BorderBrush`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_BorderBrush) - Used to change the border color. +* [`BorderThickness`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_BorderThickness) - Used to change the thickness of the border. +* [`Margin`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_Margin) - Used to change the margin size for label. +* [`FontStyle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_FontStyle) - Used to change font style of the label. +* [`FontSize`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_FontSize) - Used to change font size of the label. +* [`Foreground`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_Foreground) - Used to change the color of the label. +* [`FontFamily`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_FontFamily) - Used to change the font family of the label. +* [`Background`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_Background) - Used to change the label background color. The following code example demonstrates the customization of label using the above properties: @@ -67,30 +67,28 @@ 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 %} @@ -100,68 +98,68 @@ The following code example demonstrates the customization of label using the abo ## Label Template -The default appearance of the label can be customized using [`LabelTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_LabelTemplate) property and along with [`SegmentLabelContent`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_SegmentLabelContent) property value as `LabelContentPath` as in the below code example: +The default appearance of the label can be customized using the [`LabelTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_LabelTemplate) property along with the [`SegmentLabelContent`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_SegmentLabelContent) property value set to `LabelContentPath` as shown in the following code example: {% tabs %} {% 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 %} @@ -171,26 +169,26 @@ The default appearance of the label can be customized using [`LabelTemplate`](ht ## Label Format -[`SegmentLabelFormat`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_SegmentLabelFormat) property allows you to provide formatting for the labels. +The [`SegmentLabelFormat`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_SegmentLabelFormat) property allows you to provide formatting for the labels. -The following code example demonstrates the y value having three decimal digits. +The following code example demonstrates the y value having three decimal digits: {% tabs %} {% highlight xaml %} - - + + {% endhighlight %} {% highlight c# %} - ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() - { - ShowLabel = true, - SegmentLabelFormat = "0.000" - }; +ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() +{ + ShowLabel = true, + SegmentLabelFormat = "0.000" +}; {% endhighlight %} @@ -202,25 +200,27 @@ In the following image, you can see the decimal position will be rounded off to ## Label Rotation -[`LabelRotationAngle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_LabelRotationAngle) property is used to define the angle to which the label has to rotate. The following code demonstrates the label rotating angle. +The [`LabelRotationAngle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_LabelRotationAngle) property is used to define the angle to which the label has to rotate. The following code demonstrates the label rotating angle: {% tabs %} {% 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 %} @@ -229,14 +229,13 @@ In the following image, you can see the decimal position will be rounded off to ## Connector Line -This feature is used to connect label and data point using a line. It can be enabled for any chart types but this is often used with Pie and Doughnut chart types. You can add connector line for the adornments using [`ShowConnectorLine`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_ShowConnectorLine) property. +This feature is used to connect label and data point using a line. It can be enabled for any chart types but is often used with Pie and Doughnut chart types. You can add a connector line for the adornments using the [`ShowConnectorLine`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_ShowConnectorLine) property. -The connector line can be customized using the below properies. +The connector line can be customized using the following properties: * [`ConnectorHeight`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_ConnectorHeight) * [`ConnectorLineStyle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_ConnectorLineStyle) * [`ConnectorRotationAngle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_ConnectorRotationAngle) -* [`ConnectorLineStyle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_ConnectorLineStyle) The following code example shows the customization options for connector line: @@ -244,51 +243,47 @@ 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 %} @@ -298,87 +293,85 @@ The following code example shows the customization options for connector line: **Connector Type** -[`ConnectorType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CircularSeriesBase.html#Syncfusion_UI_Xaml_Charts_CircularSeriesBase_ConnectorType) property in AccumulationSeries is used to specify the connector line type such as [`Line`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ConnectorMode.html) or [`Bezier`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ConnectorMode.html). This property is only for AccumulationSeries like PieSeries, DoughnutSeries, PyramidSeries and FunnelSeries. - +The [`ConnectorType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CircularSeriesBase.html#Syncfusion_UI_Xaml_Charts_CircularSeriesBase_ConnectorType) property in AccumulationSeries is used to specify the connector line type such as [`Line`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ConnectorMode.html) or [`Bezier`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ConnectorMode.html). This property is only for AccumulationSeries like PieSeries, DoughnutSeries, PyramidSeries and FunnelSeries. {% tabs %} {% 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 = "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 %} {% endtabs %} - **Line** +**Line** - ![Connector Line in WPF Chart](Adornments_images/Line.png) +![Connector Line in WPF Chart](Adornments_images/Line.png) - **Bezier** +**Bezier** - ![Bezier in WPF Chart](Adornments_images/Bezier.png) +![Bezier in WPF Chart](Adornments_images/Bezier.png) - **Straight Line** +**Straight Line** ![Connector line with StraightLine type](Adornments_images/StraightLine.png) ## Applying Series Brush -[`UseSeriesPalette`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_UseSeriesPalette) property is used to set the interior of the series to the adornment background. +The [`UseSeriesPalette`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_UseSeriesPalette) property is used to set the interior of the series to the adornment background. ->N For Accumulation like Pie, Doughnut, Funnel and Pyramid the segment interior color will be reflected in adornment background. +> Note: For Accumulation charts like Pie, Doughnut, Funnel and Pyramid, the segment interior color will be reflected in the adornment background. {% tabs %} {% highlight xaml %} - - - + + {% endhighlight %} {% highlight c# %} - ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() - { - ShowLabel = true, - UseSeriesPalette = true - }; +ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() +{ + ShowLabel = true, + UseSeriesPalette = true +}; {% endhighlight %} @@ -386,7 +379,7 @@ The following code example shows the customization options for connector line: ## Smart Labels -When you have more datapoints in Pie or Doughnut series, the adornment labels might get overlap with each other. SfChart provides built-in support to avoid these overlapping by using [`EnableSmartLabels`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CircularSeriesBase.html#Syncfusion_UI_Xaml_Charts_CircularSeriesBase_EnableSmartLabels) property. +When you have more datapoints in Pie or Doughnut series, the adornment labels might overlap with each other. SfChart provides built-in support to avoid these overlapping by using the [`EnableSmartLabels`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CircularSeriesBase.html#Syncfusion_UI_Xaml_Charts_CircularSeriesBase_EnableSmartLabels) property. The following code example demonstrates the EnableSmartLabels property: @@ -394,39 +387,39 @@ 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().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; {% endhighlight %} @@ -434,4 +427,4 @@ The following code example demonstrates the EnableSmartLabels property: ![Smart labels for adornments in WPF Chart](Adornments_images/smartlabel.png) -N> For circular series, the adornment position can be changed to [`Inside`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CircularSeriesLabelPosition.html), [`Outside`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CircularSeriesLabelPosition.html) or [`OutsideExtended`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CircularSeriesLabelPosition.html) using the [`LabelPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CircularSeriesBase.html#Syncfusion_UI_Xaml_Charts_CircularSeriesBase_LabelPosition) property. +> Note: For circular series, the adornment position can be changed to [`Inside`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CircularSeriesLabelPosition.html), [`Outside`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CircularSeriesLabelPosition.html) or [`OutsideExtended`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CircularSeriesLabelPosition.html) using the [`LabelPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CircularSeriesBase.html#Syncfusion_UI_Xaml_Charts_CircularSeriesBase_LabelPosition) property. \ No newline at end of file diff --git a/wpf/Charts/Adornments/Marker.md b/wpf/Charts/Adornments/Marker.md index d43bc666b5..1414dc83cc 100644 --- a/wpf/Charts/Adornments/Marker.md +++ b/wpf/Charts/Adornments/Marker.md @@ -9,13 +9,13 @@ documentation: ug # Data Marker in WPF Charts (SfChart) -Data Marker is used to mark the data points with built-in available shapes. +Data Markers are used to visually highlight data points with built-in shapes in a chart. ## Define Data Marker -To enable the marker in adornments you have to set the [`ShowMarker`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_ShowMarker) property as True. By default, there is no symbol displayed, you have to add the desired symbol using [`Symbol`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_Symbol) property. -The following code example demonstrates the column series with [`Diamond`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSymbol.html) symbol: +To enable markers in adornments, set the [`ShowMarker`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_ShowMarker) property to True. By default, no symbol is displayed, so you need to specify the desired symbol using the [`Symbol`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_Symbol) property. +The following code example demonstrates a column series with a [`Diamond`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSymbol.html) symbol: {% tabs %} @@ -31,11 +31,11 @@ The following code example demonstrates the column series with [`Diamond`](https {% highlight c# %} ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() - { - ShowMarker = true, - Symbol = ChartSymbol.Diamond, - SymbolInterior=new SolidColorBrush(Colors.Black) - }; + { + ShowMarker = true, + Symbol = ChartSymbol.Diamond, + SymbolInterior = new SolidColorBrush(Colors.Black) + }; {% endhighlight %} @@ -43,31 +43,30 @@ The following code example demonstrates the column series with [`Diamond`](https ![WPF Chart Symbol Support](Adornments_images/wpf-chart-symbol-support.png) - ### Customizing Symbol -SfChart provides support more customization for symbols in adornments. +SfChart provides extensive customization options for symbols in adornments: -* [`SymbolHeight`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_SymbolHeight) - used to change the height of the symbol. -* [`SymbolWidth`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_SymbolWidth) - used to change the width of the symbol. -* [`SymbolInterior`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_SymbolInterior) - used to change the color of symbol. -* [`SymbolStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_SymbolStroke) - used to change the stroke color of symbol. -* [`SymbolTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_SymbolTemplate) - used to customize the appearance of symbol. -* [`Symbol`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_Symbol) - used to change the predefined symbol. +* [`SymbolHeight`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_SymbolHeight) - Changes the height of the symbol +* [`SymbolWidth`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_SymbolWidth) - Changes the width of the symbol +* [`SymbolInterior`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_SymbolInterior) - Changes the fill color of the symbol +* [`SymbolStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_SymbolStroke) - Changes the stroke color of the symbol +* [`SymbolTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_SymbolTemplate) - Customizes the appearance of the symbol +* [`Symbol`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_Symbol) - Changes the predefined symbol type -We have some predefined symbols such as +SfChart includes the following predefined symbols: -* Cross +* Cross * Diamond -* Ellipse -* Hexagon -* HorizontalLine -* InvertedTriangle -* Pentagon -* Plus -* Square +* Ellipse +* Hexagon +* HorizontalLine +* InvertedTriangle +* Pentagon +* Plus +* Square * Triangle -* VerticalLine +* VerticalLine {% tabs %} @@ -75,7 +74,7 @@ We have some predefined symbols such as - o> + {% endhighlight %} @@ -97,10 +96,9 @@ We have some predefined symbols such as ![WPF Chart Custom Marker](Adornments_images/wpf-chart-custom-marker.png) - **SymbolTemplate** -The following code example demonstrates how to use SymbolTemplate. +The following code example demonstrates how to use the SymbolTemplate property: {% tabs %} @@ -145,7 +143,7 @@ The following code example demonstrates how to use SymbolTemplate. - + ... @@ -166,6 +164,7 @@ The following code example demonstrates how to use SymbolTemplate. ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() { AdornmentsPosition = AdornmentsPosition.Top, + ShowMarker = true, SymbolTemplate = chart.Resources["symbolTemplate"] as DataTemplate, Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)) }; @@ -174,4 +173,4 @@ The following code example demonstrates how to use SymbolTemplate. {% endtabs %} -![WPF Chart Marker SymbolTemplate](Adornments_images/wpf-chart-marker-symboltemplate.png) +![WPF Chart Marker SymbolTemplate](Adornments_images/wpf-chart-marker-symboltemplate.png) \ No newline at end of file diff --git a/wpf/Charts/Adornments/Positioning-Adornment.md b/wpf/Charts/Adornments/Positioning-Adornment.md index b8a57a9b3b..0bc68ff67a 100644 --- a/wpf/Charts/Adornments/Positioning-Adornment.md +++ b/wpf/Charts/Adornments/Positioning-Adornment.md @@ -1,7 +1,7 @@ --- layout: post title: Positioning Data Markers in WPF Charts control | Syncfusion -description: Learn here all about Positioning Data Markers support in Syncfusion® WPF Charts (SfChart) control and more. +description: Learn here all about Positioning Data Markers support in Syncfusion WPF Charts (SfChart) control and more. platform: wpf control: SfChart documentation: ug @@ -9,51 +9,49 @@ documentation: ug # Positioning Data Markers in WPF Charts (SfChart) -The positioning of adornments inside the series is defined using [`AdornmentsPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_AdornmentsPosition) property. +The positioning of adornments inside the series is defined using the [`AdornmentsPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_AdornmentsPosition) property. -* [`Top`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.AdornmentsPosition.html) - Positions the Adornment at the top edge point of a chart segment. -* [`Bottom`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.AdornmentsPosition.html) - Positions the Adornment at the bottom edge point of a chart segment. -* [`TopAndBottom`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.AdornmentsPosition.html) - Positions the Adornment at the center point of a chart segment. +* [`Top`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.AdornmentsPosition.html) - Positions the adornment at the top edge point of a chart segment. +* [`Bottom`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.AdornmentsPosition.html) - Positions the adornment at the bottom edge point of a chart segment. +* [`TopAndBottom`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.AdornmentsPosition.html) - Positions the adornment at the center point of a chart segment. N> This behavior varies based on the chart series type. -The following code example explains the positioning of adornments in the middle of the segment. +The following code example demonstrates positioning adornments in the middle of the segment: {% tabs %} {% 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 %} {% endtabs %} ![TopAndBottom Adornment](Adornments_images/TopBottom.png) -Also, you can define the label alignment using [`HorizontalAlignment`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_HorizontalAlignment) and [`VerticalAlignment`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_VerticalAlignment) properties. - +You can also define the label alignment using the [`HorizontalAlignment`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_HorizontalAlignment) and [`VerticalAlignment`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_VerticalAlignment) properties. ## Label Position -Other than the above positioning options, SfChart providing additional customization option to position the adornments smartly based on series types using [`LabelPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_LabelPosition) property. +In addition to the positioning options mentioned above, SfChart provides additional customization options to position adornments intelligently based on series types using the [`LabelPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_LabelPosition) property. -The following are the values for this property: +The following values are available for this property: * [`Default`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.AdornmentsLabelPosition.html) * [`Auto`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.AdornmentsLabelPosition.html) @@ -61,24 +59,20 @@ The following are the values for this property: * [`Outer`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.AdornmentsLabelPosition.html) * [`Center`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.AdornmentsLabelPosition.html) -The following code sample illustrates the center position of data marker labels, +The following code sample illustrates the center position of data marker labels: {% tabs %} {% highlight xaml %} - - - + {% endhighlight %} {% highlight c# %} - - ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() - { - ShowLabel = true, - LabelPosition =AdornmentsLabelPosition.Center - }; - +ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() +{ + ShowLabel = true, + LabelPosition = AdornmentsLabelPosition.Center +}; {% endhighlight %} {% endtabs %} @@ -87,24 +81,20 @@ The following code sample illustrates the center position of data marker labels, |--|--| |![center Column](Adornments_images/Center_Column.png)|![center Series](Adornments_images/Center_Spline.png)| -The following code sample illustrates the inner position of data marker labels, +The following code sample illustrates the inner position of data marker labels: {% tabs %} {% highlight xaml %} - - - + {% endhighlight %} {% highlight c# %} - - ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() - { - ShowLabel = true, - LabelPosition =AdornmentsLabelPosition.Inner - }; - +ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() +{ + ShowLabel = true, + LabelPosition = AdornmentsLabelPosition.Inner +}; {% endhighlight %} {% endtabs %} @@ -113,30 +103,24 @@ The following code sample illustrates the inner position of data marker labels, |--|--| |![Inner Column](Adornments_images/Inner_Column.png)|![Inner Series](Adornments_images/Inner_Spline.png)| - -The following code sample illustrates the outer position of data marker labels, +The following code sample illustrates the outer position of data marker labels: {% tabs %} {% highlight xaml %} - - - + {% endhighlight %} {% highlight c# %} - - ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() - { - ShowLabel = true, - LabelPosition =AdornmentsLabelPosition.Outer - }; - +ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() +{ + ShowLabel = true, + LabelPosition = AdornmentsLabelPosition.Outer +}; {% endhighlight %} {% endtabs %} | Column | Spline | |--|--| -|![Outer Column](Adornments_images/Outer_Column.png)|![Outer Series](Adornments_images/Outer_Spline.png)| - +|![Outer Column](Adornments_images/Outer_Column.png)|![Outer Series](Adornments_images/Outer_Spline.png)| \ No newline at end of file diff --git a/wpf/Charts/Animation.md b/wpf/Charts/Animation.md index 1654b4f1fc..fcbca569fd 100644 --- a/wpf/Charts/Animation.md +++ b/wpf/Charts/Animation.md @@ -1,7 +1,7 @@ --- layout: post title: Animation in WPF Charts control | Syncfusion -description: Learn here all about Animation support in Syncfusion® WPF Charts (SfChart) control, its elements and more details. +description: Learn here all about Animation support in Syncfusion WPF Charts (SfChart) control, its elements and more details. platform: wpf control: SfChart documentation: ug @@ -9,9 +9,9 @@ documentation: ug # Animation in WPF Charts (SfChart) -SfChart allows you to animate the chart series on loading, and whenever the ItemsSource changes. Animation in chart can be enabled by setting the EnableAnimation property as True and defining the corresponding animation speed with AnimationDuration property. +SfChart allows you to animate the chart series on loading and whenever the ItemsSource changes. Animation in chart can be enabled by setting the `EnableAnimation` property to True and defining the corresponding animation speed with the `AnimationDuration` property. -The following types of series support Animation. +The following types of series support Animation: * Line * Column @@ -26,25 +26,23 @@ The following types of series support Animation. * Stacking area * Pie -The following APIs are used to customize the Animation. +The following APIs are used to customize the Animation: +* [`EnableAnimation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_EnableAnimation) - Represents a boolean value to enable the animation for series. +* [`AnimationDuration`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_AnimationDuration) - Represents a TimeSpan value which sets animation speed for the chart. -* [`EnableAnimation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_EnableAnimation)-Represents a boolean value to enable the animation for series. -* [`AnimationDuration`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_AnimationDuration)-Represents a TimeSpan value which sets animation speed for the chart. - - -The following example shows the Animation feature for chart series. +The following example shows the Animation feature for chart series: {% tabs %} {% highlight xaml %} - - - + {% endhighlight %} @@ -53,17 +51,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); @@ -72,17 +64,17 @@ chart.Series.Add(columnSeries); {% endtabs %} -**Column** **Series** +**Column Series** ![WPF Chart Column Animation](Animation_images/wpf-chart-column-animation.gif) -**SplineArea** **Series** +**SplineArea Series** ![WPF Chart Spline Animation](Animation_images/wpf-chart-spline-animation.gif) -**Scatter** **Series** +**Scatter Series** ![WPF Chart Scatter Animation](Animation_images/wpf-chart-scatter-animation.gif) -N> You can refer to our [WPF Charts](https://www.syncfusion.com/wpf-controls/charts) feature tour page for its groundbreaking feature representations. You can also explore our [WPF Charts example](https://github.com/syncfusion/wpf-demos) to knows various chart types and how to easily configured with built-in support for creating stunning visual effects. \ No newline at end of file +N> You can refer to our [WPF Charts](https://www.syncfusion.com/wpf-controls/charts) feature tour page for its groundbreaking feature representations. You can also explore our [WPF Charts example](https://github.com/syncfusion/wpf-demos) to know various chart types and how to easily configure them with built-in support for creating stunning visual effects. \ No newline at end of file diff --git a/wpf/Charts/Annotations.md b/wpf/Charts/Annotations.md index 22284320bd..cf30eb8367 100644 --- a/wpf/Charts/Annotations.md +++ b/wpf/Charts/Annotations.md @@ -8,9 +8,9 @@ documentation: ug --- # Annotations in WPF Charts (SfChart) -SfChart supports Annotations, which allows you to mark the specific area of interest in the chart area. You can draw custom shapes, also text and images can be added using Annotations. +SfChart supports Annotations, which allows you to mark specific areas of interest in the chart area. You can draw custom shapes, and add text and images using Annotations. -The following annotations are supported in SfChart +The following annotations are supported in SfChart: * [Text Annotation](https://help.syncfusion.com/wpf/charts/annotations#text-annotation) * [Shape Annotation](https://help.syncfusion.com/wpf/charts/annotations#shape-annotation) @@ -18,209 +18,196 @@ The following annotations are supported in SfChart ## Adding Annotation -You can create an instance for any type of Annotation and add it to [`Annotations`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfChart.html#Syncfusion_UI_Xaml_Charts_SfChart_Annotations) collection. Here for instance, the EllipseAnnotation is added. +You can create an instance for any type of Annotation and add it to the [`Annotations`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfChart.html#Syncfusion_UI_Xaml_Charts_SfChart_Annotations) collection. Here for instance, the EllipseAnnotation is added. {% tabs %} {% 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); - {% endhighlight %} {% endtabs %} ![Annotation in WPF Chart](Annotation_images/wpf-chart-annotation.jpeg) - ## Positioning the Annotation -Annotations can be positioned in plot area based on [`X1`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Annotation.html#Syncfusion_UI_Xaml_Charts_Annotation_X1) and [`Y1`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Annotation.html#Syncfusion_UI_Xaml_Charts_Annotation_Y1) properties and for image and shape annotations you need to specify [`X2`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ShapeAnnotation.html#Syncfusion_UI_Xaml_Charts_ShapeAnnotation_X2) and [`Y2`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ShapeAnnotation.html#Syncfusion_UI_Xaml_Charts_ShapeAnnotation_Y2) properties. These X and Y values can be specified with axis units or pixel units and this can be identified using [`CoordinateUnit`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Annotation.html#Syncfusion_UI_Xaml_Charts_Annotation_CoordinateUnit) property. +Annotations can be positioned in the plot area based on [`X1`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Annotation.html#Syncfusion_UI_Xaml_Charts_Annotation_X1) and [`Y1`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Annotation.html#Syncfusion_UI_Xaml_Charts_Annotation_Y1) properties. For image and shape annotations, you need to specify [`X2`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ShapeAnnotation.html#Syncfusion_UI_Xaml_Charts_ShapeAnnotation_X2) and [`Y2`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ShapeAnnotation.html#Syncfusion_UI_Xaml_Charts_ShapeAnnotation_Y2) properties. These X and Y values can be specified with axis units or pixel units, which can be identified using the [`CoordinateUnit`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Annotation.html#Syncfusion_UI_Xaml_Charts_Annotation_CoordinateUnit) property. -**Positioning** **based** **on** **CoordinateUnit** **as** **Axis** +**Positioning based on CoordinateUnit as Axis** -To position the annotation based on axis, set the X1 and Y1, X2 and Y2 properties based on axis range values, if needed, set the CoordinateUnit value as [`Axis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CoordinateUnit.html).. +To position the annotation based on axis, set the X1 and Y1, X2 and Y2 properties based on axis range values. If needed, set the CoordinateUnit value as [`Axis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CoordinateUnit.html). {% tabs %} {% 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" - }; +RectangleAnnotation annotation = new RectangleAnnotation() +{ + X1 = 1.25, + Y1 = 1300, + X2 = 2.25, + Y2 = 1500, + Text = "Axis Value", + CoordinateUnit = CoordinateUnit.Axis +}; chart.Annotations.Add(annotation); - {% endhighlight %} {% endtabs %} ![Changing Annotation Position based on CoordinateUnit as Axis in WPF Chart](Annotation_images/wpf-chart-annotation-based-on-coordinates.jpg) -**Positioning** **based** **on** **CoordinateUnit** **as** **Pixels** - -To position based on the pixel values you have to set the CoordinateUnit as Pixels and the pixel values in X1 and Y1, X2 and Y2 properties in Annotation. +**Positioning based on CoordinateUnit as Pixels** +To position based on pixel values, set the CoordinateUnit as Pixels and provide pixel values for X1 and Y1, X2 and Y2 properties in the Annotation. {% tabs %} {% 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); - {% endhighlight %} {% endtabs %} ![Changing Annotation Position based on CoordinateUnit as Pixel in WPF Chart](Annotation_images/wpf-chart-axis-based-on-coordinate-pixel.jpg) -**Adding** **Annotation** **for** **MultipleAxes** +**Adding Annotation for Multiple Axes** -You can also add annotation for a particular axis when there is multiple axes using [`XAxisName`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Annotation.html#Syncfusion_UI_Xaml_Charts_Annotation_XAxisName) and [`YAxisName`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Annotation.html#Syncfusion_UI_Xaml_Charts_Annotation_YAxisName) properties as in the below code snippet. +You can also add annotation for a particular axis when there are multiple axes by using the [`XAxisName`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Annotation.html#Syncfusion_UI_Xaml_Charts_Annotation_XAxisName) and [`YAxisName`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Annotation.html#Syncfusion_UI_Xaml_Charts_Annotation_YAxisName) properties as shown in the code snippet below. {% tabs %} {% 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.Series.Add(columnSeries); +chart.Series.Add(scatterSeries); {% endhighlight %} {% endtabs %} @@ -229,30 +216,26 @@ You can also add annotation for a particular axis when there is multiple axes us ## Text Annotation -[`TextAnnotations`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.TextAnnotation.html) are used to add simple with help of [`Text`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Annotation.html#Syncfusion_UI_Xaml_Charts_Annotation_Text) property in specific points over the chart area. +[`TextAnnotations`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.TextAnnotation.html) are used to add simple text with the help of the [`Text`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Annotation.html#Syncfusion_UI_Xaml_Charts_Annotation_Text) property at specific points over the chart area. {% tabs %} {% 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); - {% endhighlight %} {% endtabs %} @@ -261,114 +244,86 @@ chart.Annotations.Add(annotation); ### Customizing Text Annotation -SfChart provides you with an editing option for the text in any annotations. When text annotation is enabled editing, if we click the text annotation it switches to edit mode which provide easy way of customizing the text at run time. +SfChart provides an editing option for the text in annotations. When text annotation editing is enabled, clicking the text annotation switches it to edit mode, providing an easy way to customize the text at runtime. The following properties are used to customize the text: * [`EnableEditing`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Annotation.html#Syncfusion_UI_Xaml_Charts_Annotation_EnableEditing) - Used to define whether the text in TextAnnotation can be edited or not. - * [`Angle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.TextAnnotation.html#Syncfusion_UI_Xaml_Charts_TextAnnotation_Angle) - Used to get or set the angle for rotating the Annotation. - * [`EnableClipping`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Annotation.html#Syncfusion_UI_Xaml_Charts_Annotation_EnableClipping) - Used to define whether annotation should clip while crossing with boundary. - * [`Foreground`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Annotation.html#Syncfusion_UI_Xaml_Charts_Annotation_Foreground) - Used to change the text color. - -* [`FontSize`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Annotation.html#Syncfusion_UI_Xaml_Charts_Annotation_FontSize)– An int value that represents the font size of the annotation text. - -* [`FontFamily`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Annotation.html#Syncfusion_UI_Xaml_Charts_Annotation_FontFamily)– Represents the font family of the annotation text. - -* [`FontStyle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Annotation.html#Syncfusion_UI_Xaml_Charts_Annotation_FontStyle)– Represents the font style of the annotation text. - -* [`FontWeight`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Annotation.html#Syncfusion_UI_Xaml_Charts_Annotation_FontWeight)- Represents the font weight of the annotation text. - +* [`FontSize`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Annotation.html#Syncfusion_UI_Xaml_Charts_Annotation_FontSize) - An int value that represents the font size of the annotation text. +* [`FontFamily`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Annotation.html#Syncfusion_UI_Xaml_Charts_Annotation_FontFamily) - Represents the font family of the annotation text. +* [`FontStyle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Annotation.html#Syncfusion_UI_Xaml_Charts_Annotation_FontStyle) - Represents the font style of the annotation text. +* [`FontWeight`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Annotation.html#Syncfusion_UI_Xaml_Charts_Annotation_FontWeight) - Represents the font weight of the annotation text. * [`FontStretch`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Annotation.html#Syncfusion_UI_Xaml_Charts_Annotation_FontStretch) - Represents the font stretch for the annotation description. - {% tabs %} {% highlight xml %} - - - + + {% endhighlight %} {% highlight c# %} +TextAnnotation annotation = new TextAnnotation() +{ + X1 = 3.5, + Y1 = 500, + Text = "Annotation", + EnableEditing = true, + Foreground = new SolidColorBrush(Colors.Black), + FontWeight = FontWeights.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 %} {% endtabs %} ![Editing Text Annotation in WPF Chart](Annotation_images/wpf-chart-text-annotation-editing.jpeg) - ## Shape Annotation -[`ShapeAnnotation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ShapeAnnotation.html) allows you to add annotations in the form of shapes such as rectangle, ellipse,horizontal line and vertical line at the specific area of interest, in the chart area. - -* [`EllipseAnnotation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.EllipseAnnotation.html)- Used to draw a circle or an ellipse over the chart area. - -* [`RectangleAnnotation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.RectangleAnnotation.html)- Used to draw a rectangle over the chart area. +[`ShapeAnnotation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ShapeAnnotation.html) allows you to add annotations in the form of shapes such as rectangle, ellipse, horizontal line, and vertical line at specific areas of interest in the chart area. +* [`EllipseAnnotation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.EllipseAnnotation.html) - Used to draw a circle or an ellipse over the chart area. +* [`RectangleAnnotation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.RectangleAnnotation.html) - Used to draw a rectangle over the chart area. * [`LineAnnotation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.LineAnnotation.html) - Used to draw a line over the chart area. +* [`VerticalLineAnnotation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.VerticalLineAnnotation.html) - Used to draw a vertical line across the chart area. +* [`HorizontalLineAnnotation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.HorizontalLineAnnotation.html) - Used to add a horizontal line across the chart area. -* [`VerticalLineAnnotation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.VerticalLineAnnotation.html)- Used to draw a vertical line across the chart area. - -* [`HorizontalLineAnnotation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.HorizontalLineAnnotation.html) - Used to add a horizontal line across the chart area. - - -The following API’s are commonly used in all ShapeAnnotation: +The following APIs are commonly used in all ShapeAnnotation: * [`Fill`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ShapeAnnotation.html#Syncfusion_UI_Xaml_Charts_ShapeAnnotation_Fill) - Represents the brush inside the Shape Annotation. - -* [`X2`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ShapeAnnotation.html#Syncfusion_UI_Xaml_Charts_ShapeAnnotation_X2) - Represents the X2 Coordinate of the Shape Annotation. - +* [`X2`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ShapeAnnotation.html#Syncfusion_UI_Xaml_Charts_ShapeAnnotation_X2) - Represents the X2 Coordinate of the Shape Annotation. * [`Y2`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ShapeAnnotation.html#Syncfusion_UI_Xaml_Charts_ShapeAnnotation_Y2) - Represents the Y2 Coordinate of the Shape Annotation. - -* [`CanDrag`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ShapeAnnotation.html#Syncfusion_UI_Xaml_Charts_ShapeAnnotation_CanDrag) - A Boolean value that represent to drag the Annotation. - -* [`CanResize`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ShapeAnnotation.html#Syncfusion_UI_Xaml_Charts_ShapeAnnotation_CanResize) - A Boolean value that represent to resize the Annotation. - +* [`CanDrag`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ShapeAnnotation.html#Syncfusion_UI_Xaml_Charts_ShapeAnnotation_CanDrag) - A Boolean value that represents whether the Annotation can be dragged. +* [`CanResize`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ShapeAnnotation.html#Syncfusion_UI_Xaml_Charts_ShapeAnnotation_CanResize) - A Boolean value that represents whether the Annotation can be resized. ### Ellipse Annotation -The [`EllipseAnnotation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.EllipseAnnotation.html) is used to draw an oval or a circle in specific points over the chart area. - +The [`EllipseAnnotation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.EllipseAnnotation.html) is used to draw an oval or a circle at specific points over the chart area. {% tabs %} {% 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 %} {% endtabs %} @@ -377,28 +332,24 @@ The [`EllipseAnnotation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml. ### Rectangle Annotation -The [`RectangleAnnotation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.RectangleAnnotation.html) is used to draw a rectangle or a square in specific points over the chart area. +The [`RectangleAnnotation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.RectangleAnnotation.html) is used to draw a rectangle or a square at specific points over the chart area. {% tabs %} {% 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 %} {% endtabs %} @@ -407,28 +358,24 @@ The [`RectangleAnnotation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xam ### Line Annotation -The [`LineAnnotation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.LineAnnotation.html) is used to draw a line in specific points over the chart area. +The [`LineAnnotation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.LineAnnotation.html) is used to draw a line at specific points over the chart area. {% tabs %} {% 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 %} {% endtabs %} @@ -437,33 +384,29 @@ The [`LineAnnotation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Cha ### Vertical and Horizontal line annotation -The [`VerticalLineAnnotation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.VerticalLineAnnotation.html) and [`HorizontalLineAnnotation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.HorizontalLineAnnotation.html) are used to draw vertical and horizontal lines in specific points over the chart area. +The [`VerticalLineAnnotation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.VerticalLineAnnotation.html) and [`HorizontalLineAnnotation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.HorizontalLineAnnotation.html) are used to draw vertical and horizontal lines at specific points over the chart area. {% tabs %} {% 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 %} {% endtabs %} @@ -471,213 +414,150 @@ The [`VerticalLineAnnotation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI. ![WPF Chart with Vertical and Horizontal Line Annotation](Annotation_images/wpf-chart-horizontal-vertical-annotation.jpg) ### Customizing Line Annotation -The appearance of the LineAnnotation, VerticalLineAnnotation and HorizontalLineAnnotation can be customized with use of following properties. - -* [`GrabExtent`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.LineAnnotation.html#Syncfusion_UI_Xaml_Charts_LineAnnotation_GrabExtent) - Used to extent the hit visible area while performing dragging and resizing. +The appearance of the LineAnnotation, VerticalLineAnnotation, and HorizontalLineAnnotation can be customized with the use of the following properties: +* [`GrabExtent`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.LineAnnotation.html#Syncfusion_UI_Xaml_Charts_LineAnnotation_GrabExtent) - Used to extend the hit visible area while performing dragging and resizing. * [`ShowLine`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.LineAnnotation.html#Syncfusion_UI_Xaml_Charts_LineAnnotation_ShowLine) - Used to collapse the visibility of the line annotation. - * [`LineCap`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.LineAnnotation.html#Syncfusion_UI_Xaml_Charts_LineAnnotation_LineCap) - Used to display arrow head for the line annotation. - -* [`ShowAxisLabel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.StraightLineAnnotation.html#Syncfusion_UI_Xaml_Charts_StraightLineAnnotation_ShowAxisLabel) - Used to display the axis labels in which the line is placed +* [`ShowAxisLabel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.StraightLineAnnotation.html#Syncfusion_UI_Xaml_Charts_StraightLineAnnotation_ShowAxisLabel) - Used to display the axis labels in which the line is placed. **Adding arrow to line annotation** -To display single headed arrow, set the [`LineCap`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.LineAnnotation.html#Syncfusion_UI_Xaml_Charts_LineAnnotation_LineCap) property to [`Arrow`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.LineCap.html). The default value of the [`LineCap`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.LineAnnotation.html#Syncfusion_UI_Xaml_Charts_LineAnnotation_LineCap) property is [`None`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.LineCap.html). +To display a single-headed arrow, set the [`LineCap`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.LineAnnotation.html#Syncfusion_UI_Xaml_Charts_LineAnnotation_LineCap) property to [`Arrow`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.LineCap.html). The default value of the [`LineCap`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.LineAnnotation.html#Syncfusion_UI_Xaml_Charts_LineAnnotation_LineCap) property is [`None`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.LineCap.html). {% tabs %} {% 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 %} {% endtabs %} ![WPF Chart displays Arrow in Line Annotation](Annotation_images/wpf-chart-line-annotation-with-arrow.jpg) -**Displaying** **Axis** **Labels** **for** **LineAnnotation** - -[`VerticalLineAnnotation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.VerticalLineAnnotation.html#) and [`HorizontalLineAnnotation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.HorizontalLineAnnotation.html#) also displays the axis labels in which the line is placed. This feature can be enabled by setting [`ShowAxisLabel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.StraightLineAnnotation.html#Syncfusion_UI_Xaml_Charts_StraightLineAnnotation_ShowAxisLabel) property to true as in the below code snippet. +**Displaying Axis Labels for LineAnnotation** +[`VerticalLineAnnotation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.VerticalLineAnnotation.html) and [`HorizontalLineAnnotation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.HorizontalLineAnnotation.html) can also display the axis labels where the line is placed. This feature can be enabled by setting the [`ShowAxisLabel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.StraightLineAnnotation.html#Syncfusion_UI_Xaml_Charts_StraightLineAnnotation_ShowAxisLabel) property to true as shown in the code snippet below. {% tabs %} {% 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 %} {% endtabs %} ![Displaying Axis Label for Line Annotation in WPF Chart](Annotation_images/wpf-chart-line-axis-label.jpg) -Also, axis label can be customized the default appearance using [`AxisLabelTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.StraightLineAnnotation.html#Syncfusion_UI_Xaml_Charts_StraightLineAnnotation_AxisLabelTemplate) property. +Also, the axis label can be customized in appearance using the [`AxisLabelTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.StraightLineAnnotation.html#Syncfusion_UI_Xaml_Charts_StraightLineAnnotation_AxisLabelTemplate) property. ### Adding text in shape annotation -For all the shape annotations, the text can be displayed by using the [`Text`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Annotation.html#Syncfusion_UI_Xaml_Charts_Annotation_Text) property. - -**Customizing text in shape annotation** - -The text alignment can be changed using [`HorizontalTextAlignment`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ShapeAnnotation.html#Syncfusion_UI_Xaml_Charts_ShapeAnnotation_HorizontalTextAlignment) and [`VerticalTextAlignment`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ShapeAnnotation.html#Syncfusion_UI_Xaml_Charts_ShapeAnnotation_VerticalTextAlignment) properties. - -{% 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" - }; - -{% endhighlight %} - -{% endtabs %} - -![Customizing Text of Shape Annotation in WPF Chart](Annotation_images/wpf-chart-text-in-shape.jpg) - -N> [`HorizontalTextAlignment`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ShapeAnnotation.html#Syncfusion_UI_Xaml_Charts_ShapeAnnotation_HorizontalTextAlignment) and [`VerticalTextAlignment`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ShapeAnnotation.html#Syncfusion_UI_Xaml_Charts_ShapeAnnotation_VerticalTextAlignment) properties are not applicable for [`TextAnnotation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.TextAnnotation.html#). +For all shape annotations, text can be displayed using the [`Text`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Annotation.html#Syncfusion_UI_Xaml_Charts_Annotation_Text) property. ### Customizing the Shape Annotation SfChart allows customization of shape annotation using the following properties. - -* [`Stroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ShapeAnnotation.html#Syncfusion_UI_Xaml_Charts_ShapeAnnotation_Stroke) - Represents the brush for the annotation outline. +* [`Stroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ShapeAnnotation.html#Syncfusion_UI_Xaml_Charts_ShapeAnnotation_Stroke) - Represents the brush for the annotation outline. * [`StrokeThickness`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ShapeAnnotation.html#Syncfusion_UI_Xaml_Charts_ShapeAnnotation_StrokeThickness) - Represents the thickness of the annotation outline. * [`StrokeDashArray`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ShapeAnnotation.html#Syncfusion_UI_Xaml_Charts_ShapeAnnotation_StrokeDashArray) - Represents the DashArray of the annotation stroke. -* [`StrokeDashCap`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ShapeAnnotation.html#Syncfusion_UI_Xaml_Charts_ShapeAnnotation_StrokeDashCap)- Represents the DashCap of the annotation stroke. +* [`StrokeDashCap`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ShapeAnnotation.html#Syncfusion_UI_Xaml_Charts_ShapeAnnotation_StrokeDashCap) - Represents the DashCap of the annotation stroke. * [`StrokeDashOffset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ShapeAnnotation.html#Syncfusion_UI_Xaml_Charts_ShapeAnnotation_StrokeDashOffset) - Represents the DashOffset of the annotation stroke. * [`StrokeEndLineCap`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ShapeAnnotation.html#Syncfusion_UI_Xaml_Charts_ShapeAnnotation_StrokeEndLineCap) - Represents the end line cap of the annotation stroke. * [`StrokeLineJoin`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ShapeAnnotation.html#Syncfusion_UI_Xaml_Charts_ShapeAnnotation_StrokeLineJoin) - Represents the line join of the annotation outline. * [`StrokeMiterLimit`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ShapeAnnotation.html#Syncfusion_UI_Xaml_Charts_ShapeAnnotation_StrokeMiterLimit) - Represents the limit on the ratio of the miter length to half of the annotation shape. {% tabs %} - {% highlight xaml %} - - - - + {% endhighlight %} - {% highlight c# %} +SfChart chart = new SfChart(); + +HorizontalLineAnnotation annotation = new HorizontalLineAnnotation() +{ + 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 +}; - SfChart chart = new SfChart(); - - HorizontalLineAnnotation annotation = new HorizontalLineAnnotation() - { - - 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 %} - {% endtabs %} ![Customizing Shape Annotations in WPF Chart](Annotation_images/wpf-chart-shape-annotation-customization.jpg) - ## Image Annotation -SfChart provides support to add images as Annotation over the chart area, using the class [ImageAnnotation](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ImageAnnotation.html#). +SfChart provides support to add images as Annotation over the chart area, using the class [ImageAnnotation](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ImageAnnotation.html#). -The following API’s are used in ImageAnnotation. +The following API's are used in ImageAnnotation: -* [`Angle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SolidShapeAnnotation.html#Syncfusion_UI_Xaml_Charts_SolidShapeAnnotation_Angle) – An integer value that represents the rotation angle for the text in Annotation. -* [`ImageSource`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ImageAnnotation.html#Syncfusion_UI_Xaml_Charts_ImageAnnotation_ImageSource) - Represents the source from where the image must be added. +* [`Angle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SolidShapeAnnotation.html#Syncfusion_UI_Xaml_Charts_SolidShapeAnnotation_Angle) – An integer value that represents the rotation angle for the text in Annotation. +* [`ImageSource`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ImageAnnotation.html#Syncfusion_UI_Xaml_Charts_ImageAnnotation_ImageSource) - Represents the source from where the image must be added. * [`X2`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ImageAnnotation.html#Syncfusion_UI_Xaml_Charts_ImageAnnotation_X2) - Represents the X2 Coordinate of the Annotation. * [`Y2`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ImageAnnotation.html#Syncfusion_UI_Xaml_Charts_ImageAnnotation_Y2) - Represents the Y2 Coordinate of the Annotation. {% tabs %} - {% 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 %} - {% endtabs %} ![WPF Chart with Image Annotation](Annotation_images/wpf-chart-image-annotation.jpeg) @@ -686,217 +566,170 @@ The following API’s are used in ImageAnnotation. SfChart provides dragging and resizing support for [`ShapeAnnotations`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ShapeAnnotation.html#). -The following API’s are used for dragging and resizing the annotation - -* [`CanDrag`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ShapeAnnotation.html#Syncfusion_UI_Xaml_Charts_ShapeAnnotation_CanDrag)- A Boolean value that allows the annotation to drag. - -* [`CanResize`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ShapeAnnotation.html#Syncfusion_UI_Xaml_Charts_ShapeAnnotation_CanResize)- A Boolean value that allows the annotation to resize. - -* [`DraggingMode`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ShapeAnnotation.html#Syncfusion_UI_Xaml_Charts_ShapeAnnotation_DraggingMode)- Represents the dragging direction for the annotation. +The following API's are used for dragging and resizing the annotation: -* [`ResizingMode`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SolidShapeAnnotation.html#Syncfusion_UI_Xaml_Charts_SolidShapeAnnotation_ResizingMode)- Represents the resizing direction for the annotation. +* [`CanDrag`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ShapeAnnotation.html#Syncfusion_UI_Xaml_Charts_ShapeAnnotation_CanDrag) - A Boolean value that allows the annotation to drag. +* [`CanResize`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ShapeAnnotation.html#Syncfusion_UI_Xaml_Charts_ShapeAnnotation_CanResize) - A Boolean value that allows the annotation to resize. +* [`DraggingMode`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ShapeAnnotation.html#Syncfusion_UI_Xaml_Charts_ShapeAnnotation_DraggingMode) - Represents the dragging direction for the annotation. +* [`ResizingMode`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SolidShapeAnnotation.html#Syncfusion_UI_Xaml_Charts_SolidShapeAnnotation_ResizingMode) - Represents the resizing direction for the annotation. -**Dragging** **the** **Annotation** +**Dragging the Annotation** -The following code example demonstrates the dragging the rectangle annotation. +The following code example demonstrates dragging the rectangle annotation: {% tabs %} - {% 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 %} - {% endtabs %} ![Dragging Annotation in WPF Chart](Annotation_images/wpf-chart-drag-annotation.jpeg) +Also, the direction of dragging can be customized by using the [`DraggingMode`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ShapeAnnotation.html#Syncfusion_UI_Xaml_Charts_ShapeAnnotation_DraggingMode) property. -Also, the direction of dragging can be customized by using [`DraggingMode`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ShapeAnnotation.html#Syncfusion_UI_Xaml_Charts_ShapeAnnotation_DraggingMode) property. - -**Resizing** **the** **Annotation** +**Resizing the Annotation** -You can resize the annotation by enabling [`CanResize`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ShapeAnnotation.html#Syncfusion_UI_Xaml_Charts_ShapeAnnotation_CanResize) property to True as in the below code snippet. +You can resize the annotation by enabling the [`CanResize`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ShapeAnnotation.html#Syncfusion_UI_Xaml_Charts_ShapeAnnotation_CanResize) property to True as in the below code snippet: {% tabs %} - {% 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), + CanResize = true, + Opacity = 0.5 +}; +{% endhighlight %} +{% endtabs %} - 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 %} - - {% endtabs %} - -![Eesizing Annotation in WPF Chart](Annotation_images/wpf-chart-resize-annotation.jpeg) - - -Also, the direction of resizing can be customized by using [`ResizingMode`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SolidShapeAnnotation.html#Syncfusion_UI_Xaml_Charts_SolidShapeAnnotation_ResizingMode) property. +![Resizing Annotation in WPF Chart](Annotation_images/wpf-chart-resize-annotation.jpeg) +Also, the direction of resizing can be customized by using the [`ResizingMode`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SolidShapeAnnotation.html#Syncfusion_UI_Xaml_Charts_SolidShapeAnnotation_ResizingMode) property. ## ToolTip -SfChart provides support to view the tooltip when mouse hovered on the annotation. To view to tooltip you have to enable the [`ShowToolTip`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Annotation.html#Syncfusion_UI_Xaml_Charts_Annotation_ShowToolTip) property. By default for tooltip there is no content, you have to set the content for the tooltip in [`ToolTipContent`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Annotation.html#Syncfusion_UI_Xaml_Charts_Annotation_ToolTipContent) property. - -* [`ToolTipPlacement`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Annotation.html#Syncfusion_UI_Xaml_Charts_Annotation_ToolTipPlacement) - Used to position the Tooltip with top, bottom, left or right side of the cursor. +SfChart provides support to view the tooltip when mouse hovered on the annotation. To view the tooltip, you have to enable the [`ShowToolTip`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Annotation.html#Syncfusion_UI_Xaml_Charts_Annotation_ShowToolTip) property. By default, the tooltip has no content; you have to set the content for the tooltip in the [`ToolTipContent`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Annotation.html#Syncfusion_UI_Xaml_Charts_Annotation_ToolTipContent) property. +* [`ToolTipPlacement`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Annotation.html#Syncfusion_UI_Xaml_Charts_Annotation_ToolTipPlacement) - Used to position the Tooltip at the top, bottom, left, or right side of the cursor. * [`TooltipTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Annotation.html#Syncfusion_UI_Xaml_Charts_Annotation_ToolTipTemplate) - Used to customize the default appearance of the Tooltip. -The following code example demonstrates the default tooltip. +The following code example demonstrates the default tooltip: {% 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 , - 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 %} - {% endtabs %} ![ToolTip for Annotation in WPF Chart](Annotation_images/wpf-chart-annotation-tooltip.jpeg) **ToolTipTemplate** -The default appearance of the Tooltip can be changed using [`TooltipTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Annotation.html#Syncfusion_UI_Xaml_Charts_Annotation_ToolTipTemplate) property as in the below code snippet. +The default appearance of the Tooltip can be changed using the [`TooltipTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Annotation.html#Syncfusion_UI_Xaml_Charts_Annotation_ToolTipTemplate) property as in the below code snippet: {% 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 %} - {% endtabs %} - ![Annotation Tooltip Template in WPF Chart](Annotation_images/wpf-chart-annotation-tooltip-template.jpeg) ## Annotation Clipping -SfChart allows you to clip the annotation if the annotation crosses the boundary by setting [`EnableClipping`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Annotation.html#Syncfusion_UI_Xaml_Charts_Annotation_EnableClipping) property to True as in the below code snippet. +SfChart allows you to clip the annotation if the annotation crosses the boundary by setting the [`EnableClipping`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Annotation.html#Syncfusion_UI_Xaml_Charts_Annotation_EnableClipping) property to True as in the below code snippet: {% tabs %} - {% highlight xaml %} - - - - - - - + + + {% endhighlight %} - {% highlight c# %} - - 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 - }; - - chart.Annotations.Add(image); - +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 +}; +chart.Annotations.Add(image); {% endhighlight %} - {% endtabs %} -The following screenshot explains that even when x value is provided out of bounds the image annotation is placed inside the chart area. +The following screenshot explains that even when x value is provided out of bounds, the image annotation is placed inside the chart area. ![Annotation Clipping in WPF Chart](Annotation_images/wpf-chart-annotation-clipping.jpeg) @@ -930,42 +763,36 @@ CategoryAxis Index based -X1 = 2, X2 = 3 (start point = 2nd index’s value and end point 3rd index value) +X1 = 2, X2 = 3 (start point = 2nd index's value and end point 3rd index value) - - 2 -DateTimeCategoryAxis +DateTimeCategoryAxis -Index based +Index based -X1 = 2, X2 = 3 (start point = 2nd index’s value and end point 3rd index value) +X1 = 2, X2 = 3 (start point = 2nd index's value and end point 3rd index value) - - 3 -DateTimeAxis +DateTimeAxis -Value based +Value based -X1 = “2015/01/31”, X2 = “2015/02/01” +X1 = "2015/01/31", X2 = "2015/02/01" - - @@ -975,42 +802,38 @@ X1 = “2015/01/31”, X2 = “2015/02/01” TimeSpanAxis -Value based +Value based -X1= 00:00:40 X2=00:00:50 +X1 = 00:00:40, X2 = 00:00:50 - - 5 -Logarithmic Axis +Logarithmic Axis -Value based +Value based -X1= 50(XValue) X2=50(XValue) +X1 = 50 (XValue), X2 = 50 (XValue) - - 6 -Numerical Axis +Numerical Axis -Value based +Value based -X1= 10(XValue) X2=15(XValue) +X1 = 10 (XValue), X2 = 15 (XValue) @@ -1020,44 +843,38 @@ X1= 10(XValue) X2=15(XValue) The corresponding DateTime value will be given as values for X1 and X2 properties. {% tabs %} - {% 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 %} - {% endtabs %} -![WPF Chart with Annotation based on DareTimeAxis](Annotation_images/wpf-chart-datetime-annotation.jpg) +![WPF Chart with Annotation based on DateTimeAxis](Annotation_images/wpf-chart-datetime-annotation.jpg) ## Events -SfChart provides the following events in [`Annotation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Annotation.html#). +SfChart provides the following events in [`Annotation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Annotation.html#): * [`Selected`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Annotation.html#Syncfusion_UI_Xaml_Charts_Annotation_Selected) - Occurs when the annotation is selected. * [`UnSelected`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Annotation.html#Syncfusion_UI_Xaml_Charts_Annotation_UnSelected) - Occurs when annotation is deselected. @@ -1065,16 +882,16 @@ SfChart provides the following events in [`Annotation`](https://help.syncfusion. * [`DragDelta`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.StraightLineAnnotation.html#Syncfusion_UI_Xaml_Charts_StraightLineAnnotation_DragDelta) - Occurs when the drag takes place. * [`DragCompleted`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.StraightLineAnnotation.html#Syncfusion_UI_Xaml_Charts_StraightLineAnnotation_DragCompleted) - Occurs when the dragging is completed. You can cancel the dragging by using Cancel argument. * `DragEnter` - Occurs when the cursor is moved over the annotation for dragging. -* `DragLeave`- Occurs when the cursor leaves the annotation after dragging. +* `DragLeave` - Occurs when the cursor leaves the annotation after dragging. * [`MouseDown`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Annotation.html#Syncfusion_UI_Xaml_Charts_Annotation_MouseDown) - Occurs when any mouse button is pressed while the pointer is over the annotation. * [`MouseUp`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Annotation.html#Syncfusion_UI_Xaml_Charts_Annotation_MouseUp) - Occurs when any mouse button is released while the pointer is over the annotation. * [`MouseLeftButtonDown`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Annotation.html#Syncfusion_UI_Xaml_Charts_Annotation_MouseLeftButtonDown) - Occurs when the left mouse button is pressed while the mouse pointer is over the annotation. -* [`MouseRightButtonDown`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Annotation.html#Syncfusion_UI_Xaml_Charts_Annotation_MouseRightButtonDown)- Occurs when the right mouse button is pressed while the mouse pointer is over the annotation. +* [`MouseRightButtonDown`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Annotation.html#Syncfusion_UI_Xaml_Charts_Annotation_MouseRightButtonDown) - Occurs when the right mouse button is pressed while the mouse pointer is over the annotation. * [`MouseRightButtonUp`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Annotation.html#Syncfusion_UI_Xaml_Charts_Annotation_MouseRightButtonUp) - Occurs when the right mouse button is released while the mouse pointer is over the annotation. * [`MouseMove`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Annotation.html#Syncfusion_UI_Xaml_Charts_Annotation_MouseMove) - Occurs when the mouse pointer moves while over the annotation. * [`MouseLeave`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Annotation.html#Syncfusion_UI_Xaml_Charts_Annotation_MouseLeave) - Occurs when the mouse pointer leaves the bounds of the annotation. -N> You can refer to our [WPF Charts](https://www.syncfusion.com/wpf-controls/charts) feature tour page for its groundbreaking feature representations. You can also explore our [WPF Charts example](https://github.com/syncfusion/wpf-demos) to knows various chart types and how to easily configured with built-in support for creating stunning visual effects. +N> You can refer to our [WPF Charts](https://www.syncfusion.com/wpf-controls/charts) feature tour page for its groundbreaking feature representations. You can also explore our [WPF Charts example](https://github.com/syncfusion/wpf-demos) to know various chart types and how to easily configure them with built-in support for creating stunning visual effects. ## See also @@ -1086,4 +903,4 @@ N> You can refer to our [WPF Charts](https://www.syncfusion.com/wpf-controls/cha [`How to bind the ViewModel property to content template of a TextAnnotation`](https://support.syncfusion.com/kb/article/3009/how-to-bind-the-content-template-of-text-annotation-in-wpf-chart) -[`How to draw horizontal line in chart`](https://support.syncfusion.com/kb/article/3020/how-to-draw-horizontal-line-in-wpf-chart-sfchart) +[`How to draw horizontal line in chart`](https://support.syncfusion.com/kb/article/3020/how-to-draw-horizontal-line-in-wpf-chart-sfchart) \ No newline at end of file diff --git a/wpf/Charts/Appearance.md b/wpf/Charts/Appearance.md index ef95809757..c910e7c290 100644 --- a/wpf/Charts/Appearance.md +++ b/wpf/Charts/Appearance.md @@ -9,13 +9,13 @@ documentation: ug # Appearance in WPF Charts (SfChart) -SfChart supports various customizing and styling options that allows you to enrich the application. +SfChart supports various customizing and styling options that allow you to enrich your application. ## Palettes -SfChart provides options to apply different kinds of themes or palettes to your chart. You can define [`Palette`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartBase.html#Syncfusion_UI_Xaml_Charts_ChartBase_Palette) either for the entire chart or for an individual series. +SfChart provides options to apply different kinds of themes or palettes to your chart. You can define [`Palette`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartBase.html#Syncfusion_UI_Xaml_Charts_ChartBase_Palette) either for the entire chart or for an individual series. -We have some predefined palette such as +We have some predefined palettes such as: * Metro * AutumnBrights @@ -30,17 +30,17 @@ We have some predefined palette such as * LightCandy * SandyBeach -N> Elite, SandyBeach and LightCandy palettes are not supported in the bitmap series types. +N> Elite, SandyBeach, and LightCandy palettes are not supported in the bitmap series types. ### Applying Palette to Series -Each palette applies a set of predefined brushes to the series in a predefined order. The following code example shows you how to set the Metro Palette for the chart series. +Each palette applies a set of predefined brushes to the series in a predefined order. The following code example shows you how to set the Metro Palette for the chart series. {% tabs %} {% highlight xaml %} - + {% endhighlight %} @@ -54,8 +54,7 @@ chart.Palette = ChartColorPalette.Metro; ![WPF Chart Predefined Palettes](Styling-and-Customization_images/wpf-chart-predefined-palettes.png) - -The following code example defined Palette as [`BlueChrome`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartColorPalette.html). +The following code example defines Palette as [`BlueChrome`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartColorPalette.html). {% tabs %} @@ -75,35 +74,27 @@ chart.Palette = ChartColorPalette.BlueChrome; ![WPF Chart Predefined Palette as BlueChrome](Styling-and-Customization_images/wpf-chart-predefined-palette-as-bluechrome.png) - ### Applying Palette to Segment -Each palette applies a set of predefined brushes to the segment in a predefined order. The following code example shows you how to set the Metro Palette for the chart series. +Each palette applies a set of predefined brushes to the segment in a predefined order. The following code example shows you how to set the Metro Palette for the chart series. {% tabs %} {% highlight xaml %} + XBindingPath="Category" ItemsSource="{Binding Tax}" /> {% endhighlight %} {% highlight c# %} DoughnutSeries series = new DoughnutSeries() - { - ItemsSource = new ViewModel().Tax, - XBindingPath = "Category", - YBindingPath = "Percentage", - Palette = ChartColorPalette.Metro - }; chart.Series.Add(series); @@ -114,32 +105,25 @@ chart.Series.Add(series); ![WPF Chart Predefined Palette to Segment](Styling-and-Customization_images/wpf-chart-predefined-palette-to-segment.png) -The following code example defined Palette as **AutumnBrights**. +The following code example defines Palette as **AutumnBrights**. {% tabs %} {% highlight xaml %} - + {% endhighlight %} {% highlight c# %} DoughnutSeries series = new DoughnutSeries() - { - ItemsSource = new ViewModel().Tax, - XBindingPath = "Category", - YBindingPath = "Percentage", - Palette = ChartColorPalette.AutumnBrights - }; chart.Series.Add(series); @@ -150,37 +134,26 @@ chart.Series.Add(series); ![WPF Chart Predefined Palette as AutumnBrights](Styling-and-Customization_images/wpf-chart-predefined-palette-as-autumnbrights.png) - N> Metro palette is the default palette for both Series and Segment. ## Custom Palette -SfChart provides option which enables you to define your own color brushes with your preferred order for the Palette, using [`ColorModel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_ColorModel) as shown in the following code example. +SfChart provides an option which enables you to define your own color brushes with your preferred order for the Palette, using [`ColorModel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_ColorModel) as shown in the following code example. {% tabs %} {% highlight xaml %} - - - - - - - - - - - - - - - - - - + + + + + + + + + {% endhighlight %} @@ -188,24 +161,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, - XBindingPath = "Category", - YBindingPath = "Percentage", - Palette = ChartColorPalette.Custom, - ColorModel = colorModel - }; chart.Series.Add(series); @@ -216,7 +181,6 @@ chart.Series.Add(series); ![WPF Chart Custom Palette](Styling-and-Customization_images/wpf-chart-custom-palette.png) - You can define the custom palette for series as in the below code example: {% tabs %} @@ -224,25 +188,15 @@ You can define the custom palette for series as in the below code example: {% highlight xaml %} - - - - - - - - - - - - - - - - - - - + + + + + + + + + {% endhighlight %} @@ -252,11 +206,8 @@ You can define the custom palette for series as in the below code example: 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; @@ -267,12 +218,11 @@ chart.ColorModel = colorModel; ![WPF Chart Predefined Custom Palette](Styling-and-Customization_images/wpf-chart-predefined-custom-palette.png) - ## Gradient Colors Gradient colors for the chart series can be set by using the [`Interior`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_Interior) or [`ColorModel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_ColorModel) property of the chart series with the help of `LinearGradientBrush` or `RadialGradientBrush`. -The following code sample and screenshot illustrates how to apply the custom gradient colors for chart series using the [`ColorModel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_ColorModel) property. +The following code sample and screenshot illustrate how to apply the custom gradient colors for chart series using the [`ColorModel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_ColorModel) property. {% tabs %} @@ -282,7 +232,6 @@ The following code sample and screenshot illustrates how to apply the custom gra YBindingPath="YValue" ItemsSource="{Binding Data}" Palette="Custom"> - @@ -317,52 +266,36 @@ The following code sample and screenshot illustrates how to apply the custom gra SfChart chart = new SfChart(); -... +// ... ChartColorModel colorModel = new ChartColorModel(); LinearGradientBrush gradientColor1 = new LinearGradientBrush(); - GradientStop stop1 = new GradientStop() { Offset = 1, Color = Color.FromRgb(255, 231, 199) }; - 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) }; - 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, - XBindingPath = "Element", - YBindingPath = "YValue", - Palette = ChartColorPalette.Custom, - ColorModel = colorModel - }; chart.Series.Add(series); @@ -373,7 +306,7 @@ chart.Series.Add(series); ![WPF Gradient Color Chart Series](Styling-and-Customization_images/wpf-gradient-color-chart-series.png) -The following code sample and screenshot illustrates how to apply the gradient color using the [`Interior`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_Interior) property of series with `LinearGradientBrush`. +The following code sample and screenshot illustrate how to apply the gradient color using the [`Interior`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_Interior) property of series with `LinearGradientBrush`. {% tabs %} @@ -382,14 +315,12 @@ The following code sample and screenshot illustrates how to apply the gradient c - - {% endhighlight %} @@ -398,32 +329,22 @@ The following code sample and screenshot illustrates how to apply the gradient c SfChart chart = new SfChart(); -... +// ... LinearGradientBrush gradientColor = new LinearGradientBrush(); - GradientStop stop1 = new GradientStop() { Offset = 1, Color = Color.FromRgb(168, 234, 238) }; - 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, - XBindingPath = "Element", - YBindingPath = "YValue", - Interior = gradientColor, - }; chart.Series.Add(series); @@ -434,7 +355,6 @@ chart.Series.Add(series); ![WPF Chart Gradient Color](Styling-and-Customization_images/wpf-chart-gradient-color.png) - ## SegmentColorPath The color for the chart segments can be bound from its items source collection by using the [`SegmentColorPath`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_SegmentColorPath) property of series. The following code illustrates how to bind the color to the series with [`SegmentColorPath`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_SegmentColorPath) property. @@ -443,8 +363,7 @@ The color for the chart segments can be bound from its items source collection b {% highlight xaml %} - - + {% endhighlight %} @@ -452,11 +371,8 @@ The color for the chart segments can be bound from its items source collection b {% highlight c# %} ColumnSeries series = new ColumnSeries() - { - - SegmentColorPath = "SegmentColor" - + SegmentColorPath = "SegmentColor" }; {% endhighlight %} @@ -467,7 +383,6 @@ ColumnSeries series = new ColumnSeries() N> SegmentColorPath property is not applicable for Area, SplineArea, StepArea, RangeArea, FastLine, Candle, HiLoOpenClose, and CircularSeries (when the Polar and Radar DrawType is Area). - ## Customize Legends SfChart provides many options to customize the chart legends. Basically it is an ItemsControl. So, you can customize the ItemTemplate, ItemsPanel, etc. @@ -479,63 +394,34 @@ The following code example demonstrates applying the palette color to the legend {% highlight xaml %} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + {% endhighlight %} @@ -544,11 +430,8 @@ Text="{Binding Label}"> chart.Legend = new ChartLegend() { - - DockPosition = ChartDock.Left, - - ItemTemplate = chart.Resources["itemTemplate"] as DataTemplate - + DockPosition = ChartDock.Left, + ItemTemplate = chart.Resources["itemTemplate"] as DataTemplate }; {% endhighlight %} @@ -557,8 +440,8 @@ chart.Legend = new ChartLegend() ![WPF Chart Customizing Legends](Styling-and-Customization_images/wpf-chart-customizing-legends.png) +If you are having more number of items in the legend, you can override the ItemsPanel and add ScrollViewer. So that you can able to scroll the legend items. Please refer [this](https://www.syncfusion.com/kb/4846/how-to-add-multiple-legend-items-in-scroll-viewer-of-wpf-chart-sfchart) kb for more details. -If you are having more number of items in the legend, you can override the ItemsPanel and add ScrollViewer. So that you can able to scroll the legend items. Please refer [this](https://www.syncfusion.com/kb/4846/how-to-add-multiple-legend-items-in-scroll-viewer-of-wpf-chart-sfchart) kb for more details ## Customize ToolTip SfChart provides the option to define your own template for Tooltip. The following code example demonstrates the custom tooltip using the [`TooltipTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_TooltipTemplate) property. @@ -568,89 +451,47 @@ SfChart provides the option to define your own template for Tooltip. The followi {% highlight xaml %} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + chart:ChartTooltip.ShowDuration="5000" + XBindingPath="Category" YBindingPath="Value" + ShowTooltip="True" Palette="FloraHues"> + + + + + + + + + + + + + + + + + + + + + + {% endhighlight %} @@ -659,23 +500,15 @@ 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); - chart.Series.Add(series); {% endhighlight %} @@ -684,7 +517,7 @@ chart.Series.Add(series); ![WPF Chart Customizing ToolTip](Styling-and-Customization_images/wpf-chart-customizing-tooltip.png) -N> You can refer to our [WPF Charts](https://www.syncfusion.com/wpf-controls/charts) feature tour page for its groundbreaking feature representations. You can also explore our [WPF Charts example](https://github.com/syncfusion/wpf-demos) to knows various chart types and how to easily configured with built-in support for creating stunning visual effects. +N> You can refer to our [WPF Charts](https://www.syncfusion.com/wpf-controls/charts) feature tour page for its groundbreaking feature representations. You can also explore our [WPF Charts example](https://github.com/syncfusion/wpf-demos) to know various chart types and how to easily configure them with built-in support for creating stunning visual effects. ## See also @@ -696,5 +529,4 @@ N> You can refer to our [WPF Charts](https://www.syncfusion.com/wpf-controls/cha [`How to add custom color model to series`](https://www.syncfusion.com/kb/5480/how-to-add-custom-color-model-to-series) -[`How to define the fill color for each datapoint from ItemsSource`](https://www.syncfusion.com/kb/5124/how-to-define-the-fill-color-for-each-datapoint-from-itemssource) - +[`How to define the fill color for each datapoint from ItemsSource`](https://www.syncfusion.com/kb/5124/how-to-define-the-fill-color-for-each-datapoint-from-itemssource) \ No newline at end of file diff --git a/wpf/Charts/Area.md b/wpf/Charts/Area.md index 13ffacf66c..a9f586c323 100644 --- a/wpf/Charts/Area.md +++ b/wpf/Charts/Area.md @@ -9,7 +9,7 @@ documentation: ug # Area in WPF Charts (SfChart) -Chart area represents the entire chart and all its elements. It’s a virtual rectangular area that includes all the chart elements like axis, legends, series, etc. +Chart area represents the entire chart and all its elements. It's a virtual rectangular area that includes all the chart elements like axis, legends, series, etc. The following are the major properties of chart(SfChart): @@ -68,7 +68,7 @@ chart.AreaBorderThickness = new Thickness(3); ## Multiple Area -You can split plot area into multiple rows and columns using [`ChartRowDefinition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartBase.html#Syncfusion_UI_Xaml_Charts_ChartBase_RowDefinitions) and [`ChartColumnDefinition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartBase.html#Syncfusion_UI_Xaml_Charts_ChartBase_ColumnDefinitions) like Grid panel’s row and column definition. +You can split plot area into multiple rows and columns using [`ChartRowDefinition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartBase.html#Syncfusion_UI_Xaml_Charts_ChartBase_RowDefinitions) and [`ChartColumnDefinition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartBase.html#Syncfusion_UI_Xaml_Charts_ChartBase_ColumnDefinitions) like Grid panel's row and column definition. The following code example demonstrates, how you can create multiple panes in the chart area: @@ -218,7 +218,7 @@ chart.Series.Add(columnSeries2); ## Column Span and Row Span -These can be used to specify the number of column or rows up to which the axis can extend. Same like Grid’s RowSpan or ColumnSpan property, it is also an attached property. +These can be used to specify the number of column or rows up to which the axis can extend. Same like Grid's RowSpan or ColumnSpan property, it is also an attached property. You can set the row span in chart like the following code example. diff --git a/wpf/Charts/CodedUI.md b/wpf/Charts/CodedUI.md index 3d31692a86..dd2a3a03a8 100644 --- a/wpf/Charts/CodedUI.md +++ b/wpf/Charts/CodedUI.md @@ -9,193 +9,156 @@ documentation: ug # Coded UI in WPF Charts (SfChart) -Automated tests that drive your application through its user interface (UI) are known as **coded** **UI** **tests** (CUITs). These tests include functional testing of the UI controls. SfChart supports Coded UI automation that helps you create automated tests for inner elements and records the sequence of actions. While dragging the crosshair on UI elements, it shows the properties of the respective UI elements and you can also add assertion for each of the properties. +Automated tests that drive your application through its user interface (UI) are known as **coded UI tests** (CUITs). These tests include functional testing of the UI controls. SfChart supports Coded UI automation that helps you create automated tests for inner elements and records the sequence of actions. While dragging the crosshair on UI elements, it shows the properties of the respective UI elements and you can also add assertions for each of the properties. ## Levels - + + + - + + + - + + + - + + +
-Levels

 -Description

LevelsDescription
-Level 1

 -Record and Identify UI Elements when you perform mouse and keyboard actions.

Level 1Record and identify UI elements when you perform mouse and keyboard actions.
-Level 2

 -Provide Custom properties for UI Elements when you drag the crosshair on the UI Element.

Level 2Provide custom properties for UI elements when you drag the crosshair on the UI element.
-Level 3

 -CUIT generates code from recorded session. Create specialized class to access Custom Properties so the generate code is simplified.

Level 3CUIT generates code from recorded session. Create specialized class to access custom properties so the generated code is simplified.
## Requirements -Coded UI provides support only in, +Coded UI provides support only in: * Visual Studio Premium * Visual Studio Enterprise * Visual Studio Ultimate -For more info about the platforms and configurations refer [here](https://learn.microsoft.com/en-us/previous-versions/visualstudio/visual-studio-2015/test/supported-configurations-and-platforms-for-coded-ui-tests-and-action-recordings?view=vs-2015) +For more information about the supported platforms and configurations, refer to [this Microsoft documentation](https://learn.microsoft.com/en-us/previous-versions/visualstudio/visual-studio-2015/test/supported-configurations-and-platforms-for-coded-ui-tests-and-action-recordings?view=vs-2015). ## Configuration -To test SfChart with CUITs, build the Extension Project and place it in the mentioned location. You can get the Extension Project of SfChart from [`here`](https://www.syncfusion.com/downloads/support/directtrac/general/ze/CodedUI-1453395823.zip). +To test SfChart with CUITs, build the Extension Project and place it in the specified location. You can download the Extension Project for SfChart from [here](https://www.syncfusion.com/downloads/support/directtrac/general/ze/CodedUI-1453395823.zip). 1. Open the extension project and build it. -2. Get Syncfusion.SfChart.CUITExtension.WPF.dll from bin. +2. Get the Syncfusion.SfChart.CUITExtension.WPF.dll from the bin folder. -Place this assembly in below mentioned location, and install this assembly in GAC. +Place this assembly in the location mentioned below, and install it in the Global Assembly Cache (GAC). -The above assembly must be placed into the following directory based on your Visual Studio version. +The assembly must be placed into the following directory based on your Visual Studio version: For Visual Studio 2015: C:\Program Files (x86)\Common Files\Microsoft Shared\VSTT\14.0\UITestExtensionPackages -N> Syncfusion.SfChart.CUITExtension.WPF.dll need to be installed in GAC location. Please refer the MSDN link for_ [GAC](https://learn.microsoft.com/en-us/previous-versions/dotnet/netframework-2.0/ex0ss12c(v=vs.80)) _installation. +> Note: Syncfusion.SfChart.CUITExtension.WPF.dll needs to be installed in the GAC location. Please refer to the [Microsoft documentation on GAC installation](https://learn.microsoft.com/en-us/previous-versions/dotnet/netframework-2.0/ex0ss12c(v=vs.80)). ## Getting Started - ### Coded UI Project Creation -Run Visual Studio in administrator mode +Run Visual Studio in administrator mode. -Create a new Coded UI Test Project as shown in the following screenshot. +Create a new Coded UI Test Project as shown in the following screenshot: ![Coded UI support in WPF SfChart](CodedUI_images/CodedUI_img1.jpeg) - -After you create a new Coded UI project, a CUIT file is added automatically and the Generate Code dialog box appears. In this, choose Record actions, edit UI map or add assertions. +After you create a new Coded UI project, a CUIT file is added automatically and the Generate Code dialog box appears. Choose "Record actions, edit UI map or add assertions." ![Coded UI support in WPF SfChart](CodedUI_images/CodedUI_img2.jpeg) - -Now Coded UI project Visual Studio gets minimized and CodedUITestBuilder appears in the bottom right corner of your window. You can record the actions by clicking Start Recording in CodedUITestBuilder. +Now Visual Studio gets minimized and the CodedUITestBuilder appears in the bottom right corner of your window. You can record actions by clicking "Start Recording" in CodedUITestBuilder. ![Coded UI support in WPF SfChart](CodedUI_images/CodedUI_img3.jpeg) - -You can also open the CodedUITestBuilder from existing Coded UI project by right clicking on the CodedUITestMethod1 in CUIT file and clicking the Generate Code for Coded UI Test. +You can also open the CodedUITestBuilder from an existing Coded UI project by right-clicking on the CodedUITestMethod1 in the CUIT file and clicking "Generate Code for Coded UI Test." ![Coded UI support in WPF SfChart](CodedUI_images/CodedUI_img4.jpeg) +### Record and Generate Code -### Record and Generate code - -If you create a Coded UI Test project, UIMap – CodedUITestBuilder shown at bottom right corner. +If you create a Coded UI Test project, UIMap – CodedUITestBuilder is shown at the bottom right corner. Now you can record and perform actions in your application. -CodedUITestBuilder identify each actions and gives a tooltip message like below, +CodedUITestBuilder identifies each action and displays a tooltip message like this: ![Coded UI support in WPF SfChart](CodedUI_images/CodedUI_img5.jpeg) - -If you recorded by mistake, you can choose recorded steps to delete. +If you recorded by mistake, you can select recorded steps to delete. ![Coded UI support in WPF SfChart](CodedUI_images/CodedUI_img6.jpeg) -Once the record is completed, click the GenerateCode icon in CodedUITestBuilder for generate a test method. Then close the CodedUITestBuilder and you can see the generated code action as follows. +Once the recording is completed, click the `Generate Code` icon in CodedUITestBuilder to generate a test method. Then close the CodedUITestBuilder, and you can see the generated code action as follows: {% highlight c# %} - - - public void RecordedMethod1() - - { - - #region Variable Declarations - - WpfSfChart uISfChartCustom = this.UICUITestSampleDemoWindow.UISfChartCustom; - - WpfChartSeries uIColumnSeriesCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UIColumnSeriesCustom; - - WpfLegend uIChartLegendCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UIChartLegendCustom; - - WpfChartAxis uINumericalAxisCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UINumericalAxisCustom; - - WpfChartAxis uICategoryAxisCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UICategoryAxisCustom; - - WpfZoomingBehavior uIZoomInCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UIZoomInCustom; - - WpfZoomingBehavior uIZoomOutCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UIZoomOutCustom; - - WpfZoomingBehavior uIZoomResetCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UIZoomResetCustom; - - WpfZoomingBehavior uIZoomPanCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UIZoomPanCustom; - - WpfZoomingBehavior uISelectionZoomCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UISelectionZoomCustom; - - #endregion - - } - +public void RecordedMethod1() +{ + #region Variable Declarations + WpfSfChart uISfChartCustom = this.UICUITestSampleDemoWindow.UISfChartCustom; + WpfChartSeries uIColumnSeriesCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UIColumnSeriesCustom; + WpfLegend uIChartLegendCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UIChartLegendCustom; + WpfChartAxis uINumericalAxisCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UINumericalAxisCustom; + WpfChartAxis uICategoryAxisCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UICategoryAxisCustom; + WpfZoomingBehavior uIZoomInCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UIZoomInCustom; + WpfZoomingBehavior uIZoomOutCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UIZoomOutCustom; + WpfZoomingBehavior uIZoomResetCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UIZoomResetCustom; + WpfZoomingBehavior uIZoomPanCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UIZoomPanCustom; + WpfZoomingBehavior uISelectionZoomCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UISelectionZoomCustom; + #endregion +} {% endhighlight %} - ### Add Assertion -You can also create an assertion to check the modified chart/series properties value. Drag the crosshair to the chart series, and the Assertion window appears. +You can also create an assertion to check the modified chart/series property values. Drag the crosshair to the chart series, and the Assertion window will appear. ![Coded UI support in WPF SfChart](CodedUI_images/CodedUI_img7.jpeg) -The series properties for control is now listed in the Assertion dialog box. You can add assertion by clicking the Generate Code button in CodedUITestBuilder. +The series properties for the control are now listed in the Assertion dialog box. You can add an assertion by clicking the Generate Code button in CodedUITestBuilder. ![Coded UI support in WPF SfChart](CodedUI_images/CodedUI_img8.jpeg) -Validate assertion property by using comparators. Also we can add assertion failure message. +Validate assertion properties by using comparators. You can also add an assertion failure message. ![Coded UI support in WPF SfChart](CodedUI_images/CodedUI_img9.jpeg) - -Another way for adding assertion by clicking the cross hair icon in CodedUITestBuilder, here list out all identified controls and select the control we want to validate. +Another way to add an assertion is by clicking the crosshair icon in CodedUITestBuilder. This lists all identified controls, allowing you to select the control you want to validate. ![Coded UI support in WPF SfChart](CodedUI_images/CodedUI_img10.jpeg) - -Click Generate code icon to generate assertion code then close the builder if validation is finish. +Click the Generate Code icon to generate assertion code, then close the builder when validation is finished. {% 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, "Segments Count Mismatched..."); } - {% endhighlight %} ## Run Tests -After all tests and assertion are created, right-click on the Test method and click Run Tests to run the test as follows. +After all tests and assertions are created, right-click on the Test method and click Run Tests to run the test as follows. ![Coded UI support in WPF SfChart](CodedUI_images/CodedUI_img11.jpeg) - -Open the test explorer and check test was passed or failed. +Open the test explorer and check if the test passed or failed. ![Coded UI support in WPF SfChart](CodedUI_images/CodedUI_img12.jpeg) - ## Tables of Properties -The following properties are for each of the UI elements in SfChart, +The following properties are available for each of the UI elements in SfChart: @@ -228,5 +191,4 @@ Legend Item

IconVisibility, CheckBoxVisibility, VisibilityOnLegend, IsSeriesVisible, Label, IconWidth, IconHeight, ItemMargin.

- -N> You can refer to our [WPF Charts](https://www.syncfusion.com/wpf-controls/charts) feature tour page for its groundbreaking feature representations. You can also explore our [WPF Charts example](https://github.com/syncfusion/wpf-demos) to knows various chart types and how to easily configured with built-in support for creating stunning visual effects. \ No newline at end of file +> You can refer to our [WPF Charts](https://www.syncfusion.com/wpf-controls/charts) feature tour page for its groundbreaking feature representations. You can also explore our [WPF Charts example](https://github.com/syncfusion/wpf-demos) to learn about various chart types and how to easily configure them with built-in support for creating stunning visual effects. \ No newline at end of file diff --git a/wpf/Charts/DataBinding.md b/wpf/Charts/DataBinding.md index 4584089244..3fb07c37e4 100644 --- a/wpf/Charts/DataBinding.md +++ b/wpf/Charts/DataBinding.md @@ -15,22 +15,14 @@ SfChart offers ItemsSource property to bind various datasource ranges from simpl {% tabs %} - {% highlight xaml %} - - - - - - - + + + {% endhighlight %} @@ -41,99 +33,59 @@ SfChart chart = new SfChart(); LineSeries lineSeries = new LineSeries() { - - ItemsSource = new ViewModel().Demands, - - XBindingPath = "Demand", - - YBindingPath = "Year2010", - + 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 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 - - { - - 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; } - + public MainPage() + { + 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; + } + + public ObservableCollection Demands { get; set; } } {% endhighlight %} {% endtabs %} - ### Binding complex property to the chart -The complex property binding feature enables you to access nested object reference property values to render the chart segment.  +The complex property binding feature enables you to access nested object reference property values to render the chart segment. {% tabs %} {% highlight xaml %} -  + {% endhighlight %} @@ -143,49 +95,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)) - + 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 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 string CupName { get; set; } } public class DataPointWithMulData - { - - public string Name { get; set; } - - public StadiumDetails StadiumObject { get; set; } - + public string Name { get; set; } + public StadiumDetails StadiumObject { get; set; } } {% endhighlight %} @@ -203,92 +137,50 @@ 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 string[] Brand { get; set; } + public double[] Count { get; set; } } -public class ViewModel - +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 } }); - - } - - public ObservableCollection Brands { get; set; } - + 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 } }); + } + + public ObservableCollection Brands { get; set; } } -private void CreateChart() - +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); - + 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 +191,9 @@ You can notify the [`XBindingPath`](https://help.syncfusion.com/cr/wpf/Syncfusio {% highlight xaml %} - - + {% endhighlight %} @@ -313,23 +202,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, - + Label = "Coal", + ListenPropertyChange = true, Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0XBC)) - }; chart.Series.Add(series); @@ -366,4 +246,4 @@ N> You can refer to our [WPF Charts](https://www.syncfusion.com/wpf-controls/cha [`How to generate dynamic number of series based on common items source`](https://support.syncfusion.com/kb/article/6858/how-to-generate-dynamic-number-of-series-based-on-common-items-source-in-wpf-chart-sfchart) -[`How to manage the empty values (NaN) in Chart`](https://support.syncfusion.com/kb/article/3088/how-to-manage-the-empty-values-in-wpf-chart-sfchart) +[`How to manage the empty values (NaN) in Chart`](https://support.syncfusion.com/kb/article/3088/how-to-manage-the-empty-values-in-wpf-chart-sfchart) \ No newline at end of file diff --git a/wpf/Charts/Exporting.md b/wpf/Charts/Exporting.md index f6f7652e95..5e26fcd4b8 100644 --- a/wpf/Charts/Exporting.md +++ b/wpf/Charts/Exporting.md @@ -28,9 +28,9 @@ Chart contains the following overloading methods for saving a chart as an image. ### Save(string filename) -This method will export chart to the specified location with the given name. By default, i.e., if you didn’t mention any specific location. It will be exported to “../bin/debug” location. +This method will export chart to the specified location with the given name. By default, i.e., if you don't mention any specific location, it will be exported to the "../bin/debug" location. -The following code examples illustrates the usage of this method: +The following code example illustrates the usage of this method: {% highlight C# %} @@ -38,16 +38,16 @@ private void SaveImage_Click(object sender, RoutedEventArgs e) { this.SampleChart.Save("ExportedChart"); //Save in Debug location - this.SampleChart.Save("D:\\Pictures\\Test\\ExportedChart"); //Save in ‘D:\Picture\Test’ location. + this.SampleChart.Save("D:\\Pictures\\Test\\ExportedChart"); //Save in 'D:\Pictures\Test' location. } {% endhighlight %} -T> We can change the image formats in above code by changing its extension as .jpg, .tiff, etc. +T> You can change the image formats in the above code by changing its extension as .jpg, .tiff, etc. ### Save(Stream stream, BitmapEncoder imgEncoderID) -This helps to export the chart to any stream as in below code example. +This helps to export the chart to any stream as shown in the below code example. {% highlight C# %} @@ -55,18 +55,14 @@ 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,7 +85,6 @@ static IntPtr ApplicationMessageFilter(IntPtr hwnd, int message, IntPtr wParam, return IntPtr.Zero; } - HwndSourceParameters sourceParameters = new HwndSourceParameters(); sourceParameters.HwndSourceHook = ApplicationMessageFilter; @@ -101,9 +96,9 @@ source.RootVisual = chart; //Save chart chart.Save("Chart.png"); -{% endhighlight %} +{% endhighlight %} -N> You can refer to our [WPF Charts](https://www.syncfusion.com/wpf-controls/charts) feature tour page for its groundbreaking feature representations. You can also explore our [WPF Charts example](https://github.com/syncfusion/wpf-demos) to knows various chart types and how to easily configured with built-in support for creating stunning visual effects. +N> You can refer to our [WPF Charts](https://www.syncfusion.com/wpf-controls/charts) feature tour page for its groundbreaking feature representations. You can also explore our [WPF Charts example](https://github.com/syncfusion/wpf-demos) to know various chart types and how to easily configure them with built-in support for creating stunning visual effects. ## See also @@ -111,4 +106,4 @@ N> You can refer to our [WPF Charts](https://www.syncfusion.com/wpf-controls/cha [`How to print the chart`](https://help.syncfusion.com/wpf/charts/printing) -[`How to read image byte while rendering chart`](https://www.syncfusion.com/kb/2584/how-to-read-image-byte-while-rendering-chart) +[`How to read image byte while rendering chart`](https://www.syncfusion.com/kb/2584/how-to-read-image-byte-while-rendering-chart) \ No newline at end of file diff --git a/wpf/Charts/FastChart/Fast-BitmapSeries.md b/wpf/Charts/FastChart/Fast-BitmapSeries.md index f365f83fd8..867cb42e59 100644 --- a/wpf/Charts/FastChart/Fast-BitmapSeries.md +++ b/wpf/Charts/FastChart/Fast-BitmapSeries.md @@ -9,128 +9,96 @@ documentation: ug # Fast Bitmap Series in WPF Charts (SfChart) -A fast bitmap chart displays a series of segments rendered using WritableBitmap. +A fast bitmap chart displays a series of segments rendered using WritableBitmap for high-performance visualization. ## Fast Line Bitmap -[`FastLineBitmapSeries`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.FastLineBitmapSeries.html#) displays a series of line segments rendered using WritableBitmap. The advantage of FastLineBitmapSeries renders a million data point in a fraction of seconds. +[`FastLineBitmapSeries`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.FastLineBitmapSeries.html#) displays a series of line segments rendered using WritableBitmap. The advantage of FastLineBitmapSeries is that it can render millions of data points in a fraction of seconds. The following code example shows how to use the fast line bitmap series: {% tabs %} {% highlight xaml %} - - - + {% endhighlight %} {% highlight c# %} - FastLineBitmapSeries series = new FastLineBitmapSeries() { - ItemsSource = new ViewModel().Data, - XBindingPath = "Date", - YBindingPath = "Value", - Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0x7F)) - }; chart.Series.Add(series); - {% endhighlight %} {% endtabs %} ![WPF FastLineBitmap Chart Type](FastChart_Images/wpf-fastlinebitmap-chart-type.png) -Like FastLineSeries, this bitmap series is also having line properties. +Like FastLineSeries, this bitmap series also has line properties. -N> As it was rendered using bitmap, there might be some jagged lines at edges. This is can be reduced using [`EnableAntiAliasing`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.FastLineBitmapSeries.html#Syncfusion_UI_Xaml_Charts_FastLineBitmapSeries_EnableAntiAliasing) property. +N> As it is rendered using bitmap, there might be some jagged lines at edges. This can be reduced using the [`EnableAntiAliasing`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.FastLineBitmapSeries.html#Syncfusion_UI_Xaml_Charts_FastLineBitmapSeries_EnableAntiAliasing) property. {% tabs %} {% highlight xaml %} - - + XBindingPath="Date" + Interior="#7F7F7F" + StrokeDashArray="5,5" + YBindingPath="Value" + EnableAntiAliasing="True"/> {% endhighlight %} {% highlight c# %} - FastLineBitmapSeries series = new FastLineBitmapSeries() { - ItemsSource = new ViewModel().Data, - XBindingPath = "Date", - YBindingPath = "Value", - - EnableAntiAliasing =true, - - StrokeDashArray =new DoubleCollection() { 5,5}, - + EnableAntiAliasing = true, + StrokeDashArray = new DoubleCollection() { 5, 5 }, Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0x7F)) - }; chart.Series.Add(series); - {% endhighlight %} {% endtabs %} ![WPF AntiAliasing support for FastLine Chart](FastChart_Images/wpf-anti-aliasing-support-for-fastline-chart.png) - ## Fast Column Bitmap -[`FastColumnBitmapSeries`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.FastColumnBitmapSeries.html#) is used to boost up the performance of the ColumnSeries. +[`FastColumnBitmapSeries`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.FastColumnBitmapSeries.html#) is used to boost the performance of the ColumnSeries. {% tabs %} {% highlight xaml %} - - + ItemsSource="{Binding List}" + XBindingPath="Date" + YBindingPath="Price" /> {% endhighlight %} {% highlight c# %} - FastColumnBitmapSeries series = new FastColumnBitmapSeries() { - ItemsSource = new ViewModel().List, - XBindingPath = "Date", - YBindingPath = "Value", - Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0x7F)) - }; chart.Series.Add(series); - {% endhighlight %} {% endtabs %} @@ -139,127 +107,98 @@ chart.Series.Add(series); ## Fast Bar Bitmap -[`FastBarBitmapSeries`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.FastBarBitmapSeries.html) is used to boost up the performance of the series. +[`FastBarBitmapSeries`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.FastBarBitmapSeries.html) is used to boost the performance of the BarSeries. {% tabs %} {% highlight xaml %} - - - + {% endhighlight %} {% highlight c# %} - FastBarBitmapSeries series = new FastBarBitmapSeries() { - ItemsSource = new ViewModel().List, - XBindingPath = "Date", - YBindingPath = "Value", - Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0x7F)) - }; chart.Series.Add(series); - {% endhighlight %} {% endtabs %} ![WPF FastBarBitmap Chart Type](FastChart_Images/wpf-fastbarbitmap-chart-type.png) - ## Fast Candle Bitmap -[`FastCandleBitmapSeries`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.FastCandleBitmapSeries.html) renders using bitmap and it displays each data point as a combination of a vertical column and a vertical line, like CandleSeries. +[`FastCandleBitmapSeries`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.FastCandleBitmapSeries.html) renders using bitmap and displays each data point as a combination of a vertical column and a vertical line, similar to CandleSeries. {% tabs %} {% highlight xaml %} - - + XBindingPath="X" + High="Y" + Low="Y1" + Open="Y2" + Close="Y3" + BullFillColor="#BCBCBC" + BearFillColor="#4A4A4A" /> {% endhighlight %} {% highlight c# %} - FastCandleBitmapSeries series = new FastCandleBitmapSeries() { - 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)) - }; chart.Series.Add(series); - {% endhighlight %} {% endtabs %} ![WPF FastCandleBitmap Chart Type](FastChart_Images/wpf-fastcandlebitmap-chart-type.png) - ## Fast HiLo Bitmap -[`FastHiLoBitmapSeries`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.FastHiLoBitmapSeries.html#) represents a series of line segments with high and low values rendered using WritableBitmap. +[`FastHiLoBitmapSeries`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.FastHiLoBitmapSeries.html#) represents a series of line segments with high and low values rendered using WritableBitmap. {% tabs %} {% highlight xaml %} - - - + {% endhighlight %} {% highlight C# %} - FastHiLoBitmapSeries series = new FastHiLoBitmapSeries() { - ItemsSource = new ViewModel().List, - XBindingPath = "Date", - - High = "Stock",Low = "Price", - + High = "Stock", + Low = "Price", Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0X7F)), - StrokeThickness = 5 - }; chart.Series.Add(series); - {% endhighlight %} {% endtabs %} @@ -268,43 +207,35 @@ chart.Series.Add(series); ## Fast OHLC Bitmap -[`FastHiLoOpenCloseBitmapSeries`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.FastHiLoOpenCloseBitmapSeries.html#) are rendered using WritableBitmap like other bitmap series. The following code example illustrates the use of OHLC bitmap series. +[`FastHiLoOpenCloseBitmapSeries`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.FastHiLoOpenCloseBitmapSeries.html#) are rendered using WritableBitmap like other bitmap series. The following code example illustrates the use of OHLC bitmap series: {% tabs %} {% highlight xaml %} - - + XBindingPath="X" + High="Y" + Low="Y1" + Open="Y2" + Close="Y3" + BullFillColor="#7F7F7F" + BearFillColor="#4A4A4A"/> {% endhighlight %} {% highlight c# %} - 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)) - }; chart.Series.Add(series); - {% endhighlight %} {% endtabs %} @@ -313,215 +244,151 @@ chart.Series.Add(series); ## Fast Scatter Bitmap -[`FastScatterBitmapSeries`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.FastScatterBitmapSeries.html#) used to render high number scatter points. The [`ScatterHeight`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.FastScatterBitmapSeries.html#Syncfusion_UI_Xaml_Charts_FastScatterBitmapSeries_ScatterHeight) and [`ScatterWidth`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.FastScatterBitmapSeries.html#Syncfusion_UI_Xaml_Charts_FastScatterBitmapSeries_ScatterWidth) also available as in ScatterSeries. [`ShapeType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.FastScatterBitmapSeries.html#Syncfusion_UI_Xaml_Charts_FastScatterBitmapSeries_ShapeType) is used to change the rendering shape of fast scatter bitmap series. The available shapes are [`Cross`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSymbol.html), [`Diamond`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSymbol.html), [`Ellipse`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSymbol.html), [`Hexagon`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSymbol.html), [`InvertedTriangle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSymbol.html), [`Pentagon`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSymbol.html), [`Plus`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSymbol.html), [`Rectangle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSymbol.html) and [`Triangle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSymbol.html). +[`FastScatterBitmapSeries`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.FastScatterBitmapSeries.html#) is used to render a high number of scatter points. The [`ScatterHeight`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.FastScatterBitmapSeries.html#Syncfusion_UI_Xaml_Charts_FastScatterBitmapSeries_ScatterHeight) and [`ScatterWidth`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.FastScatterBitmapSeries.html#Syncfusion_UI_Xaml_Charts_FastScatterBitmapSeries_ScatterWidth) properties are also available as in ScatterSeries. [`ShapeType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.FastScatterBitmapSeries.html#Syncfusion_UI_Xaml_Charts_FastScatterBitmapSeries_ShapeType) is used to change the rendering shape of fast scatter bitmap series. The available shapes are [`Cross`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSymbol.html), [`Diamond`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSymbol.html), [`Ellipse`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSymbol.html), [`Hexagon`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSymbol.html), [`InvertedTriangle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSymbol.html), [`Pentagon`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSymbol.html), [`Plus`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSymbol.html), [`Rectangle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSymbol.html) and [`Triangle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSymbol.html). {% tabs %} {% highlight xaml %} - - + ItemsSource="{Binding Data}" + x:Name="FastScatterSeries" + XBindingPath="Date" + YBindingPath="Value" + ScatterHeight="4" + ScatterWidth="4"/> {% endhighlight %} {% highlight C# %} - 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); - {% endhighlight %} {% endtabs %} ![WPF FastScatterBitmap Chart Type](FastChart_Images/wpf-fastscatterbitmap-chart-type.png) - ## Fast Step Line Bitmap -[`FastStepLineBitmapSeries`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.FastStepLineBitmapSeries.html#) is the high performance version of StepLineSeries. +[`FastStepLineBitmapSeries`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.FastStepLineBitmapSeries.html#) is the high-performance version of StepLineSeries. {% tabs %} {% highlight xaml %} - - + XBindingPath="Date" + YBindingPath="Value" + Interior="#4A4A4A" /> {% endhighlight %} {% highlight c# %} - FastStepLineBitmapSeries series = new FastStepLineBitmapSeries() { - ItemsSource = new ViewModel().Data, - XBindingPath = "Date", - YBindingPath = "Value", - Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0X4A)) - }; chart.Series.Add(series); - {% endhighlight %} {% endtabs %} ![WPF FastStepLineBitmap Chart Type](FastChart_Images/wpf-faststepline-bitmap-chart-type.png) -The anti aliasing mode can be enabled using [`EnableAntiAliasing`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.FastStepLineBitmapSeries.html#Syncfusion_UI_Xaml_Charts_FastStepLineBitmapSeries_EnableAntiAliasing) property of FastStepLineBitmapSeries as in below code snippet: +The anti-aliasing mode can be enabled using the [`EnableAntiAliasing`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.FastStepLineBitmapSeries.html#Syncfusion_UI_Xaml_Charts_FastStepLineBitmapSeries_EnableAntiAliasing) property of FastStepLineBitmapSeries as shown in the code snippet below: {% tabs %} {% highlight xaml %} - - - + {% endhighlight %} {% highlight c# %} - FastStepLineBitmapSeries series = new FastStepLineBitmapSeries() { - ItemsSource = new ViewModel().Data, - XBindingPath = "Date", - YBindingPath = "Value", - - EnableAntiAliasing = true , - + EnableAntiAliasing = true, Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0X4A)) - }; chart.Series.Add(series); - {% endhighlight %} {% endtabs %} ![WPF AntiAliasing support for FastStepLineBitmap Chart Type](FastChart_Images/wpf-antialiasing-support-for-faststeplinebitmap-chart-type.png) - ## Fast Range Area -[`FastRangeAreaBitmapSeries`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.FastRangeAreaBitmapSeries.html#) is the high performance version of RangeAreaSeries. +[`FastRangeAreaBitmapSeries`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.FastRangeAreaBitmapSeries.html#) is the high-performance version of RangeAreaSeries. {% tabs %} {% 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); - {% endhighlight %} {% endtabs %} ![WPF Chart Fast Range Area Bitmap Series](FastChart_Images/wpf-chart-fast-range-area-bitmap-series.png) -The anti-aliasing mode can be enabled using [`EnableAntiAliasing`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.FastRangeAreaBitmapSeries.html#Syncfusion_UI_Xaml_Charts_FastRangeAreaBitmapSeries_EnableAntiAliasing) property of FastRangeAreaBitmapSeries as in below code snippet: +The anti-aliasing mode can be enabled using the [`EnableAntiAliasing`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.FastRangeAreaBitmapSeries.html#Syncfusion_UI_Xaml_Charts_FastRangeAreaBitmapSeries_EnableAntiAliasing) property of FastRangeAreaBitmapSeries as shown in the code snippet below: {% tabs %} {% highlight xaml %} - - - + {% endhighlight %} {% highlight c# %} - 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 %} {% endtabs %} -![WPF Chart Fast Range Area Bitmap Series With Anit-Aliasing](FastChart_Images/wpf-chart-fast-range-area-bitmap-with-anti-aliasing.png) +![WPF Chart Fast Range Area Bitmap Series With Anti-Aliasing](FastChart_Images/wpf-chart-fast-range-area-bitmap-with-anti-aliasing.png) \ No newline at end of file diff --git a/wpf/Charts/FastChart/Fast-Series.md b/wpf/Charts/FastChart/Fast-Series.md index 4df7396840..66b7787827 100644 --- a/wpf/Charts/FastChart/Fast-Series.md +++ b/wpf/Charts/FastChart/Fast-Series.md @@ -1,7 +1,7 @@ --- layout: post title: Fast Series in WPF Charts control | Syncfusion -description: Learn here all about Fast Series support in Syncfusion® WPF Charts (SfChart) control, its elements and more details. +description: Learn here all about Fast Series support in Syncfusion WPF Charts (SfChart) control, its elements and more details. platform: wpf control: SfChart documentation: ug @@ -9,21 +9,21 @@ documentation: ug # Fast Series in WPF Charts (SfChart) -A fast series is a special kind of line chart that can render a collection with a huge number of data points. Fast series is rendered using a polyline segment. +A fast series is a special kind of chart that can render a collection with a huge number of data points. Fast series is rendered using a polyline segment, providing better performance for large datasets. ## Fast Line -The [`FastLineSeries`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.FastLineSeries.html?tabs=tabid-1) is a special kind of line series that can render a collection with a huge number of datapoints. FastLine is rendered using polyline segment. +The [`FastLineSeries`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.FastLineSeries.html?tabs=tabid-1) is a special kind of line series that can render a collection with a huge number of data points. FastLine is rendered using polyline segment. {% tabs %} {% highlight xaml %} - + {% endhighlight %} @@ -31,15 +31,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); @@ -60,19 +55,17 @@ The following line properties are available for FastLineSeries: ## Fast Stacking Column -[`FastStackingColumnBitmapSeries`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.FastStackingColumnBitmapSeries.html) similar to StackingColumnSeries except that it loads faster and provides better performance. +[`FastStackingColumnBitmapSeries`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.FastStackingColumnBitmapSeries.html) is similar to StackingColumnSeries except that it loads faster and provides better performance. {% tabs %} {% highlight xaml %} + ItemsSource="{Binding MedalDetails}" + XBindingPath="CountryName" + YBindingPath="GoldMedals" + Interior="#4A4A4A" /> {% endhighlight %} @@ -80,15 +73,10 @@ Interior="#4A4A4A" /> FastStackingColumnBitmapSeries series = new FastStackingColumnBitmapSeries() { - ItemsSource = new ViewModel().MedalDetails, - XBindingPath = "CountryName", - YBindingPath = "GoldMedals", - - Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0X4A)) - + Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A)) }; chart.Series.Add(series); @@ -97,4 +85,4 @@ chart.Series.Add(series); {% endtabs %} -![ WPF FastStackingColumnBitmap Chart Type](FastChart_Images/wpf-faststackingcolumnbitmap-chart-type.png) +![WPF FastStackingColumnBitmap Chart Type](FastChart_Images/wpf-faststackingcolumnbitmap-chart-type.png) \ No newline at end of file diff --git a/wpf/Charts/FastChart/FastCharts.md b/wpf/Charts/FastChart/FastCharts.md index a4134ffece..4d1dd5c26d 100644 --- a/wpf/Charts/FastChart/FastCharts.md +++ b/wpf/Charts/FastChart/FastCharts.md @@ -1,18 +1,20 @@ --- layout: post title: Fast Chart in WPF Charts control | Syncfusion -description: Learn here all about Fast Chart support in Syncfusion® WPF Charts (SfChart) control, its elements and more details. +description: Learn here all about Fast Chart support in Syncfusion WPF Charts (SfChart) control, its elements and more details. platform: wpf control: SfChart documentation: ug --- -# Fast in WPF Charts (SfChart) +# Fast Charts in WPF Charts (SfChart) -SfChart includes functionality for fast-plotting more than 10 fast chart types. Each chart type is easily configurable with built-in support for creating stunning visual effects. +SfChart includes functionality for fast-plotting more than 10 chart types. Each chart type is easily configurable with built-in support for creating stunning visual effects. -* Fast Series - Segments of the series is rendered using a polyline segment. -* Fast Bitmap Series - Segments of the series is rendered using WritableBitmap. +SfChart provides two types of fast rendering options: +* **Fast Series** - Segments of the series are rendered using polyline segments. +* **Fast Bitmap Series** - Segments of the series are rendered using WritableBitmap. -N> You can refer to our [WPF Charts](https://www.syncfusion.com/wpf-controls/charts) feature tour page for its groundbreaking feature representations. You can also explore our [WPF Charts example](https://github.com/syncfusion/wpf-demos) to knows various chart types and how to easily configured with built-in support for creating stunning visual effects. \ No newline at end of file + +N> You can refer to our [WPF Charts](https://www.syncfusion.com/wpf-controls/charts) feature tour page for its groundbreaking feature representations. You can also explore our [WPF Charts examples](https://github.com/syncfusion/wpf-demos) to learn about various chart types and how to easily configure them with built-in support for creating stunning visual effects. \ No newline at end of file diff --git a/wpf/Charts/Getting-Started.md b/wpf/Charts/Getting-Started.md index 2370468447..fbf10e416e 100644 --- a/wpf/Charts/Getting-Started.md +++ b/wpf/Charts/Getting-Started.md @@ -9,9 +9,9 @@ documentation: ug # Getting Started with WPF Charts (SfChart) -This section explains you the steps required to populate the Chart with data, header, add data labels, legend and tooltips to the Chart. This section covers only the minimal features that you need to learn to get started with the Chart. +This section explains the steps required to populate the Chart with data, header, add data labels, legend and tooltips to the Chart. This section covers only the minimal features that you need to learn to get started with the Chart. -To get start quickly with [WPF Chart](https://www.syncfusion.com/wpf-controls/charts), you can check this video: +To get started quickly with [WPF Chart](https://www.syncfusion.com/wpf-controls/charts), you can check this video: @@ -96,7 +96,7 @@ Run the project and check if you get following output to make sure you have conf ![WPF Chart](Getting-Started_images/wpf-chart.png) -N> [`SfChart`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfChart.html) supports default axes, so that these axes ([`PrimaryAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfChart.html#Syncfusion_UI_Xaml_Charts_SfChart_PrimaryAxis) and [`SecondaryAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfChart.html#Syncfusion_UI_Xaml_Charts_SfChart_SecondaryAxis)) will get generated automatically based upon the data bind to the chart, if you didn’t specify the axes explicitly. +N> [`SfChart`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfChart.html) supports default axes, so that these axes ([`PrimaryAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfChart.html#Syncfusion_UI_Xaml_Charts_SfChart_PrimaryAxis) and [`SecondaryAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfChart.html#Syncfusion_UI_Xaml_Charts_SfChart_SecondaryAxis)) will get generated automatically based upon the data bind to the chart, if you didn't specify the axes explicitly. ## Initialize view model @@ -241,8 +241,8 @@ N> You need to set [`XBindingPath`](https://help.syncfusion.com/cr/wpf/Syncfusio - - + + @@ -253,26 +253,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,30 +278,22 @@ 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 Dim series As New ColumnSeries() - -series.ItemsSource = New ViewModel().Demands +series.ItemsSource = New ViewModel().Data series.XBindingPath = "Name" series.YBindingPath = "Height" 'Adding Series to the Chart Series Collection - chart.Series.Add(series) {% endhighlight %} @@ -328,15 +311,13 @@ The header of the chart acts as the title to provide quick information to the us {% highlight xaml %} - - {% endhighlight %} -{% highlight C# %}  +{% highlight C# %} chart.Header = "Chart"; @@ -352,7 +333,6 @@ chart.Header = "Chart" Refer to [`this`](https://help.syncfusion.com/wpf/charts/header) link to learn more about the options available in [`SfChart`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfChart.html) to customize chart header. - ## Enable data labels You can add data labels to improve the readability of the chart and it can be enabled using [`AdornmentInfo`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.AdornmentSeries.html#Syncfusion_UI_Xaml_Charts_AdornmentSeries_AdornmentsInfo) property of [`ChartSeries`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeries.html). By default, there is no label displayed, you have to set [`ShowLabel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_ShowLabel) property of [`ChartAdornmentInfo`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfo.html) to True. @@ -362,28 +342,24 @@ You can add data labels to improve the readability of the chart and it can be en {% highlight xaml %} - - ... - - - - - - - - ... - + + + + + + + {% endhighlight %} -{% highlight C# %}  +{% highlight C# %} -series.AdornmentsInfo = new ChartAdornmentInfo (){ ShowLabel = true }; +series.AdornmentsInfo = new ChartAdornmentInfo(){ ShowLabel = true }; {% endhighlight %} -{% highlight VB %}  +{% highlight VB %} series.AdornmentsInfo = New ChartAdornmentInfo() With {.ShowLabel = True} @@ -391,7 +367,7 @@ series.AdornmentsInfo = New ChartAdornmentInfo() With {.ShowLabel = True} {% endtabs %} -Refer to [`this`](https://help.syncfusion.com/uwp/charts/adornments) link to learn more about the options available in [`SfChart`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Charts.SfChart.html) to customize chart adornments. +Refer to [`this`](https://help.syncfusion.com/uwp/charts/adornments) link to learn more about the options available in [`SfChart`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Charts.SfChart.html) to customize chart adornments. ## Enable legend @@ -402,30 +378,24 @@ You can enable legend using the [`SfChart.Legend`](https://help.syncfusion.com/c {% highlight xaml %} - - ... - + - - - - ... - + {% endhighlight %} -{% highlight C# %}  +{% highlight C# %} -chart.Legend = new ChartLegend (); +chart.Legend = new ChartLegend(); {% endhighlight %} -{% highlight VB %}  +{% highlight VB %} -chart.Legend = New ChartLegend () +chart.Legend = New ChartLegend() {% endhighlight %} @@ -438,20 +408,16 @@ Additionally, you need to set label for each series using the [`Label`](https:// {% highlight xaml %} - - ... - - - - ... - + + + {% endhighlight %} -{% highlight C# %}  +{% highlight C# %} -ColumnSeries series = new ColumnSeries (); +ColumnSeries series = new ColumnSeries(); series.ItemsSource = (new ViewModel()).Data; series.XBindingPath = "Name"; series.YBindingPath = "Height"; @@ -459,9 +425,9 @@ series.Label = "Heights"; {% endhighlight %} -{% highlight VB %}  +{% highlight VB %} -Dim series As New ColumnSeries () +Dim series As New ColumnSeries() series.ItemsSource = New ViewModel().Data series.XBindingPath = "Name" series.YBindingPath = "Height" @@ -475,25 +441,21 @@ Refer to this [`link`](https://help.syncfusion.com/uwp/charts/legend) to learn m ## Enable tooltip -Tooltips are used to show information about the segment, when you click the segment. You can enable tooltip by setting series [`ShowTooltip`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_ShowTooltip) property to true. +Tooltips are used to show information about the segment, when you click the segment. You can enable tooltip by setting series [`ShowTooltip`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_ShowTooltip) property to true. {% tabs %} {% highlight xaml %} - - ... - - - - ... - + + + {% endhighlight %} -{% highlight C# %}  +{% highlight C# %} ColumnSeries series = new ColumnSeries(); series.ItemsSource = (new ViewModel()).Data; @@ -503,9 +465,9 @@ series.ShowTooltip = true; {% endhighlight %} -{% highlight VB %}  +{% highlight VB %} -Dim series As New ColumnSeries () +Dim series As New ColumnSeries() series.ItemsSource = New ViewModel().Data series.XBindingPath = "Name" series.YBindingPath = "Height" @@ -539,7 +501,6 @@ The following code example gives you the complete code of above configurations. - @@ -557,28 +518,26 @@ The following code example gives you the complete code of above configurations. - + - + - {% endhighlight %} -{% highlight C# %}  +{% highlight C# %} using Syncfusion.UI.Xaml.Charts; namespace ChartDemo { - - public sealed partial class MainWindow : Window + public sealed partial class MainWindow : Window { public MainWindow() { @@ -616,7 +575,6 @@ namespace ChartDemo //Adding Series to the Chart Series Collection chart.Series.Add(series); this.Content = chart; - } } } @@ -637,14 +595,12 @@ Partial Public Class MainWindow chart.Width = 500 'Adding horizontal axis to the chart - Dim primaryAxis As New CategoryAxis() primaryAxis.Header = "Name" primaryAxis.FontSize = 14 chart.PrimaryAxis = primaryAxis 'Adding vertical axis to the chart - Dim secondaryAxis As New NumericalAxis() secondaryAxis.Header = "Height(in cm)" secondaryAxis.FontSize = 14 @@ -666,11 +622,9 @@ Partial Public Class MainWindow series.AdornmentsInfo = New ChartAdornmentInfo() With {.ShowLabel = True} 'Adding Series to the Chart Series Collection - chart.Series.Add(series) Me.Content = chart - End Sub End Class diff --git a/wpf/Charts/Header.md b/wpf/Charts/Header.md index da8b13946b..1d3c37a87f 100644 --- a/wpf/Charts/Header.md +++ b/wpf/Charts/Header.md @@ -15,7 +15,7 @@ documentation: ug {% highlight xaml %} - + {% endhighlight %} @@ -41,23 +41,13 @@ Also you can add more customization for the header as below: {% highlight xaml %} - - - - - - - - - - - - - - - + + + + + + + {% endhighlight %} @@ -68,35 +58,23 @@ 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; @@ -110,7 +88,6 @@ chart.Header = border; ![Customizing Header of WPF Chart](Area_images/wpf-chart-header-customization.jpeg) -N> Here, HorizontalHeaderAlignment is set as ‘Right’. - -N> You can refer to our [WPF Charts](https://www.syncfusion.com/wpf-controls/charts) feature tour page for its groundbreaking feature representations. You can also explore our [WPF Charts example](https://github.com/syncfusion/wpf-demos) to knows various chart types and how to easily configured with built-in support for creating stunning visual effects. +N> Here, HorizontalHeaderAlignment is set as 'Right'. +N> You can refer to our [WPF Charts](https://www.syncfusion.com/wpf-controls/charts) feature tour page for its groundbreaking feature representations. You can also explore our [WPF Charts example](https://github.com/syncfusion/wpf-demos) to knows various chart types and how to easily configured with built-in support for creating stunning visual effects. \ No newline at end of file diff --git a/wpf/Charts/How-To/Add-custom-labels-to-track-ball-behavior.md b/wpf/Charts/How-To/Add-custom-labels-to-track-ball-behavior.md index 6fed543200..daeddd4647 100644 --- a/wpf/Charts/How-To/Add-custom-labels-to-track-ball-behavior.md +++ b/wpf/Charts/How-To/Add-custom-labels-to-track-ball-behavior.md @@ -1,7 +1,7 @@ --- layout: post -title: Add custom labels to track ball behavior| SfChart | Wpf | Syncfusion -description: Add custom labels to track ball behavior in Syncfusion® WPF Chart (SfChart) control, its elements and more. +title: Add custom labels to track ball behavior | SfChart | WPF | Syncfusion +description: Add custom labels to track ball behavior in Syncfusion WPF Chart (SfChart) control, its elements and more. platform: wpf control: SfChart documentation: ug @@ -9,13 +9,11 @@ documentation: ug # Add custom labels to track ball behavior -In the ChartTrackBallBehavior, each data point will have a label aligned vertically and horizontally using the LabelVerticalAlignment and LabelHorizontalAlignment properties by default. However, you can also add custom labels to the ChartTrackBallBehavior. - -In order to add a custom label, you need to write a class derived from ChartTrackBallBehavior. You need to override GenerateLabels method, which will be called whenever new labels are going to be generated, and add the labels using AddLabel method. The following code sample demonstrates this: +In the ChartTrackBallBehavior, each data point has a label aligned vertically and horizontally using the LabelVerticalAlignment and LabelHorizontalAlignment properties by default. However, you can also add custom labels to the ChartTrackBallBehavior. +To add a custom label, you need to create a class derived from ChartTrackBallBehavior. Override the GenerateLabels method, which is called whenever new labels are generated, and add the labels using the AddLabel method. The following code sample demonstrates this: {% highlight c# %} - public class CustomTrackBallBehavior : ChartTrackBallBehavior { public DataTemplate CustomLabelTemplate @@ -24,7 +22,7 @@ public class CustomTrackBallBehavior : ChartTrackBallBehavior set { SetValue(CustomLabelTemplateProperty, value); } } - // Using a DependencyProperty as the backing store for CustomLabelTemplate. This enables animation, styling, binding, etc. + // Using a DependencyProperty as the backing store for CustomLabelTemplate. This enables animation, styling, binding, etc. public static readonly DependencyProperty CustomLabelTemplateProperty = DependencyProperty.Register("CustomLabelTemplate", typeof(DataTemplate), typeof(CustomTrackBallBehavior), new PropertyMetadata(null)); @@ -42,7 +40,7 @@ public class CustomTrackBallBehavior : ChartTrackBallBehavior Rect rect = this.ChartArea.SecondaryAxis.ArrangeRect; - //Custom label. + // Custom label AddLabel(label, LabelVerticalAlignment, LabelHorizontalAlignment, CustomLabelTemplate, pointInfo1.X, rect.Top); } } @@ -52,12 +50,10 @@ public class CustomLabel public string Value1 { get; set; } public string Value2 { get; set; } } - -{% endhighlight %} +{% endhighlight %} {% highlight xaml %} - - + @@ -82,20 +78,20 @@ public class CustomLabel - + + YBindingPath="YValue"/> + YBindingPath="YValue"/> @@ -103,5 +99,4 @@ public class CustomLabel - -{% endhighlight %} +{% endhighlight %} \ No newline at end of file diff --git a/wpf/Charts/How-To/Add-range-of-points-dynamically.md b/wpf/Charts/How-To/Add-range-of-points-dynamically.md index 2ef3dbbe3e..c88836cb38 100644 --- a/wpf/Charts/How-To/Add-range-of-points-dynamically.md +++ b/wpf/Charts/How-To/Add-range-of-points-dynamically.md @@ -1,28 +1,33 @@ --- layout: post -title: Add range of points dynamically| SfChart | Wpf | Syncfusion -description: Add range of points dynamically in Syncfusion Essential Studio® WPF Chart (SfChart) control, its elements and more. +title: Add Range of Points Dynamically | SfChart | WPF | Syncfusion +description: Learn how to add a range of points dynamically in Syncfusion WPF Chart (SfChart) control, its elements and more. platform: wpf control: SfChart documentation: ug --- -# Add range of points dynamically +# Add Range of Points Dynamically -Whenever you add a data point to ItemsSource dynamically, corresponding data will be updated inside chart series synchronously. This operation will be happening for each and every data point that we add subsequently. You can avoid this by calling SuspendSeriesNotification method of Chart before adding range of data points and then call ResumeSeriesNotification to update all the data points that have been added between these two method calls. +When you add data points to the ItemsSource dynamically, the chart series updates synchronously for each individual point added. This can impact performance when adding multiple points in succession. To optimize this process, you can use the `SuspendSeriesNotification` and `ResumeSeriesNotification` methods of the Chart control. + +This approach allows you to add multiple data points at once and update the chart only after all points have been added: {% highlight c# %} +// Suspend notifications before adding multiple points Chart.SuspendSeriesNotification(); -// ... - -// Add multiple data points. - -// ... +// Add multiple data points here +// For example: +// for (int i = 0; i < 1000; i++) +// { +// dataCollection.Add(new DataPoint(i, Math.Sin(i))); +// } +// Resume notifications to update the chart with all added points Chart.ResumeSeriesNotification(); +{% endhighlight %} - -{% endhighlight %} \ No newline at end of file +By using this pattern, you can significantly improve performance when adding large datasets to your chart. \ No newline at end of file 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..ba3d19a5d7 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 @@ -1,7 +1,7 @@ --- layout: post -title: Export Chart to Image Windows 8.1 in WPF Chart Control | Syncfusion -description: Learn here all about export chart to image windows 8.1 support in Syncfusion Essential® WPF Chart(SFChart) control, it's elements, and more. +title: Export Chart to Image in Windows 8.1 for WPF Chart Control | Syncfusion +description: Learn here all about export chart to image Windows 8.1 support in Syncfusion Essential® WPF Chart (SfChart) control, its elements, and more. platform: wpf control: SfChart documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Export Chart to Image (Windows 8.1) in WPF Charts -The export chart to image feature in the SfChart control enables the user to export the image of the chart in different image file formats. +The export chart to image feature in the SfChart control enables users to export chart images in various file formats. ## Supported Formats @@ -20,59 +20,42 @@ The export chart to image feature in the SfChart control enables the user to exp * PNG * BMP - - ### Method Table - + + + + - + + + + - + + + +
-Method -Prototype -Description
MethodPrototypeDescription
-Save -Save(string fileName, StorageFolder folderLocation) -Export the chart image with the given file name to the mentioned location.If folderLocation is null then it exports the image to the app installed location.
SaveSave(string fileName, StorageFolder folderLocation)Export the chart image with the given file name to the specified location. If folderLocation is null, it exports the image to the app installed location.
-Save -Save(IRandomAccessStream stream, Guid bitmapEncoderID) -Export the chart image using the stream and its corresponding encoder.
SaveSave(IRandomAccessStream stream, Guid bitmapEncoderID)Export the chart image using the stream and its corresponding encoder.
- - ### Method 1 + {% highlight c# %} chart.Save("sfchart.jpg", KnownFolders.PicturesLibrary); -{% endhighlight %} - +{% endhighlight %} ### Method 2 + {% highlight c# %} var memoryStream = new InMemoryRandomAccessStream(); - - chart.Save(memoryStream, BitmapEncoder.BmpEncoderId); - - - - 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); - - } - -{% endhighlight %} - +chart.Save(memoryStream, BitmapEncoder.BmpEncoderId); + +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); +} +{% endhighlight %} \ No newline at end of file diff --git a/wpf/Charts/How-To/Print-the-SfChart.md b/wpf/Charts/How-To/Print-the-SfChart.md index 73e3c436b6..1f644d530f 100644 --- a/wpf/Charts/How-To/Print-the-SfChart.md +++ b/wpf/Charts/How-To/Print-the-SfChart.md @@ -1,7 +1,7 @@ --- layout: post -title: Print the SfChart| SfChart | Wpf | Syncfusion -description: Print the sfchart in Syncfusion Essential Studio® WPF Chart (SfChart) control, its elements and more. +title: Print the SfChart | SfChart | WPF | Syncfusion +description: Learn how to print the Syncfusion Essential Studio WPF Chart (SfChart) control in your applications. platform: wpf control: SfChart documentation: ug @@ -9,13 +9,13 @@ documentation: ug # Print the SfChart in WPF -To print the SfChart, call the Print method. +The SfChart control provides a simple way to print the chart using the built-in Print method. -The following code sample can be used to print the SfChart: +The following code example demonstrates how to print the SfChart: {% highlight c# %} +// Print the chart +chart.Print(); +{% endhighlight %} - chart.Print(); - -{% endhighlight %} - +This method will send the current state of the chart to the default printer. You can use the standard Windows print dialog to select printer options before printing. \ No newline at end of file diff --git a/wpf/Charts/How-To/Serialize-the-SfChart.md b/wpf/Charts/How-To/Serialize-the-SfChart.md index 01f4909f24..5b1be70285 100644 --- a/wpf/Charts/How-To/Serialize-the-SfChart.md +++ b/wpf/Charts/How-To/Serialize-the-SfChart.md @@ -1,95 +1,91 @@ --- layout: post -title: Serialize the SfChart| SfChart | Wpf | Syncfusion -description: Serialization and deserialization in Syncfusion Essential Studio® WPF Chart (SfChart) control, its elements and more. +title: Serialize the SfChart | SfChart | WPF | Syncfusion +description: Learn about serialization and deserialization in Syncfusion Essential Studio WPF Chart (SfChart) control, its elements and more. platform: wpf control: SfChart documentation: ug --- -# Serialization and Deserialization: +# Serialization and Deserialization -SfChart provides the support for serializing and deserializing control. This section explains on how to serialize and deserialize SfChart. +SfChart provides support for serializing and deserializing the control. This section explains how to serialize and deserialize SfChart. -## Methods: +## Methods - + + + - + + + - + + + - + + + - + + + - + + + - + + +
-Method Name -Description
Method NameDescription
-Serialize() -Serialize the control and saves as the XML file in the parent folder.
Serialize()Serializes the control and saves as an XML file in the parent folder.
-Serialize(string filePath) -Serialize the control and saves as the XML file in the given file path.
Serialize(string filePath)Serializes the control and saves as an XML file in the specified file path.
-Serialize(Stream stream) -Serialize the control and saves as the XML file in the given stream.
Serialize(Stream stream)Serializes the control and saves as an XML file in the specified stream.
-Deserialize() -Deserialize the XML file from the parent folder and returns the SfChart control object.
Deserialize()Deserializes the XML file from the parent folder and returns the SfChart control object.
-Deserialize(string filePath) -Deserialize the XML file from the given file path and returns the SfChart control object.
Deserialize(string filePath)Deserializes the XML file from the specified file path and returns the SfChart control object.
-Deserialize(Stream stream) -Deserialize the XML file from the given stream and returns the SfChart control object.
Deserialize(Stream stream)Deserializes the XML file from the specified stream and returns the SfChart control object.
-{% tabs %} -XAML +{% tabs %} {% highlight xaml %} - - - - + + - -