diff --git a/wpf/Charts/Adornments/DataMarkers.md b/wpf/Charts/Adornments/DataMarkers.md index bb47f00763..f8545986d2 100644 --- a/wpf/Charts/Adornments/DataMarkers.md +++ b/wpf/Charts/Adornments/DataMarkers.md @@ -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..07a23564ae 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. +N> 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. +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. \ 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..a9dd9280f6 100644 --- a/wpf/Charts/Adornments/Positioning-Adornment.md +++ b/wpf/Charts/Adornments/Positioning-Adornment.md @@ -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..cd5a087f64 100644 --- a/wpf/Charts/Animation.md +++ b/wpf/Charts/Animation.md @@ -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..91e71c0bb7 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,119 +414,103 @@ 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 +## 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** +### 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. +The text alignment can be changed using the [`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" - }; - +EllipseAnnotation ellipse = new EllipseAnnotation() +{ + X1 = 1.5, + Y1 = 1400, + X2 = 2.5, + Y2 = 1600, + HorizontalTextAlignment = HorizontalAlignment.Center, + VerticalTextAlignment = VerticalAlignment.Center, + FontWeight = FontWeights.Bold, + Text = "Ellipse" +}; {% endhighlight %} - {% endtabs %} ![Customizing Text of Shape Annotation in WPF Chart](Annotation_images/wpf-chart-text-in-shape.jpg) @@ -593,91 +520,74 @@ N> [`HorizontalTextAlignment`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI. ### 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 +596,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. +The following API's are used for dragging and resizing the annotation: -* [`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. +* [`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. -* [`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 annotation = 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 annotation = 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 +793,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 +832,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 +873,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 +912,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 +933,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..f8639b4fd5 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..27eb3498d6 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): @@ -66,80 +66,51 @@ chart.AreaBorderThickness = new Thickness(3); ![Customizing Plot Area in WPF Chart](Area_images/wpf-chart-plot-area-customization.jpeg) -## Multiple Area +## 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 the 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), similar to the Grid panel's row and column definitions. -The following code example demonstrates, how you can create multiple panes in the chart area: +The following code example demonstrates how to create multiple panes in the chart area: {% tabs %} {% highlight xaml %} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -150,63 +121,41 @@ chart:SfChart.Row="1" > SfChart chart = new SfChart(); chart.RowDefinitions.Add(new ChartRowDefinition()); - chart.RowDefinitions.Add(new ChartRowDefinition()); - chart.ColumnDefinitions.Add(new ChartColumnDefinition()); - chart.ColumnDefinitions.Add(new ChartColumnDefinition()); CategoryAxis xAxis = new CategoryAxis(); - ChartBase.SetColumnSpan(xAxis, 2); - chart.PrimaryAxis = xAxis; NumericalAxis yAxis = new NumericalAxis(); - yAxis.PlotOffset = 13; - ChartBase.SetColumnSpan(yAxis, 2); - chart.SecondaryAxis = yAxis; ColumnSeries columnSeries1 = new ColumnSeries() { - ItemsSource = new ViewModel().SneakersDetail, - XBindingPath = "Brand", - YBindingPath = "ItemsCount", - Palette = ChartColorPalette.LightCandy, - }; NumericalAxis axis = new NumericalAxis(); - axis.PlotOffset = 10; - SfChart.SetRow(axis, 1); ColumnSeries columnSeries2 = new ColumnSeries() { - ItemsSource = new ViewModel().SneakersDetail, - XBindingPath = "Brand", - YBindingPath = "ItemsCount1", - Palette = ChartColorPalette.Metro, - YAxis = axis - }; chart.Series.Add(columnSeries1); - chart.Series.Add(columnSeries2); {% endhighlight %} @@ -215,12 +164,11 @@ chart.Series.Add(columnSeries2); ![WPF Chart with Multiple Panes](Area_images/wpf-chart-multiple-panes.jpeg) - ## 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 properties are used to specify the number of columns or rows the axis can extend over. Similar to Grid's RowSpan or ColumnSpan property, these are also attached properties. -You can set the row span in chart like the following code example. +Set the row span in the chart with the following example: {% tabs %} @@ -228,59 +176,33 @@ You can set the row span in chart like the following code example. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + @@ -291,63 +213,41 @@ YBindingPath="ItemsCount"> SfChart chart = new SfChart(); chart.RowDefinitions.Add(new ChartRowDefinition()); - chart.RowDefinitions.Add(new ChartRowDefinition()); - chart.ColumnDefinitions.Add(new ChartColumnDefinition()); - chart.ColumnDefinitions.Add(new ChartColumnDefinition()); CategoryAxis xAxis = new CategoryAxis(); - xAxis.TickLinesPosition = AxisElementPosition.Outside; - ChartBase.SetColumnSpan(xAxis, 2); - SfChart.SetRow(xAxis, 0); - chart.PrimaryAxis = xAxis; NumericalAxis yAxis = new NumericalAxis(); - ChartBase.SetColumnSpan(yAxis, 2); - chart.SecondaryAxis = yAxis; ColumnSeries columnSeries1 = new ColumnSeries() { - ItemsSource = new ViewModel().SneakersDetail, - XBindingPath = "Brand", - YBindingPath = "ItemsCount1", - }; NumericalAxis axis = new NumericalAxis(); - axis.PlotOffset = 10; - ChartBase.SetColumnSpan(axis, 2); LineSeries lineSeries = new LineSeries() { - ItemsSource = new ViewModel().SneakersDetail, - XBindingPath = "Brand", - YBindingPath = "ItemsCount", - Interior = new SolidColorBrush(Colors.CadetBlue), - YAxis = axis - }; chart.Series.Add(columnSeries1); - chart.Series.Add(lineSeries); {% endhighlight %} @@ -356,43 +256,29 @@ chart.Series.Add(lineSeries); ![WPF Chart with Multiple Axes](Area_images/wpf-chart-multiple-axes.jpeg) -## Clone or copy the chart - -More like serialization, you can use [`Clone`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartBase.html#Syncfusion_UI_Xaml_Charts_ChartBase_Clone) method for SfChart control state persistence. This method creates a copy of the chart instance. +## Clone or Copy the Chart -{% highlight C# %} +Much like serialization, you can use the [`Clone`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartBase.html#Syncfusion_UI_Xaml_Charts_ChartBase_Clone) method for SfChart control state persistence. This method creates a copy of the chart instance. +{% highlight c# %} var chartCopy = chart.Clone() as SfChart; - grid.Children.Add(chartCopy as SfChart); - -//Here, 'grid' is an empty container in the application to hold the chart. - +// Here, 'grid' is an empty container in the application to hold the chart. {% endhighlight %} -T> You can use this method for copy and paste like requirement, by cloning chart upon copy and reload while pasting. - -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 use this method for copy-paste requirements by cloning the chart upon copy and reloading while pasting. +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** -[`PointToValue`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartBase.html#Syncfusion_UI_Xaml_Charts_ChartBase_PointToValue_Syncfusion_UI_Xaml_Charts_ChartAxis_System_Windows_Point_) - -[`ValueToPoint`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfChart.html#Syncfusion_UI_Xaml_Charts_SfChart_ValueToPoint_Syncfusion_UI_Xaml_Charts_ChartAxis_System_Double_) - -[`How to add space between multiple columns in a Chart segment`](https://support.syncfusion.com/kb/article/5022/how-to-add-space-between-multiple-columns-in-wpf-chart-sfchart-segment) - -[`How to allot space between the segments`](https://support.syncfusion.com/kb/article/5110/how-to-customize-the-space-between-segments-in-wpf-chart-sfchart) - -[`How to display the chart area alone in Chart`](https://support.syncfusion.com/kb/article/5116/how-to-display-the-chart-area-alone-in-wpf-chart-sfchart) - -[`How to redraw the chart while dragging the series out of the range`](https://support.syncfusion.com/kb/article/5173/how-to-redraw-wpf-chart-sfchart-while-dragging-the-series-out-of-the-range) - -[`How to set the Z Index to the series`](https://support.syncfusion.com/kb/article/3014/how-to-set-the-z-index-to-scatter-series-of-wpf-chart-sfchart) - -[`How to get coordinates of x and y in MouseDown event`](https://support.syncfusion.com/kb/article/2786/how-to-get-coordinates-of-x-and-y-in-wpf-chart-sfchart) - -[`How to set ItemWidthPercent before drawing chart`](https://support.syncfusion.com/kb/article/2805/how-to-set-spacing-between-each-columns-in-wpf-chart-sfchart) - -[`How to view corner segments without cutting in edge of WPF Chart`](https://support.syncfusion.com/kb/article/9372/how-to-view-corner-segments-without-cutting-in-edge-of-wpf-chart) \ No newline at end of file +- [`PointToValue`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartBase.html#Syncfusion_UI_Xaml_Charts_ChartBase_PointToValue_Syncfusion_UI_Xaml_Charts_ChartAxis_System_Windows_Point_) +- [`ValueToPoint`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfChart.html#Syncfusion_UI_Xaml_Charts_SfChart_ValueToPoint_Syncfusion_UI_Xaml_Charts_ChartAxis_System_Double_) +- [`How to add space between multiple columns in a Chart segment`](https://support.syncfusion.com/kb/article/5022/how-to-add-space-between-multiple-columns-in-wpf-chart-sfchart-segment) +- [`How to customize the space between segments`](https://support.syncfusion.com/kb/article/5110/how-to-customize-the-space-between-segments-in-wpf-chart-sfchart) +- [`How to display the chart area alone`](https://support.syncfusion.com/kb/article/5116/how-to-display-the-chart-area-alone-in-wpf-chart-sfchart) +- [`How to redraw the chart while dragging the series out of the range`](https://support.syncfusion.com/kb/article/5173/how-to-redraw-wpf-chart-sfchart-while-dragging-the-series-out-of-the-range) +- [`How to set the Z Index to the series`](https://support.syncfusion.com/kb/article/3014/how-to-set-the-z-index-to-scatter-series-of-wpf-chart-sfchart) +- [`How to get coordinates of x and y in MouseDown event`](https://support.syncfusion.com/kb/article/2786/how-to-get-coordinates-of-x-and-y-in-wpf-chart-sfchart) +- [`How to set ItemWidthPercent before drawing chart`](https://support.syncfusion.com/kb/article/2805/how-to-set-spacing-between-each-columns-in-wpf-chart-sfchart) +- [`How to view corner segments without cutting in the edge`](https://support.syncfusion.com/kb/article/9372/how-to-view-corner-segments-without-cutting-in-edge-of-wpf-chart) \ No newline at end of file diff --git a/wpf/Charts/Axis.md b/wpf/Charts/Axis.md index 9534fa2b9a..9a7445a036 100644 --- a/wpf/Charts/Axis.md +++ b/wpf/Charts/Axis.md @@ -1,112 +1,84 @@ --- layout: post -title: Axis in WPF Charts control | Syncfusion -description: Learn here all about Axis support in Syncfusion® WPF Charts (SfChart) control, its elements and more details. +title: Axis in WPF Charts Control | Syncfusion +description: Learn all about axis support in Syncfusion® WPF Charts (SfChart) control, its elements, and more details. platform: wpf control: SfChart documentation: ug --- - # Axis in WPF Charts (SfChart) -[`ChartAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html) is used to locate a data point inside the chart area. Charts typically have two axes that are used to measure and categorize data: a vertical (Y) axis, and a horizontal (X) axis. +[`ChartAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html) is used to locate a data point inside the chart area. Charts typically have two axes to measure and categorize data: a vertical (Y) axis and a horizontal (X) axis. -Vertical(Y) axis always uses numerical scale. Horizontal(X) axis supports the following types of scale: +The vertical Y-axis always uses a numerical scale. The horizontal X-axis supports the following types of scales: -* Category -* Numeric -* Date time -* Logarithmic Axis +- Category +- Numeric +- DateTime +- Logarithmic Axis -The following are the API’s in ChartAxis +## ChartAxis APIs -* [`ArrangeRect`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_ArrangeRect) – Represents the bounds of chart axis size. +The following are the APIs available in ChartAxis: -* [`VisibleRange`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_VisibleRange) – Represents the axis start and end visible values as follows. +- [`ArrangeRect`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_ArrangeRect) – Represents the bounds of the chart axis size. +- [`VisibleRange`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_VisibleRange) – Represents the start and end visible values of the axis. - - - - - - - - - - - - - - - - - - - - - - - - - -
-{{'[`Start`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DoubleRange.html#Syncfusion_UI_Xaml_Charts_DoubleRange_Start)'| markdownify }} - -Gets the start value of the visible range. -
-{{'[`End`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DoubleRange.html#Syncfusion_UI_Xaml_Charts_DoubleRange_End)'| markdownify }} - -Gets the end value of the visible range. -
-{{'[`Delta`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DoubleRange.html#Syncfusion_UI_Xaml_Charts_DoubleRange_Delta)'| markdownify }} - -Gets the delta value of the visible range. -
-{{'[`Empty`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DoubleRange.html#Syncfusion_UI_Xaml_Charts_DoubleRange_Empty)'| markdownify }} - -Gets the empty value of the visible range. -
-{{'[`IsEmpty`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DoubleRange.html#Syncfusion_UI_Xaml_Charts_DoubleRange_IsEmpty)'| markdownify }} - -Gets a value indicating whether the visible range is empty or not. -
-{{'[`Median`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DoubleRange.html#Syncfusion_UI_Xaml_Charts_DoubleRange_Median)'| markdownify }} - -Gets the median value of the visible range. -
+ + + + + + + + + + + + + + + + + + + + + + + + + +
{{'[`Start`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DoubleRange.html#Syncfusion_UI_Xaml_Charts_DoubleRange_Start)'| markdownify }}Gets the start value of the visible range.
{{'[`End`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DoubleRange.html#Syncfusion_UI_Xaml_Charts_DoubleRange_End)'| markdownify }}Gets the end value of the visible range.
{{'[`Delta`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DoubleRange.html#Syncfusion_UI_Xaml_Charts_DoubleRange_Delta)'| markdownify }}Gets the delta value of the visible range.
{{'[`Empty`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DoubleRange.html#Syncfusion_UI_Xaml_Charts_DoubleRange_Empty)'| markdownify }}Gets the empty value of the visible range.
{{'[`IsEmpty`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DoubleRange.html#Syncfusion_UI_Xaml_Charts_DoubleRange_IsEmpty)'| markdownify }}Gets a value indicating whether the visible range is empty or not.
{{'[`Median`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DoubleRange.html#Syncfusion_UI_Xaml_Charts_DoubleRange_Median)'| markdownify }}Gets the median value of the visible range.
+ +- [`VisibleLabels`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_VisibleLabels) – Represents the axis label collection visible on the axis. -* [`VisibleLabels`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_VisibleLabels) – Represents the axis label collection which are visible in axis. +## Axis Details -The following topics explains in detail about the axis and its parts +The following topics explain the axis and its parts in detail: -## Header +### Header -In [`ChartAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html) you can define any object as header using [`Header`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_Header) property. The following code example demonstrates the defining header in primary and secondary axis. +In [`ChartAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html), any object can be defined as a header using the [`Header`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_Header) property. The following code example demonstrates defining headers in the primary and secondary axes. {% tabs %} -{% highlight xaml %} +{% highlight xml %} - - - + - - - - - + {% endhighlight %} -{% highlight c# %} +{% highlight csharp %} -chart.PrimaryAxis = new CategoryAxis() { Header = "Medals" }; +chart.PrimaryAxis = new CategoryAxis() { Header = "Metals" }; chart.SecondaryAxis = new NumericalAxis() { Header = "Values(In Tonnes)" }; @@ -116,79 +88,47 @@ chart.SecondaryAxis = new NumericalAxis() { Header = "Values(In Tonnes)" }; ![WPF ChartAxis with Header](Axis_images/wpf-chart-axis-header.jpeg) +### Header Customization -**Header** **Customization** - -Default appearance of the header can be customized using [`HeaderTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_HeaderTemplate) property. The following code snippet demonstrates the header customization. +The default appearance of the header can be customized using the [`HeaderTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_HeaderTemplate) property. The following code snippet demonstrates header customization. {% tabs %} -{% highlight xaml %} - - +{% highlight xml %} + - - - - - + - - - - - - + - - - - - - - + - {% endhighlight %} -{% highlight c# %} - -chart.PrimaryAxis = new CategoryAxis() -{ +{% highlight csharp %} +chart.PrimaryAxis = new CategoryAxis() { HeaderTemplate = chart.Resources["headerTemplate1"] as DataTemplate - }; -chart.SecondaryAxis = new NumericalAxis() -{ - +chart.SecondaryAxis = new NumericalAxis() { HeaderTemplate = chart.Resources["headerTemplate2"] as DataTemplate - }; {% endhighlight %} @@ -197,78 +137,50 @@ chart.SecondaryAxis = new NumericalAxis() ![Customizing Header of WPF ChartAxis](Axis_images/wpf-chart-axis-header-customization.jpeg) - -**HeaderStyle** +### HeaderStyle [`HeaderStyle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_HeaderStyle) property is used to provide style for the axis header. The following code example explains header style customization. {% tabs %} -{% highlight xaml %} +{% highlight xml %} - - - - - - - - - - - - - + + + + + + - - - - - - - - - - - - - + + + + + + {% endhighlight %} -{% highlight c# %} - -LabelStyle style = new LabelStyle() -{ +{% highlight csharp %} +LabelStyle style = new LabelStyle() { FontFamily = new FontFamily("Algerian"), - FontSize = 13, - Foreground = new SolidColorBrush(Colors.Black) - }; -chart.PrimaryAxis = new CategoryAxis() -{ - - Header = "Medals", - +chart.PrimaryAxis = new CategoryAxis() { + Header = "Metals", LabelStyle = style - }; -chart.SecondaryAxis = new NumericalAxis() -{ - +chart.SecondaryAxis = new NumericalAxis() { Header = "Values(In Tonnes)", - LabelStyle = style - }; {% endhighlight %} @@ -277,39 +189,30 @@ chart.SecondaryAxis = new NumericalAxis() ![Changing Header Style in WPF ChartAxis](Axis_images/wpf-chart-axis-header-style.jpeg) -## Axis Labels - -Labels will be generated by the range and the values binded to [`XBindingPath`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_XBindingPath) or [`YBindingPath`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.XyDataSeries.html#Syncfusion_UI_Xaml_Charts_XyDataSeries_YBindingPath) properties. - +### Axis Labels +Axis labels are generated by the range and the values bound to the [`XBindingPath`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_XBindingPath) or [`YBindingPath`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.XyDataSeries.html#Syncfusion_UI_Xaml_Charts_XyDataSeries_YBindingPath) properties. -**Positioning** **the** **Labels** +**Positioning the Labels** The [`LabelsPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_LabelsPosition) property is used to position the axis label either inside or outside the chart plotting area. By default, LabelsPosition is [`Outside`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.AxisElementPosition.html). -**Inside** +#### Inside {% tabs %} -{% highlight xaml %} +{% highlight xml %} - - - - - + {% endhighlight %} -{% highlight c# %} - -chart.PrimaryAxis = new NumericalAxis() -{ +{% highlight csharp %} +chart.PrimaryAxis = new NumericalAxis() { LabelsPosition = AxisElementPosition.Inside - }; {% endhighlight %} @@ -318,32 +221,24 @@ chart.PrimaryAxis = new NumericalAxis() ![Changing Axis Label Position in WPF Chart](Axis_images/wpf-chart-axis-label-position.jpeg) +### LabelRotationAngle -**LabelRotationAngle** - -[`LabelRotationAngle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_LabelRotationAngle) property allows you to define the angle for the label content. The following code example illustrates the [`LabelRotationAngle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_LabelRotationAngle). +The [`LabelRotationAngle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_LabelRotationAngle) property allows you to define the angle for the label content. The following code example illustrates the [`LabelRotationAngle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_LabelRotationAngle). {% tabs %} -{% highlight xaml %} +{% highlight xml %} - - - - - + {% endhighlight %} -{% highlight c# %} - -chart.PrimaryAxis = new DateTimeAxis() -{ - - LabelRotationAngle = 90 +{% highlight csharp %} +chart.PrimaryAxis = new DateTimeAxis() { + LabelRotationAngle = 90 }; {% endhighlight %} @@ -352,54 +247,37 @@ chart.PrimaryAxis = new DateTimeAxis() ![WPF Chart displays Axis Rotation Angle](Axis_images/wpf-chart-axis-rotation-angle.jpeg) -**Custom** **Labels** +### Custom Labels -SfChart allows user to define the labels for the axis. For defining the axis label you have to set the [`LabelContent`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxisLabel.html#Syncfusion_UI_Xaml_Charts_ChartAxisLabel_LabelContent) and [`Position`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxisLabel.html#Syncfusion_UI_Xaml_Charts_ChartAxisLabel_Position) property .You can define the labels using [`CustomLabels`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_CustomLabels) property as in the below code snippet. +SfChart allows you to define labels for the axis. To define the axis label, you must set the [`LabelContent`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxisLabel.html#Syncfusion_UI_Xaml_Charts_ChartAxisLabel_LabelContent) and [`Position`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxisLabel.html#Syncfusion_UI_Xaml_Charts_ChartAxisLabel_Position) properties. You can define labels using the [`CustomLabels`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_CustomLabels) property as shown in the code snippet below. {% tabs %} -{% highlight xaml %} +{% highlight xml %} - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + {% endhighlight %} -{% highlight c# %} +{% highlight csharp %} CategoryAxis axis = new CategoryAxis(); - axis.CustomLabels.Add(new ChartAxisLabel() { Position = 0, LabelContent = "0-1" }); - axis.CustomLabels.Add(new ChartAxisLabel() { Position = 1, LabelContent = "1-2" }); - axis.CustomLabels.Add(new ChartAxisLabel() { Position = 2, LabelContent = "2-3" }); - axis.CustomLabels.Add(new ChartAxisLabel() { Position = 3, LabelContent = "3-4" }); - axis.CustomLabels.Add(new ChartAxisLabel() { Position = 4, LabelContent = "4-5" }); - axis.CustomLabels.Add(new ChartAxisLabel() { Position = 5, LabelContent = "5-5" }); chart.PrimaryAxis = axis; @@ -410,69 +288,42 @@ chart.PrimaryAxis = axis; ![WPF Chart with Custom Axis Label](Axis_images/wpf-chart-custom-axis-label.jpeg) - -You can also directly bind the collection of labels to the [`LabelsSource`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_LabelsSource) property for defining custom labels. The following code example demonstrates the defining the label collection in code behind and binding the property in XAML page. +You can also directly bind the collection of labels to the [`LabelsSource`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_LabelsSource) property for defining custom labels. The following code example demonstrates defining the label collection in code behind and binding the property in the XAML page. {% tabs %} -{% highlight xaml %} +{% highlight xml %} - - - - - + {% endhighlight %} -{% highlight C# %} - -chart.PrimaryAxis = new CategoryAxis() -{ - - ContentPath ="Content", +{% highlight csharp %} +chart.PrimaryAxis = new CategoryAxis() { + ContentPath = "Content", PositionPath = "Position", - LabelsSource = Labels - }; - public List Labels { get; set; } -Labels = new List - -{ - - new LabelItem() {Position=0, Content = "0-1"}, - - new LabelItem() {Position=1, Content = "1-2"}, - - new LabelItem() {Position=2, Content = "2-3"}, - - new LabelItem() {Position=3, Content = "3-4"}, - - new LabelItem() {Position=4, Content = "4-5"}, - - new LabelItem() {Position=5, Content = "5-6"}, - - new LabelItem() {Position=6, Content = "6-7"}, - - new LabelItem() {Position=7, Content = "7-8"}, - +Labels = new List { + new LabelItem() { Position = 0, Content = "0-1" }, + new LabelItem() { Position = 1, Content = "1-2" }, + new LabelItem() { Position = 2, Content = "2-3" }, + new LabelItem() { Position = 3, Content = "3-4" }, + new LabelItem() { Position = 4, Content = "4-5" }, + new LabelItem() { Position = 5, Content = "5-6" }, + new LabelItem() { Position = 6, Content = "6-7" }, + new LabelItem() { Position = 7, Content = "7-8" } }; -public class LabelItem - -{ - +public class LabelItem { public string Content { get; set; } - public int Position { get; set; } - } {% endhighlight %} @@ -481,36 +332,27 @@ public class LabelItem ![Customizing Axis Label in WPF Chart](Axis_images/wpf-chart-axis-label-customization.jpeg) +### Label Formatting -**Label** **Formatting** - -Axis labels can be formatting by predefined formatting types based on the axis types. +Axis labels can be formatted by predefined formatting types based on the axis types. -**DateTimeAxis** +#### DateTimeAxis {% tabs %} -{% highlight xaml %} +{% highlight xml %} - - - - - + {% endhighlight %} -{% highlight c# %} - -chart.PrimaryAxis = new DateTimeAxis() -{ +{% highlight csharp %} +chart.PrimaryAxis = new DateTimeAxis() { LabelFormat = "MM/dd", - FontSize = 12 - }; {% endhighlight %} @@ -519,28 +361,22 @@ chart.PrimaryAxis = new DateTimeAxis() ![WPF Chart with DateTimeAxis Label](Axis_images/wpf-chart-axis-label-formatting.jpeg) - -**TimeSpanAxis** +#### TimeSpanAxis {% tabs %} -{% highlight xaml %} +{% highlight xml %} - - - + {% endhighlight %} -{% highlight c# %} - -chart.PrimaryAxis = new TimeSpanAxis() -{ - - LabelFormat = "g", +{% highlight csharp %} +chart.PrimaryAxis = new TimeSpanAxis() { + LabelFormat = "g" }; {% endhighlight %} @@ -549,28 +385,22 @@ chart.PrimaryAxis = new TimeSpanAxis() ![WPF Chart with TimeSpanAxis Label](Axis_images/wpf-chart-time-span-axis-label.jpeg) - -**NumericalAxis** +#### NumericalAxis {% tabs %} -{% highlight xaml %} +{% highlight xml %} - - - + {% endhighlight %} -{% highlight c# %} - -chart.PrimaryAxis = new NumericalAxis() -{ - - LabelFormat = "0.00", +{% highlight csharp %} +chart.SecondaryAxis = new NumericalAxis() { + LabelFormat = "0.00" }; {% endhighlight %} @@ -579,595 +409,378 @@ chart.PrimaryAxis = new NumericalAxis() ![WPF Chart with NumericalAxis Label](Axis_images/wpf-chart-numerical-axis-label.jpeg) +### Adding Units to Labels -**Adding** **Units** **to** **Labels** +To display the measuring units, they can be added as a prefix or suffix to the axis labels. This can be achieved using the [`PrefixLabelTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_PrefixLabelTemplate) and [`PostfixLabelTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_PostfixLabelTemplate) properties. -To display the measuring units, it can be added as a prefix or suffix to the axis labels. This can be achieved using the [`PrefixLabelTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_PrefixLabelTemplate) and [`PostfixLabelTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_PostfixLabelTemplate) properties. - -**PrefixLabelTemplate** +#### PrefixLabelTemplate {% tabs %} -{% highlight xaml %} +{% highlight xml %} - - - - + - - - - + - + {% endhighlight %} -{% highlight c# %} - -chart.SecondaryAxis = new NumericalAxis() -{ +{% highlight csharp %} +chart.SecondaryAxis = new NumericalAxis() { PrefixLabelTemplate = chart.Resources["prefixLabelTemplate"] as DataTemplate - }; {% endhighlight %} {% endtabs %} -![Adding Units to Before Axis Labels in WPF Chart](Axis_images/wpf-chart-units-in-before-axis-label.jpeg) +![Adding Units Before Axis Labels in WPF Chart](Axis_images/wpf-chart-units-in-before-axis-label.jpeg) -**PostfixLabelTemplate** +# PostfixLabelTemplate {% tabs %} - {% highlight xaml %} - - - + - - - TextBlock FontSize="10" VerticalAlignment="Center" Text="K"/> - + - - - - - - {% endhighlight %} - {% highlight c# %} - chart.SecondaryAxis = new NumericalAxis() { - PostfixLabelTemplate = chart.Resources["postfixLabelTemplate"] as DataTemplate - }; - {% endhighlight %} - {% endtabs %} ![Adding Units to After Axis Labels in WPF Chart](Axis_images/wpf-chart-units-in-after-axis-label.jpeg) +# LabelTemplate -**LabelTemplate** - -[`LabelTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_LabelTemplate) property allows you to define the appearance for the axis labels .the following code example illustrates the [`LabelTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_LabelTemplate) property. +[`LabelTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_LabelTemplate) property allows you to define the appearance for the axis labels. The following code example illustrates the [`LabelTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_LabelTemplate) property. {% tabs %} - {% highlight xaml %} - - - - - - - - - - - - - - + + + + + - - - + - - - - - {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new CategoryAxis() { - LabelTemplate = chart.Resources["labelTemplate"] as DataTemplate - }; - {% endhighlight %} - {% endtabs %} ![WPF ChartAxis with Label](Axis_images/wpf-chart-axis-label.jpeg) +# LabelExtent -**LabelExtent** - -This property allows us to set the distance between the axis header and the axis using [`LabelExtent`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_LabelExtent) property.The following code snippet defines the [`LabelExtent`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_LabelExtent) property. +This property allows us to set the distance between the axis header and the axis using [`LabelExtent`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_LabelExtent) property. The following code snippet defines the [`LabelExtent`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_LabelExtent) property. {% tabs %} - {% highlight xaml %} - - - - - - + + + {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new NumericalAxis() { - Header = "Demand", - LabelExtent = 50 - }; - {% endhighlight %} - {% endtabs %} ![WPF Chart displays Space between Axis Label](Axis_images/wpf-chart-space-between-axis-label.jpeg) - -**Smart** **Axis** **Labels** +# Smart Axis Labels When there are more number of axis labels, they may overlap with each other. SfChart provides support to handle the overlapping labels using the [`LabelsIntersectAction`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_LabelsIntersectAction) property. By default the [`LabelsIntersectAction`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_LabelsIntersectAction) value is [`Hide`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.AxisLabelsIntersectAction.html). -The following are the options for intersecting action. - +The following are the options for intersecting action: * None * Hide * MultipleRows * Rotate -**None** +## None None option is used to display all the label even if it intersects. The following code snippet demonstrates the LabelsIntersectAction as None option. {% tabs %} - {% highlight xaml %} - - - - + - {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new CategoryAxis() { - LabelsIntersectAction = AxisLabelsIntersectAction.None - }; - {% endhighlight %} - {% endtabs %} ![WPF Chart without Smart Axis Labels](Axis_images/wpf-chart-without-smart-axis-label.jpeg) +## Hide -**Hide** - -Hide option is used to hide the labels if it intersects .You can define the hide as shown in the below code snippet. +Hide option is used to hide the labels if it intersects. You can define the hide as shown in the below code snippet. {% tabs %} - {% highlight xaml %} - - - - + - {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new DateTimeAxis() { - LabelsIntersectAction = AxisLabelsIntersectAction.Hide - }; - {% endhighlight %} - {% endtabs %} ![Hide Smart Axis Labels in WPF Chart](Axis_images/wpf-chart-hide-smart-axis-label.jpeg) +## MultipleRows -**MultipleRows** - -This option is used to move the labels to next row if it intersects .The following code demonstrates the MultipleRows option in [`LabelsIntersectAction`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_LabelsIntersectAction). +This option is used to move the labels to next row if it intersects. The following code demonstrates the MultipleRows option in [`LabelsIntersectAction`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_LabelsIntersectAction). {% tabs %} - {% highlight xaml %} - - - - - - + + - {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new DateTimeAxis() { - LabelsIntersectAction = AxisLabelsIntersectAction.MultipleRows - }; - {% endhighlight %} - {% endtabs %} ![WPF Chart displays MultipleRows Smart Axis Labels](Axis_images/wpf-chart-multiple-rows-chart-axis-label.jpeg) +## Auto -**Auto** - -This option in [`LabelsIntersectAction`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_LabelsIntersectAction) property is used to rotate the labels if it intersects .The following code snippet and image demonstrates the rotate option in [`LabelsIntersectAction`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_LabelsIntersectAction) property. +This option in [`LabelsIntersectAction`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_LabelsIntersectAction) property is used to rotate the labels if it intersects. The following code snippet and image demonstrates the rotate option in [`LabelsIntersectAction`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_LabelsIntersectAction) property. {% tabs %} - -{% highlight xml %} - +{% highlight xaml %} - - {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new CategoryAxis() { - LabelsIntersectAction = AxisLabelsIntersectAction.Auto - }; - {% endhighlight %} - {% endtabs %} ![WPF Chart displays Rotated Axis Labels](Axis_images/wpf-chart-rotated-axis-label.jpeg) - -**EdgeLabelsDrawingMode** +# EdgeLabelsDrawingMode SfChart provides support to customize the position of the edge labels in axis using the [`EdgeLabelsDrawingMode`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_EdgeLabelsDrawingMode) property. [`EdgeLabelsDrawingMode`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_EdgeLabelsDrawingMode) property default value is [`Center`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.EdgeLabelsDrawingMode.html). -The following are the customizing options in [`EdgeLabelsDrawingMode`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_EdgeLabelsDrawingMode). - -* Center- Positions the label with tick line as center. -* Fit- Position the gridline inside based on the edge label size. -* Hide- Hides the edge labels. -* Shift- Shifts the edge labels to the left or right so that it comes inside the chart area. +The following are the customizing options in [`EdgeLabelsDrawingMode`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_EdgeLabelsDrawingMode): +* Center - Positions the label with tick line as center. +* Fit - Position the gridline inside based on the edge label size. +* Hide - Hides the edge labels. +* Shift - Shifts the edge labels to the left or right so that it comes inside the chart area. -**Center** +## Center {% tabs %} - {% highlight xaml %} - - - - - - + + - {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new DateTimeAxis() { - EdgeLabelsDrawingMode = EdgeLabelsDrawingMode.Center - }; - {% endhighlight %} - {% endtabs %} ![WPF Chart displays Axis Edge Label in Center Position](Axis_images/wpf-chart-axis-edge-label-in-center.jpeg) -**Shift** +## Shift {% tabs %} - {% highlight xaml %} - - - - + - {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new DateTimeAxis() { - EdgeLabelsDrawingMode = EdgeLabelsDrawingMode.Shift - }; - {% endhighlight %} - {% endtabs %} ![WPF Chart displays Axis Edge Label from Left to Right Position](Axis_images/wpf-chart-shift-axis-edge-label.jpeg) - -**Hide** +## Hide {% tabs %} - {% highlight xaml %} - - - - - - + + - {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new DateTimeAxis() { - EdgeLabelsDrawingMode = EdgeLabelsDrawingMode.Hide - }; - {% endhighlight %} - {% endtabs %} ![Hide Axis Edge Label Position in WPF Chart](Axis_images/wpf-chart-hide-axis-edge-label-position.jpeg) - -**Fit** +## Fit {% tabs %} - {% highlight xaml %} - - - - - - + + - {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new DateTimeAxis() { - EdgeLabelsDrawingMode = EdgeLabelsDrawingMode.Fit - }; - {% endhighlight %} - {% endtabs %} ![Fit Axis Edge Label Position in WPF Chart](Axis_images/wpf-chart-fit-axis-label-position.jpeg) +# EdgeLabelsVisibilityMode -**EdgeLabelsVisibilityMode** - -The visibility of the extreme labels of the axis can be controlled using [`EdgeLabelsVisibilityMode`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_EdgeLabelsVisibilityMode) property. By default the [`Default`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.EdgeLabelsVisibilityMode.html) option in [`EdgeLabelsVisibilityMode`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_EdgeLabelsVisibilityMode) is set, which displays the edge label based on auto interval calculations .The following image depicts the default option in [`EdgeLabelsVisibilityMode`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_EdgeLabelsVisibilityMode) while zooming. +The visibility of the extreme labels of the axis can be controlled using [`EdgeLabelsVisibilityMode`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_EdgeLabelsVisibilityMode) property. By default the [`Default`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.EdgeLabelsVisibilityMode.html) option in [`EdgeLabelsVisibilityMode`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_EdgeLabelsVisibilityMode) is set, which displays the edge label based on auto interval calculations. The following image depicts the default option in [`EdgeLabelsVisibilityMode`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_EdgeLabelsVisibilityMode) while zooming. ![WPF Chart displays Axis Edge Label](Axis_images/wpf-chart-axis-edge-label.jpeg) - -**Always** **Visible** +## Always Visible AlwaysVisible option in [`EdgeLabelsVisibilityMode`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_EdgeLabelsVisibilityMode) is used to view the edge labels even while performing zooming. The following code example and image demonstrates the AlwaysVisible option while zooming. {% tabs %} - {% highlight xaml %} - - - - - - + + - {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new NumericalAxis() { - EdgeLabelsVisibilityMode = EdgeLabelsVisibilityMode.AlwaysVisible - }; - {% endhighlight %} - {% endtabs %} ![WPF Chart displays Axis Edge Label](Axis_images/wpf-chart-always-visible-edge-axis-label.jpeg) - -**Visible** +## Visible Visible option is used to display the edge labels (first and last label) irrespective of the auto interval calculation until zooming (i.e., in normal state) {% tabs %} - {% highlight xaml %} - - - - - - + + - {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new NumericalAxis() { - EdgeLabelsVisibilityMode = EdgeLabelsVisibilityMode.Visible - }; - {% endhighlight %} - {% endtabs %} ![WPF Chart displays Axis Edge Label](Axis_images/wpf-chart-visible-edge-axis-label.jpeg) +# Axis Label Border -**Axis Label Border** - -[`ChartAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html) provides support to place the border around its label. To place the border around axis, enable [`ShowLabelBorder`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxisBase2D.html#Syncfusion_UI_Xaml_Charts_ChartAxisBase2D_ShowLabelBorder) property of axis; it can be set as shown in the following code example. +[`ChartAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html) provides support to place the border around its label. To place the border around axis, enable [`ShowLabelBorder`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxisBase2D.html#Syncfusion_UI_Xaml_Charts_ChartAxisBase2D_ShowLabelBorder) property of axis; it can be set as shown in the following code example. {% tabs %} - {% highlight xaml %} - - - - + - - - - + - {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new CategoryAxis() - { - ShowLabelBorder = true, + ShowLabelBorder = true, }; - chart.SecondaryAxis = new NumericalAxis() - { ShowLabelBorder = true }; - {% endhighlight %} - {% endtabs %} ![WPF Chart displays Axis Labels Border](Axis_images/wpf-chart-label-axis-border.png) @@ -1175,54 +788,32 @@ chart.SecondaryAxis = new NumericalAxis() The border color and width can be customized with [`LabelBorderBrush`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxisBase2D.html#Syncfusion_UI_Xaml_Charts_ChartAxisBase2D_LabelBorderBrush) and [`LabelBorderWidth`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxisBase2D.html#Syncfusion_UI_Xaml_Charts_ChartAxisBase2D_LabelBorderWidth) properties of chart axis; it can be set as shown in the following code example. {% tabs %} - {% highlight xaml %} - - - - + - - - - + - {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new CategoryAxis() - { ShowLabelBorder = true, - LabelBorderWidth = 3, - LabelBorderBrush = new SolidColorBrush(Colors.Red) - }; - chart.SecondaryAxis = new NumericalAxis() - { - ShowLabelBorder = true, - - LabelBorderWidth = 3, - - LabelBorderBrush = new SolidColorBrush(Colors.Red), - + ShowLabelBorder = true, + LabelBorderWidth = 3, + LabelBorderBrush = new SolidColorBrush(Colors.Red), }; - {% endhighlight %} - {% endtabs %} ![Customizing Axis Labels Border in WPF Chart](Axis_images/wpf-chart-axis-label-border-customization.png) - ## Grid lines By default, gridlines are automatically added to the [`ChartAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html) in its defined intervals. SfChart supports customization of gridline. The visibility of the gridlines can be controlled using the [`ShowGridLines`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_ShowGridLines) property. @@ -1230,372 +821,225 @@ By default, gridlines are automatically added to the [`ChartAxis`](https://help. The following code example illustrates the [`ShowGridLines`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_ShowGridLines) property as false in the primary axis. {% tabs %} - {% highlight xaml %} - - - - - - + + - {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new NumericalAxis() { - ShowGridLines = false - }; - {% endhighlight %} - {% endtabs %} ![WPF Chart without Gridlines](Axis_images/wpf-chart-without-gridlines.jpeg) - Style can also be applied to Major and Minor Gridlines using [`MajorGridLineStyle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_MajorGridLineStyle) and [`MinorGridLineStyle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_MinorGridLineStyle) properties. -**MajorGridLineStyle** +## MajorGridLineStyle {% tabs %} - {% highlight xaml %} - - - - - - - - - - - + - - {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new NumericalAxis() { - MajorGridLineStyle = chart.Resources["lineStyle"] as Style - }; - {% endhighlight %} - {% endtabs %} ![WPF Chart with Gridlines](Axis_images/wpf-chart-gridlines.jpeg) - -**MinorGridLineStyle** +## MinorGridLineStyle Minor gridlines will be added automatically when the small tick lines is defined inside the chart area. {% tabs %} - {% highlight xaml %} - - - - - - - - - - - - - - - + + + + + + + - {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new NumericalAxis() { - SmallTicksPerInterval = 3, - MinorGridLineStyle = chart.Resources["lineStyle"] as Style - }; - {% endhighlight %} - {% endtabs %} ![WPF Chart displays Minor Gridlines](Axis_images/wpf-chart-minor-gridlines.jpeg) +## Tick Lines -## Tick lines - -Tick line are the small lines which is drawn on the axis line representing the axis labels .Tick lines will be drawn outside of the axis by default. +Tick lines are the small lines which are drawn on the axis line representing the axis labels. Tick lines will be drawn outside of the axis by default. **TickLineSize** Tick lines thickness can be customized using [`TickLineSize`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_TickLineSize) property as shown in the below code snippet. {% tabs %} - {% highlight xaml %} - - - - {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new NumericalAxis() { - - TickLineSize = 10 - + TickLineSize = 10 }; - {% endhighlight %} - {% endtabs %} ![Changing Ticklines Thickness in WPF Chart](Axis_images/wpf-chart-ticklines-thickness.jpeg) +**Positioning the Major Tick Lines** -**Positioning** **the** **Major** **Tick** **Lines** - -Tick lines can be positioned inside or outside of the chart area using [`TickLinesPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_TickLinesPosition) property. By default the tick lines will positioned outside of the chart area. The following code example demonstrates the positioning tick lines inside chart area. +Tick lines can be positioned inside or outside of the chart area using [`TickLinesPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_TickLinesPosition) property. By default, the tick lines will be positioned outside of the chart area. The following code example demonstrates positioning tick lines inside the chart area. {% tabs %} - {% highlight xaml %} - - - - - {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new NumericalAxis() { - - TickLinesPosition = AxisElementPosition.Inside - + TickLinesPosition = AxisElementPosition.Inside }; - {% endhighlight %} - {% endtabs %} ![WPF Chart displays Ticklines Inside Area Pane](Axis_images/wpf-chart-ticklines-inside-area-pane.jpeg) - **Customization** -Style can be applied to major tick lines using [`MajorTickLineStyle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_MajorTickLineStyle) property .The following code snippet demonstrates the styling of major tick lines. +Style can be applied to major tick lines using [`MajorTickLineStyle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_MajorTickLineStyle) property. The following code snippet demonstrates the styling of major tick lines. {% tabs %} - {% highlight xaml %} - - - - - - - - - - - - - - - - - + + + + + + + + {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new NumericalAxis() { - TickLineSize = 10, - - MajorTickLineStyle = chart.Resources["lineStyle"] as Style - + MajorTickLineStyle = chart.Resources["lineStyle"] as Style }; - {% endhighlight %} - {% endtabs %} ![WPF Chart displays Ticklines at Outside Area Pane](Axis_images/wpf-chart-ticklines-at-outside-area-pane.jpeg) +**Minor Tick Lines** -**MinorTickLines** - -Minor tick lines can be added by defining [`SmallTicksPerInterval`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.RangeAxisBase.html#Syncfusion_UI_Xaml_Charts_RangeAxisBase_SmallTicksPerInterval) property. This property will add the tick lines to every interval. +Minor tick lines can be added by defining [`SmallTicksPerInterval`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.RangeAxisBase.html#Syncfusion_UI_Xaml_Charts_RangeAxisBase_SmallTicksPerInterval) property. This property will add the tick lines to every interval. The following code example demonstrates the small ticks set for every interval. {% tabs %} - {% highlight xaml %} - - - - - {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new NumericalAxis() { - Interval = 1, - SmallTicksPerInterval = 4 - }; - {% endhighlight %} - {% endtabs %} -![WPF Chart displays Minot Ticklines](Axis_images/wpf-chart-minor-ticklines.jpeg) - +![WPF Chart displays Minor Ticklines](Axis_images/wpf-chart-minor-ticklines.jpeg) -**Positioning** **the** **minor** **tick** **lines** +**Positioning the Minor Tick Lines** -Minor tick lines can be positioned inside or outside using [`SmallTickLinesPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.RangeAxisBase.html#Syncfusion_UI_Xaml_Charts_RangeAxisBase_SmallTickLinesPosition) property. By default the minor tick lines will be positioned outside. +Minor tick lines can be positioned inside or outside using [`SmallTickLinesPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.RangeAxisBase.html#Syncfusion_UI_Xaml_Charts_RangeAxisBase_SmallTickLinesPosition) property. By default, the minor tick lines will be positioned outside. The following code example demonstrates the positioning of minor tick lines inside the chart area. {% tabs %} - {% highlight xaml %} - - - - - {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new NumericalAxis() { - SmallTicksPerInterval = 2, - SmallTickLinesPosition = AxisElementPosition.Inside - }; - {% endhighlight %} - {% endtabs %} ![WPF Chart displays Minor Ticklines Inside Pane Area](Axis_images/wpf-chart-minor-ticklines-inside-pane-area.jpeg) - -**Customization** **of** **Minor** **Ticklines** +**Customization of Minor Tick Lines** The thickness of the minor tick lines can be customized using [`SmallTickLineSize`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.RangeAxisBase.html#Syncfusion_UI_Xaml_Charts_RangeAxisBase_SmallTickLineSize) property as shown in the below code snippet. {% tabs %} - {% highlight xaml %} - - - - - {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new NumericalAxis() { - Interval = 1, - SmallTicksPerInterval = 3, - SmallTickLineSize = 10 - }; - {% endhighlight %} - {% endtabs %} ![WPF Chart displays Minor Ticklines at Outside Pane Area](Axis_images/wpf-chart-minor-ticklines-at-outside-pane-area.jpeg) @@ -1603,66 +1047,39 @@ chart.PrimaryAxis = new NumericalAxis() Styling customization of minor tick lines can be defined using [`MinorTickLineStyle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_MinorTickLineStyle) property. The following code example and image demonstrates the style for minor tick lines. {% tabs %} - {% highlight xaml %} - - - - - - - - - - - - - - - + + + + + + + - {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new NumericalAxis() { - Interval = 1, - SmallTicksPerInterval = 3, - TickLineSize = 10, - - SmallTickLineSize = 5 - - MinorTickLineStyle = chart.Resources["lineStyle"] as Style - + SmallTickLineSize = 5, + MinorTickLineStyle = chart.Resources["lineStyle"] as Style }; - {% endhighlight %} - {% endtabs %} ![Customizing Minor Ticklines in WPF Chart](Axis_images/wpf-chart-minor-ticklines-customization.jpeg) +N> For category axis, small tick lines are not applicable since it is rendered based on index positions. -N> For category axis, small tick lines is not applicable since it is rendered based on index positions. - -## Customize individual axis elements +## Customize Individual Axis Elements The [`RangeStyles`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_RangeStyles) can be used to customize the gridlines, ticks and axis labels for a specific region of ChartAxis. The following properties are used to customize the specific range in an axis: @@ -1675,355 +1092,218 @@ The [`RangeStyles`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts * [`LabelStyle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxisRangeStyle.html#Syncfusion_UI_Xaml_Charts_ChartAxisRangeStyle_LabelStyle) - Customizes the axis labels for a specific range. {% tabs %} - {% highlight xaml %} - - - - - - - - + + + - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + - {% endhighlight %} - {% highlight c# %} - - NumericalAxis secondaryAxis = new NumericalAxis(); - - secondaryAxis.MajorGridLineStyle = chart.Resources["lineStyle"] as Style ; - - secondaryAxis.MajorTickLineStyle = chart.Resources["lineStyle"] as Style; - - secondaryAxis.LabelStyle.Foreground = new SolidColorBrush(Colors.Green); - - ChartAxisRangeStyleCollection axisRangeStyles = new ChartAxisRangeStyleCollection(); - - ChartAxisRangeStyle rangeStyle = new ChartAxisRangeStyle() { Start = 18, End = 22 }; - - rangeStyle.MajorGridLineStyle = chart.Resources["RangeLineStyle"] as Style ; - - rangeStyle.LabelStyle = new LabelStyle(); - - rangeStyle.LabelStyle.Foreground = new SolidColorBrush(Colors.RoyalBlue); - - rangeStyle.MajorTickLineStyle = chart.Resources["RangeLineStyle"] as Style; - - axisRangeStyles.Add(rangeStyle); - - secondaryAxis.RangeStyles = axisRangeStyles; - - chart.SecondaryAxis = secondaryAxis; - - +NumericalAxis secondaryAxis = new NumericalAxis(); +secondaryAxis.MajorGridLineStyle = chart.Resources["lineStyle"] as Style ; +secondaryAxis.MajorTickLineStyle = chart.Resources["lineStyle"] as Style; +secondaryAxis.LabelStyle.Foreground = new SolidColorBrush(Colors.Green); +ChartAxisRangeStyleCollection axisRangeStyles = new ChartAxisRangeStyleCollection(); +ChartAxisRangeStyle rangeStyle = new ChartAxisRangeStyle() { Start = 18, End = 22 }; +rangeStyle.MajorGridLineStyle = chart.Resources["RangeLineStyle"] as Style ; +rangeStyle.LabelStyle = new LabelStyle(); +rangeStyle.LabelStyle.Foreground = new SolidColorBrush(Colors.RoyalBlue); +rangeStyle.MajorTickLineStyle = chart.Resources["RangeLineStyle"] as Style; +axisRangeStyles.Add(rangeStyle); +secondaryAxis.RangeStyles = axisRangeStyles; +chart.SecondaryAxis = secondaryAxis; {% endhighlight %} - {% endtabs %} ![Customizing Range Style in WPF Chart](Axis_images/wpf-chart-axis-style-customization.JPG) -## AxisLine +## Axis Line SfChart provides support to customize the style of the axis line by defining the [`AxisLineStyle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_AxisLineStyle) property as shown in the below code snippet. {% tabs %} - {% highlight xaml %} - - - - - - - - {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new NumericalAxis() { - Interval = 1, - - AxisLineStyle = chart.Resources["lineStyle"] as Style - + AxisLineStyle = chart.Resources["lineStyle"] as Style }; - {% endhighlight %} - {% endtabs %} ![Customizing AxisLine Style in WPF Chart](Axis_images/wpf-chart-axis-line-style-customization.jpeg) +**Applying Padding to the Axis Line** -**Applying** **Padding** **to** **the** **Axis** **line** - -The padding to the axis line is defined using [`AxisLineOffset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_AxisLineOffset) property. The following code example demonstrates the setting [`AxisLineOffset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_AxisLineOffset) for x axis. +The padding to the axis line is defined using [`AxisLineOffset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_AxisLineOffset) property. The following code example demonstrates setting [`AxisLineOffset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_AxisLineOffset) for the x-axis. {% tabs %} - {% highlight xaml %} - - - - - {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new NumericalAxis() { - AxisLineOffset = 20 - }; - {% endhighlight %} - {% endtabs %} ![WPF Chart with Padding for Axis Line](Axis_images/wpf-chart-padding-for-axis-line.jpeg) - ## Origin Customization -SfChart allows you to customize the origin.By default the axis will be rendered having (0,0) as origin in x and y axes. +SfChart allows you to customize the origin. By default, the axis will be rendered having (0,0) as origin in x and y axes. **ShowAxisNextToOrigin** -[`ShowAxisNextToOrigin`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_ShowAxisNextToOrigin) property is used to move the axis line to the origin value in [`Origin`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_Origin) property based on the x or y axes. .The following code example demonstrates shifting the axis in the origin value in numerical axis. +[`ShowAxisNextToOrigin`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_ShowAxisNextToOrigin) property is used to move the axis line to the origin value in [`Origin`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_Origin) property based on the x or y axes. The following code example demonstrates shifting the axis to the origin value in numerical axis. {% tabs %} - {% highlight xaml %} - - - - - {% endhighlight %} - {% highlight c# %} - chart.SecondaryAxis = new NumericalAxis() { - Origin = 3, - - ShowAxisNextToOrigin = true - + ShowAxisNextToOrigin = true }; - {% endhighlight %} - {% endtabs %} ![WPF Chart with Origin](Axis_images/wpf-chart-origin.jpeg) - -**Positioning** **the** **Header** +**Positioning the Header** The following image demonstrates the default positioning of header when the axis is moved inside based on the origin value. ![Changing Origin Header Position in WPF Chart](Axis_images/wpf-chart-origin-header-position.jpeg) - -If you want to position the header outside of the chart area then you can set the [`Far`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.AxisHeaderPosition.html) option in [`HeaderPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_HeaderPosition) property. +If you want to position the header outside of the chart area, then you can set the [`Far`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.AxisHeaderPosition.html) option in [`HeaderPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_HeaderPosition) property. The following code example demonstrates the positioning of the header outside even when the axis is moved inside. {% tabs %} - {% highlight xaml %} - - - - - {% endhighlight %} - {% highlight c# %} - chart.SecondaryAxis = new NumericalAxis() { - Origin = 3, - ShowAxisNextToOrigin = true, - Header = "Value(In Tonnes)", - HeaderPosition = AxisHeaderPosition.Far - }; - {% endhighlight %} - {% endtabs %} ![Changing Origin Header Position in WPF Chart](Axis_images/wpf-chart-origin-header.jpeg) +**Adding Origin Line** -**Adding** **Origin** **line** - -The origin line can be added to chart area by setting the [`ShowOrigin`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_ShowOrigin) property to true .The following code example demonstrates the displaying origin line at (3,0) position value as set in [`Origin`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_Origin) property. +The origin line can be added to chart area by setting the [`ShowOrigin`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_ShowOrigin) property to true. The following code example demonstrates displaying the origin line at (3,0) position value as set in [`Origin`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_Origin) property. {% tabs %} - {% highlight xaml %} - - - - - {% endhighlight %} - {% highlight c# %} - chart.SecondaryAxis = new NumericalAxis() { - Origin = 3, - - ShowOrigin = true - + ShowOrigin = true }; - {% endhighlight %} - {% endtabs %} ![WPF Chart displays OriginLine](Axis_images/wpf-chart-origin-line.jpeg) -**Customizing the OriginLine** +**Customizing the Origin Line** The origin line of axis can be customized by using the [`OriginLineStyle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_OriginLineStyle) property of the ChartAxis. The following code demonstrates how to apply style for origin line. {% tabs %} - {% highlight xaml %} - - - - - - - - - - - - + + + + + - - {% endhighlight %} - {% highlight c# %} - NumericalAxis numericalAxis = new NumericalAxis() - - { - - Origin = 3, - - ShowOrigin = true - - }; - +{ + Origin = 3, + ShowOrigin = true +}; Style style = new Style(typeof(Line)); - style.Setters.Add(new Setter(Line.StrokeProperty, new SolidColorBrush(Colors.Red))); - style.Setters.Add(new Setter(Line.StrokeDashArrayProperty, new DoubleCollection() { 3 })); - numericalAxis.OriginLineStyle = style; - chart.SecondaryAxis = numericalAxis; - {% endhighlight %} - {% endtabs %} ![Customizing OriginLine in WPF Chart](Axis_images/wpf-chart-origin-style.png) ## Types of Axis -[`ChartAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html) supports the following types. +[`ChartAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html) supports the following types: * NumericalAxis * CategoryAxis @@ -2039,894 +1319,564 @@ You can choose any type of [`ChartAxis`](https://help.syncfusion.com/cr/wpf/Sync [`NumericalAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalAxis.html) is used to plot numerical values to the chart. [`NumericalAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalAxis.html) can be defined for both [`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). The following code snippet shows how to define the [`NumericalAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalAxis.html). {% tabs %} - {% highlight xaml %} - - - - - - - - - {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new NumericalAxis(); - chart.SecondaryAxis = new NumericalAxis(); - {% endhighlight %} - {% endtabs %} ![WPF Chart with NumericalAxis](Axis_images/wpf-chart-numerical-axis.jpeg) +**Customizing the NumericalAxis Range** -**Customizing** **the** **NumericalAxis** **Range** - -[`Maximum`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalAxis.html#Syncfusion_UI_Xaml_Charts_NumericalAxis_Maximum) property used for setting the maximum value for the axis range and [`Minimum`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalAxis.html#Syncfusion_UI_Xaml_Charts_NumericalAxis_Minimum) property is used for setting the minimum value for the axis range. +[`Maximum`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalAxis.html#Syncfusion_UI_Xaml_Charts_NumericalAxis_Maximum) property is used for setting the maximum value for the axis range and [`Minimum`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalAxis.html#Syncfusion_UI_Xaml_Charts_NumericalAxis_Minimum) property is used for setting the minimum value for the axis range. {% tabs %} - {% highlight xaml %} - - - - - {% endhighlight %} - {% highlight c# %} - chart.SecondaryAxis = new NumericalAxis() { - Maximum = 2750, - Minimum = 250, - Interval = 250 - }; - {% endhighlight %} - {% endtabs %} ![Customizing NumericalAxis Range in WPF Chart](Axis_images/wpf-chart-numerical-axis-range.jpeg) - -N> If minimum or maximum value is set, the other value is calculated by default internally. +N> If minimum or maximum value is set, the other value is calculated by default internally. **StartRangeFromZero** -[`NumericalAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalAxis.html) will calculate the range based on the data points binded to the axis. To start the range from zero have to define the [`StartRangeFromZero`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalAxis.html#Syncfusion_UI_Xaml_Charts_NumericalAxis_StartRangeFromZero) property to True. The following code example demonstrates the NumericalAxis range starting from zero. +[`NumericalAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalAxis.html) will calculate the range based on the data points bound to the axis. To start the range from zero, you have to define the [`StartRangeFromZero`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalAxis.html#Syncfusion_UI_Xaml_Charts_NumericalAxis_StartRangeFromZero) property to True. The following code example demonstrates the NumericalAxis range starting from zero. {% tabs %} - {% highlight xaml %} - - - - - {% endhighlight %} - {% highlight c# %} - chart.SecondaryAxis = new NumericalAxis() { - - StartRangeFromZero = true - + StartRangeFromZero = true }; - {% endhighlight %} - {% endtabs %} ![WPF Chart displays NumericalAxis Range Start from Zero](Axis_images/wpf-chart-numeric-axis-range.jpeg) - -N> By default, Range is calculated between the minimum and maximum value of the data points. +N> By default, range is calculated between the minimum and maximum value of the data points. ### CategoryAxis -[`CategoryAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CategoryAxis.html) is an indexed based axis that plots values based on the index of the data point collection. The points are equally spaced here. The following code example initializes the [`CategoryAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CategoryAxis.html). +[`CategoryAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CategoryAxis.html) is an indexed-based axis that plots values based on the index of the data point collection. The points are equally spaced here. The following code example initializes the [`CategoryAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CategoryAxis.html). {% tabs %} - {% highlight xaml %} - - - - - {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new CategoryAxis(); - {% endhighlight %} - {% endtabs %} ![WPF Chart with CategoryAxis](Axis_images/wpf-chart-category-axis.jpeg) +## LabelPlacement -**LabelPlacement** - -In [`CategoryAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CategoryAxis.html), labels is placed based on tick lines using [`LabelPlacement`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CategoryAxis.html#Syncfusion_UI_Xaml_Charts_CategoryAxis_LabelPlacement) property. By default the labels is placed [`OnTicks`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.LabelPlacement.html). The following code example demonstrates placing the label between ticks in [`CategoryAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CategoryAxis.html) +In [`CategoryAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CategoryAxis.html), labels are placed based on tick lines using the [`LabelPlacement`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CategoryAxis.html#Syncfusion_UI_Xaml_Charts_CategoryAxis_LabelPlacement) property. By default, the labels are placed [`OnTicks`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.LabelPlacement.html). The following code example demonstrates placing the label between ticks in [`CategoryAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CategoryAxis.html): {% tabs %} - {% highlight xaml %} - - - - - - + + - {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new CategoryAxis() { - LabelPlacement = LabelPlacement.BetweenTicks - }; - {% endhighlight %} - {% endtabs %} ![WPF Chart displays CategoryAxis Label between Ticks](Axis_images/wpf-chart-category-axis-label-between-ticks.jpeg) +## IsIndexed -**IsIndexed** - -By default, [`CategoryAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CategoryAxis.html) plots the values based on the index of the data points. However, the [`CategoryAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CategoryAxis.html) can be made to plot the data points based on its data, instead of index value by disabling the [`IsIndexed`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CategoryAxis.html#Syncfusion_UI_Xaml_Charts_CategoryAxis_IsIndexed) property of [`CategoryAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CategoryAxis.html), and it is shown in the following code example. +By default, [`CategoryAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CategoryAxis.html) plots the values based on the index of the data points. However, the [`CategoryAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CategoryAxis.html) can be made to plot the data points based on its data, instead of index value by disabling the [`IsIndexed`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CategoryAxis.html#Syncfusion_UI_Xaml_Charts_CategoryAxis_IsIndexed) property of [`CategoryAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CategoryAxis.html), as shown in the following code example: {% tabs %} - {% highlight xaml %} - - - - - - - + + {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new CategoryAxis() - { - - IsIndexed = false, - + IsIndexed = false }; - {% endhighlight %} - {% endtabs %} -The following screenshot illustrates the series with IsIndexed value as False. +The following screenshot illustrates the series with IsIndexed value as False: -![WPF Chart displays Combined Plots with Same Axis Label](Axis_images/wpf-char-combined-plots-with-axis-label.png) +![WPF Chart displays Combined Plots with Same Axis Label](Axis_images/wpf-chart-combined-plots-with-axis-label.png) -By default, the IsIndexed property value is true, and it is shown in following screenshot. +By default, the IsIndexed property value is true, as shown in the following screenshot: ![WPF Chart displays Separated Plots with different Axis Label](Axis_images/wpf-chart-separate-plots-with-axis-label.png) -N> This feature is not applicable for Accumulation series, ErrorBarSeries, RadarSeries, and PolarSeries. - +> **Note:** This feature is not applicable for Accumulation series, ErrorBarSeries, RadarSeries, and PolarSeries. -**AggregateFunctions** +## AggregateFunctions -When the [`IsIndexed`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CategoryAxis.html#Syncfusion_UI_Xaml_Charts_CategoryAxis_IsIndexed) property of the [`CategoryAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CategoryAxis.html) is disabled, the same index values(XValue) are grouped by [`AggregateFunctions`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CategoryAxis.html#Syncfusion_UI_Xaml_Charts_CategoryAxis_AggregateFunctions) property of the axis. The following are the types of [`AggregateFunctions`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CategoryAxis.html#Syncfusion_UI_Xaml_Charts_CategoryAxis_AggregateFunctions), +When the [`IsIndexed`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CategoryAxis.html#Syncfusion_UI_Xaml_Charts_CategoryAxis_IsIndexed) property of the [`CategoryAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CategoryAxis.html) is disabled, the same index values (XValue) are grouped by the [`AggregateFunctions`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CategoryAxis.html#Syncfusion_UI_Xaml_Charts_CategoryAxis_AggregateFunctions) property of the axis. The following are the types of [`AggregateFunctions`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CategoryAxis.html#Syncfusion_UI_Xaml_Charts_CategoryAxis_AggregateFunctions): - * [`Average`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.AggregateFunctions.html) - * [`Count`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.AggregateFunctions.html) - * [`Max`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.AggregateFunctions.html) - * [`Min`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.AggregateFunctions.html) - * [`None`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.AggregateFunctions.html) - * [`Sum`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.AggregateFunctions.html) +* [`Average`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.AggregateFunctions.html) +* [`Count`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.AggregateFunctions.html) +* [`Max`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.AggregateFunctions.html) +* [`Min`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.AggregateFunctions.html) +* [`None`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.AggregateFunctions.html) +* [`Sum`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.AggregateFunctions.html) -The default value of [`AggregateFunctions`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CategoryAxis.html#Syncfusion_UI_Xaml_Charts_CategoryAxis_AggregateFunctions) is None, and it is shown in the following code example. +The default value of [`AggregateFunctions`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CategoryAxis.html#Syncfusion_UI_Xaml_Charts_CategoryAxis_AggregateFunctions) is None, as shown in the following code example: {% tabs %} - {% highlight xaml %} - - - - - - + + {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new CategoryAxis() - { - - IsIndexed = false, - + IsIndexed = false }; - {% endhighlight %} - {% endtabs %} -![WPF Chart displays Combined Plots with Same Axis Label](Axis_images/wpf-char-combined-plots-with-axis-label.png) +![WPF Chart displays Combined Plots with Same Axis Label](Axis_images/wpf-chart-combined-plots-with-axis-label.png) -**Average** +### Average -The following code example illustrates the axis with [`AggregateFunctions`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CategoryAxis.html#Syncfusion_UI_Xaml_Charts_CategoryAxis_AggregateFunctions) is Average, +The following code example illustrates the axis with [`AggregateFunctions`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CategoryAxis.html#Syncfusion_UI_Xaml_Charts_CategoryAxis_AggregateFunctions) set to Average: {% tabs %} - {% highlight xaml %} - - - - - - + + {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new CategoryAxis() - { - IsIndexed = false, - AggregateFunctions = AggregateFunctions.Average - }; - {% endhighlight %} - {% endtabs %} ![WPF Chart displays Plots based on Average Values](Axis_images/wpf-chart-average.png) -**Count** +### Count -The following code example illustrates the axis with [`AggregateFunctions`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CategoryAxis.html#Syncfusion_UI_Xaml_Charts_CategoryAxis_AggregateFunctions) is Count, +The following code example illustrates the axis with [`AggregateFunctions`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CategoryAxis.html#Syncfusion_UI_Xaml_Charts_CategoryAxis_AggregateFunctions) set to Count: {% tabs %} - {% highlight xaml %} - - - - - - + + {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new CategoryAxis() - { - IsIndexed = false, - AggregateFunctions = AggregateFunctions.Count - }; - {% endhighlight %} - {% endtabs %} ![WPF Chart displays Plots based on Axis Count](Axis_images/wpf-chart-plots-based-on-axis-count.png) -**Max** +### Max -The following code example illustrates the axis with [`AggregateFunctions`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CategoryAxis.html#Syncfusion_UI_Xaml_Charts_CategoryAxis_AggregateFunctions) is Max, +The following code example illustrates the axis with [`AggregateFunctions`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CategoryAxis.html#Syncfusion_UI_Xaml_Charts_CategoryAxis_AggregateFunctions) set to Max: {% tabs %} - {% highlight xaml %} - - - - - - + + {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new CategoryAxis() - { - IsIndexed = false, - AggregateFunctions = AggregateFunctions.Max - }; - {% endhighlight %} - {% endtabs %} ![WPF Chart displays Plots based on Maximum Value of Axis](Axis_images/wpf-chart-plots-based-on-max-axis-value.png) -**Min** +### Min -The following code example illustrates the axis with [`AggregateFunctions`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CategoryAxis.html#Syncfusion_UI_Xaml_Charts_CategoryAxis_AggregateFunctions) is Min, +The following code example illustrates the axis with [`AggregateFunctions`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CategoryAxis.html#Syncfusion_UI_Xaml_Charts_CategoryAxis_AggregateFunctions) set to Min: {% tabs %} - {% highlight xaml %} - - - - - - + + {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new CategoryAxis() - { - IsIndexed = false, - AggregateFunctions = AggregateFunctions.Min - }; - {% endhighlight %} - {% endtabs %} ![WPF Chart displays Plots based on Minimum Value of Axis](Axis_images/wpf-chart-plots-based-on-min-axis-value.png) -**Sum** +### Sum -The following code example illustrates the axis with [`AggregateFunctions`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CategoryAxis.html#Syncfusion_UI_Xaml_Charts_CategoryAxis_AggregateFunctions) is Sum, +The following code example illustrates the axis with [`AggregateFunctions`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CategoryAxis.html#Syncfusion_UI_Xaml_Charts_CategoryAxis_AggregateFunctions) set to Sum: {% tabs %} - {% highlight xaml %} - - - - - - + + {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new CategoryAxis() - { - IsIndexed = false, - AggregateFunctions = AggregateFunctions.Sum - }; - {% endhighlight %} - {% endtabs %} ![WPF Chart displays Plots based on Sum Value of Axis](Axis_images/wpf-chart-plots-based-on-sum-axis-value.png) -### DateTimeAxis +## DateTimeAxis -[`DateTimeAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html) is used to plot DateTime values. The [`DateTimeAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html) is widely used to make financial charts in places like the Stock Market, where index plotting is done every day. +[`DateTimeAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html) is used to plot DateTime values. The [`DateTimeAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html) is widely used to create financial charts in places like the Stock Market, where index plotting is done every day. {% tabs %} - {% highlight xaml %} - - - - + - {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new DateTimeAxis() { - LabelFormat = "MMM-dd" - }; - {% endhighlight %} - {% endtabs %} ![WPF Chart displays DateTimeAxis](Axis_images/wpf-chart-datetime-axis.jpeg) +### Customizing the Range -**Customizing** **the** **Range** - -[`Minimum`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html#Syncfusion_UI_Xaml_Charts_DateTimeAxis_Minimum) and [`Maximum`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html#Syncfusion_UI_Xaml_Charts_DateTimeAxis_Maximum) properties behavior is same as in NumericalAxis instead of setting numerical value, you have to set date time values. +[`Minimum`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html#Syncfusion_UI_Xaml_Charts_DateTimeAxis_Minimum) and [`Maximum`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html#Syncfusion_UI_Xaml_Charts_DateTimeAxis_Maximum) properties behavior is the same as in NumericalAxis. Instead of setting numerical values, you have to set date time values. {% tabs %} - {% highlight xaml %} - - - - - - + + - {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new DateTimeAxis() { - - Minimum = new DateTime(2015,01,10), - - Maximum = new DateTime(2015,07,01), - + Minimum = new DateTime(2015, 01, 10), + Maximum = new DateTime(2015, 07, 01), LabelFormat = "MMM-dd", - IntervalType = DateTimeIntervalType.Months, - Interval = 1 - }; - {% endhighlight %} - {% endtabs %} ![Customizing DateTimeAxis Range in WPF Chart](Axis_images/wpf-chart-datetime-axis-range-customization.jpeg) +### Business Hours Range Calculation -**Business** **Hours** **Range** **Calculation** - -SfChart provides support to plot only the business hours in DateTimeAxis.This support is enabled by setting [`EnableBusinessHours`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html#Syncfusion_UI_Xaml_Charts_DateTimeAxis_EnableBusinessHours) property to true. +SfChart provides support to plot only the business hours in DateTimeAxis. This support is enabled by setting the [`EnableBusinessHours`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html#Syncfusion_UI_Xaml_Charts_DateTimeAxis_EnableBusinessHours) property to true. -The following properties are used for business hour range calculation +The following properties are used for business hour range calculation: -* [`OpenTime`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html#Syncfusion_UI_Xaml_Charts_DateTimeAxis_OpenTime)- Represents the open working time of a day. -* [`CloseTime`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html#Syncfusion_UI_Xaml_Charts_DateTimeAxis_CloseTime)- Represents the close working time of a day. -* [`WorkingDays`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html#Syncfusion_UI_Xaml_Charts_DateTimeAxis_WorkingDays)- Represents the working [`days`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Day.html) of a week. +* [`OpenTime`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html#Syncfusion_UI_Xaml_Charts_DateTimeAxis_OpenTime) - Represents the open working time of a day. +* [`CloseTime`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html#Syncfusion_UI_Xaml_Charts_DateTimeAxis_CloseTime) - Represents the close working time of a day. +* [`WorkingDays`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html#Syncfusion_UI_Xaml_Charts_DateTimeAxis_WorkingDays) - Represents the working [`days`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Day.html) of a week. -The following code snippet demonstrates the business hours support in DateTimeAxis +The following code snippet demonstrates the business hours support in DateTimeAxis: {% tabs %} - {% highlight xaml %} - - - - - - + + - {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new DateTimeAxis() { - EnableBusinessHours = true, - OpenTime = 9, - CloseTime = 24, - WorkingDays = Day.Friday | Day.Saturday | Day.Sunday | - Day.Monday | Day.Tuesday| Day.Wednesday| Day.Sunday - + Day.Monday | Day.Tuesday | Day.Wednesday | Day.Sunday }; - {% endhighlight %} - {% endtabs %} ![Customizing DateTimeAxis Range in WPF Chart](Axis_images/wpf-chart-range-customization.jpeg) +## DateTimeCategoryAxis -### DateTimeCategoryAxis - -[`DateTimeCategoryAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeCategoryAxis.html) is a special type of axis used mainly with financial series. All the data points are plotted with equal spaces, similar to [`CategoryAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CategoryAxis.html), thereby removing space for missing dates. [`Interval`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeCategoryAxis.html#Syncfusion_UI_Xaml_Charts_DateTimeCategoryAxis_Interval) and range for the axis are calculated similar to [DateTimeAxis](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html). There are no visual gaps between points, even when the difference between two points is more than a year. +[`DateTimeCategoryAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeCategoryAxis.html) is a special type of axis used mainly with financial series. All the data points are plotted with equal spaces, similar to [`CategoryAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CategoryAxis.html), thereby removing space for missing dates. [`Interval`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeCategoryAxis.html#Syncfusion_UI_Xaml_Charts_DateTimeCategoryAxis_Interval) and range for the axis are calculated similar to [`DateTimeAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html). There are no visual gaps between points, even when the difference between two points is more than a year. {% tabs %} - {% highlight xaml %} - - - - - - + + - {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new DateTimeCategoryAxis() { - LabelFormat = "MMM-dd" - }; - {% endhighlight %} - {% endtabs %} ![DateTimeCategoryAxis in WPF Chart](Axis_images/wpf-chart-datetime-category-axis.jpeg) - -### TimeSpan Axis +## TimeSpanAxis [`TimeSpanAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.TimeSpanAxis.html) is used to plot the time span values in the [`PrimaryAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfChart.html#Syncfusion_UI_Xaml_Charts_SfChart_PrimaryAxis). [`TimeSpanAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.TimeSpanAxis.html) has the advantage of plotting data with milliseconds difference. The limitation of [`TimeSpanAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.TimeSpanAxis.html) is that it can only accept timespan values (hh:mm:ss) and date time values are not accepted. {% tabs %} - {% highlight xaml %} - - - - - - + + - {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new TimeSpanAxis(); - {% endhighlight %} - {% endtabs %} ![WPF Chart displays TimeSpanAxis](Axis_images/wpf-chart-timespan-axis.jpeg) +### Customizing the Range -**Customizing** **the** **Range** - -The following code snippet demonstrates the [`Minimum`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.TimeSpanAxis.html#Syncfusion_UI_Xaml_Charts_TimeSpanAxis_Minimum) and [`Maximum`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.TimeSpanAxis.html#Syncfusion_UI_Xaml_Charts_TimeSpanAxis_Maximum) properties for [`TimeSpanAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.TimeSpanAxis.html). +The following code snippet demonstrates the [`Minimum`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.TimeSpanAxis.html#Syncfusion_UI_Xaml_Charts_TimeSpanAxis_Minimum) and [`Maximum`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.TimeSpanAxis.html#Syncfusion_UI_Xaml_Charts_TimeSpanAxis_Maximum) properties for [`TimeSpanAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.TimeSpanAxis.html): {% tabs %} - {% highlight xaml %} - - - - - - + + - {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new TimeSpanAxis() { - Minimum = new TimeSpan(00, 00, 00), - Maximum = new TimeSpan(00, 10, 00) - }; - {% endhighlight %} - {% endtabs %} ![Customizing TimeSpanAxis Range in WPF Chart](Axis_images/wpf-chart-timespan-axis-range.jpeg) +## LogarithmicAxis -### LogarithmicAxis - -[`LogarithmicAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.LogarithmicAxis.html) is used to plot the logarithmic scale for the chart. The Logarithmic values will be plotted based on the logarithmic base value as 10. +[`LogarithmicAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.LogarithmicAxis.html) is used to plot the logarithmic scale for the chart. The logarithmic values will be plotted based on the logarithmic base value of 10. {% tabs %} - {% highlight xaml %} - - - - + - {% endhighlight %} - {% highlight c# %} - chart.SecondaryAxis = new LogarithmicAxis(); - {% endhighlight %} - {% endtabs %} ![WPF Chart displays LogarithmicAxis](Axis_images/wpf-chart-logarithmic-axis.jpeg) +### Logarithmic Base -**Logarithmic** **Base** - -You can also change the base for logarithmic values. By default the logarithmic values is calculated the base from 10.The following code example demonstrates the logarithmic values in y axis calculated from base 2. +You can also change the base for logarithmic values. By default, the logarithmic values are calculated from base 10. The following code example demonstrates the logarithmic values in the y-axis calculated from base 2: {% tabs %} - {% highlight xaml %} - - - - - - + + - {% endhighlight %} - {% highlight c# %} - chart.SecondaryAxis = new LogarithmicAxis() { - LogarithmicBase = 2 - }; - {% endhighlight %} - {% endtabs %} ![Changing LogarithmicAxis Base Value in WPF Chart](Axis_images/wpf-chart-logarithmic-axis-value.jpeg) +### Customizing the Range -**Customizing** **the** **Range** - -The following code snippet demonstrates the range customization of [`LogarithmicAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.LogarithmicAxis.html) based on [`Minimum`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.LogarithmicAxis.html#Syncfusion_UI_Xaml_Charts_LogarithmicAxis_Minimum) and [`Maximum`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.LogarithmicAxis.html#Syncfusion_UI_Xaml_Charts_LogarithmicAxis_Maximum) properties. +The following code snippet demonstrates the range customization of [`LogarithmicAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.LogarithmicAxis.html) based on [`Minimum`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.LogarithmicAxis.html#Syncfusion_UI_Xaml_Charts_LogarithmicAxis_Minimum) and [`Maximum`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.LogarithmicAxis.html#Syncfusion_UI_Xaml_Charts_LogarithmicAxis_Maximum) properties: {% tabs %} - {% highlight xaml %} - - - - - - + + - {% endhighlight %} - {% highlight c# %} - chart.SecondaryAxis = new LogarithmicAxis() { - Minimum = 100, - Maximum = 7000 - }; - {% endhighlight %} - {% endtabs %} ![Customizing LogarithmicAxis Range in WPF Chart](Axis_images/wpf-chart-logarithmic-range.jpeg) -The following property is common for all types of axes, +## Common Properties for All Axis Types - * `IncludeStripLineRange` +The following properties are common for all types of axes: -**IncludeStripLineRange** +* `IncludeStripLineRange` +* `IncludeAnnotationRange` -By default, [`striplines`](https://help.syncfusion.com/wpf/charts/striplines) are drawn up to the chart axis range, if the provided values (Start and Width) exceed the actual range of chart axis. It can be avoided by using [`IncludeStripLineRange`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxisBase2D.html#Syncfusion_UI_Xaml_Charts_ChartAxisBase2D_IncludeStripLineRange) property. While enabling [`IncludeStripLineRange`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxisBase2D.html#Syncfusion_UI_Xaml_Charts_ChartAxisBase2D_IncludeStripLineRange) property, the axis range will be extended up to the provided stripline range. The property can be set as shown in the following code example. +### IncludeStripLineRange -{% tabs %} +By default, [`striplines`](https://help.syncfusion.com/wpf/charts/striplines) are drawn up to the chart axis range, if the provided values (Start and Width) exceed the actual range of the chart axis. This can be avoided by using the [`IncludeStripLineRange`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxisBase2D.html#Syncfusion_UI_Xaml_Charts_ChartAxisBase2D_IncludeStripLineRange) property. When enabling the [`IncludeStripLineRange`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxisBase2D.html#Syncfusion_UI_Xaml_Charts_ChartAxisBase2D_IncludeStripLineRange) property, the axis range will be extended up to the provided stripline range. The property can be set as shown in the following code example: +{% tabs %} {% highlight xaml %} - - - - - - - - - - - - - - - + + + + + + + {% endhighlight %} - {% highlight c# %} - NumericalAxis axis = new NumericalAxis(); - axis.IncludeStripLineRange = true; - ChartStripLine stripline = new ChartStripLine() - { - Start = 1000, - Width = 1500, - Background = new SolidColorBrush(Colors.LightGray), - Opacity = 0.6 - - }; - - axis.StripLines.Add(stripline); - +}; +axis.StripLines.Add(stripline); {% endhighlight %} - {% endtabs %} ![Customizing StripLine Range in WPF Chart](Axis_images/wpf-chart-strip-line-range.png) -**IncludeAnnotationRange** +### IncludeAnnotationRange -By default, [`annotations`](https://help.syncfusion.com/wpf/charts/annotations) are drawn up to the chart axis range, if the provided values (X1, X2, Y1, and Y2) exceed the actual range of [`chart axis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html). It can be avoided by using [`IncludeAnnotationRange`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.RangeAxisBase.html#Syncfusion_UI_Xaml_Charts_RangeAxisBase_IncludeAnnotationRange) property. While enabling [`IncludeAnnotationRange`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.RangeAxisBase.html#Syncfusion_UI_Xaml_Charts_RangeAxisBase_IncludeAnnotationRange) property, the axis range will be extended up to the provided annotation range. -The property is applicable only for linear axes, and it can be set as shown in the following code example. +By default, [`annotations`](https://help.syncfusion.com/wpf/charts/annotations) are drawn up to the chart axis range, if the provided values (X1, X2, Y1, and Y2) exceed the actual range of the [`chart axis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html). This can be avoided by using the [`IncludeAnnotationRange`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.RangeAxisBase.html#Syncfusion_UI_Xaml_Charts_RangeAxisBase_IncludeAnnotationRange) property. When enabling the [`IncludeAnnotationRange`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.RangeAxisBase.html#Syncfusion_UI_Xaml_Charts_RangeAxisBase_IncludeAnnotationRange) property, the axis range will be extended up to the provided annotation range. -{% tabs %} +The property is applicable only for linear axes, and it can be set as shown in the following code example: +{% tabs %} {% highlight xaml %} + + + - - - - - - - - - - - - + + + {% endhighlight %} - {% highlight c# %} - chart.SecondaryAxis = new NumericalAxis() - - { - - IncludeAnnotationRange = true - - }; +{ + IncludeAnnotationRange = true +}; LineAnnotation annotation = new LineAnnotation(); - annotation.X1 = 0; - annotation.X2 = 4; - annotation.Y1 = 0; - annotation.Y2 = 3000; - chart.Annotations.Add(annotation); - {% endhighlight %} - {% endtabs %} ![Customizing Annotation Range in WPF Chart](Axis_images/wpf-chart-annotation-range.png) ## Inverting axis -Axis can be inverted using the [`IsInversed`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_IsInversed) property. The default value of this property is [`False`]. +Axis can be inverted using the [`IsInversed`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_IsInversed) property. The default value of this property is `False`. {% tabs %} - {% highlight xaml %} - - - - {% endhighlight %} - {% highlight c# %} - this.Chart.SecondaryAxis.IsInversed = true; - {% endhighlight %} - {% endtabs %} ![WPF Chart displays Inversed Axis](Axis_images/wpf-chart-inversed-axis.png) - ## Customizing the Intervals [`ChartAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html) calculates the range and intervals automatically based on the data points. The axis range and interval can be defined using the [`Minimum`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalAxis.html#Syncfusion_UI_Xaml_Charts_NumericalAxis_Minimum), [`Maximum`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalAxis.html#Syncfusion_UI_Xaml_Charts_NumericalAxis_Maximum) and [`Interval`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalAxis.html#Syncfusion_UI_Xaml_Charts_NumericalAxis_Interval) properties. @@ -2936,64 +1886,39 @@ this.Chart.SecondaryAxis.IsInversed = true; The following code snippet demonstrates the [`Interval`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalAxis.html#Syncfusion_UI_Xaml_Charts_NumericalAxis_Interval) customization in NumericalAxis. {% tabs %} - {% highlight xaml %} - - - - - {% endhighlight %} - {% highlight c# %} - chart.SecondaryAxis = new NumericalAxis() { - Interval = 250 - }; - {% endhighlight %} - {% endtabs %} ![Customizing NumericalAxis Interval in WPF Chart](Axis_images/wpf-chart-numerical-axis-interval.jpeg) - **CategoryAxis** The following code snippet demonstrates the [`Interval`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CategoryAxis.html#Syncfusion_UI_Xaml_Charts_CategoryAxis_Interval) customization in CategoryAxis. {% tabs %} - {% highlight xaml %} - - - - - {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new CategoryAxis() { - Interval = 2 - }; - {% endhighlight %} - {% endtabs %} ![Customizing CategoryAxis Interval in WPF Chart](Axis_images/wpf-chart-category-axis-interval.jpeg) @@ -3002,9 +1927,9 @@ chart.PrimaryAxis = new CategoryAxis() The DateTimeAxis [`Interval`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html#Syncfusion_UI_Xaml_Charts_DateTimeAxis_Interval) value corresponds to the type specified in the [`IntervalType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html#Syncfusion_UI_Xaml_Charts_DateTimeAxis_IntervalType) property. -For instance, if the [`Interval`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html#Syncfusion_UI_Xaml_Charts_DateTimeAxis_Interval) is set as 2 and [`IntervalType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html#Syncfusion_UI_Xaml_Charts_DateTimeAxis_IntervalType) is set as [`Days`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeIntervalType.html), the labels are plotted for every two days. The following are the options for [`IntervalType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html#Syncfusion_UI_Xaml_Charts_DateTimeAxis_IntervalType) property +For instance, if the [`Interval`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html#Syncfusion_UI_Xaml_Charts_DateTimeAxis_Interval) is set as 2 and [`IntervalType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html#Syncfusion_UI_Xaml_Charts_DateTimeAxis_IntervalType) is set as [`Days`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeIntervalType.html), the labels are plotted for every two days. The following are the options for [`IntervalType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html#Syncfusion_UI_Xaml_Charts_DateTimeAxis_IntervalType) property: -Auto +* Auto * Days * Hours * Milliseconds @@ -3018,141 +1943,87 @@ The default [`IntervalType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xa The following code snippet demonstrates the DateTimeAxis having one month interval. {% tabs %} - {% highlight xaml %} - - - - + - {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new DateTimeAxis() { - Interval = 1, - IntervalType = DateTimeIntervalType.Months, - LabelFormat = "MMM-dd" - }; - {% endhighlight %} - {% endtabs %} ![Customizing DateTimeAxis Interval in WPF Chart](Axis_images/wpf-chart-datetime-axis-interval.jpeg) - **DesiredIntervalsCount** [`DesiredIntervalsCount`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_DesiredIntervalsCount) property is used to specify the count of the axis labels between the first and last label. The following sample code defines the [`DesiredIntervalsCount`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_DesiredIntervalsCount) property. {% tabs %} - {% highlight xaml %} - - - - - {% endhighlight %} - {% highlight c# %} - chart.SecondaryAxis = new NumericalAxis() { - DesiredIntervalsCount = 7 - }; - {% endhighlight %} - {% endtabs %} ![Customizing Interval Count for NumericalAxis in WPF Chart](Axis_images/wpf-chart-interval-count.jpeg) - -**Maximum** **Labels** +**Maximum Labels** [`MaximumLabels`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_MaximumLabels) property defines the count of the axis labels in the 100 pixels. {% tabs %} - {% highlight xaml %} - - - - + - - - - - - + - - - {% endhighlight %} - {% highlight c# %} - chart.SecondaryAxis = new NumericalAxis() { - MaximumLabels = 2 - }; - NumericalAxis axis = new NumericalAxis() { MaximumLabels = 2 }; - ColumnSeries series = new ColumnSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2010", - YAxis = axis - }; - chart.Series.Add(series); - {% endhighlight %} - {% endtabs %} ![WPF Chart with Maximum Label based on Interval Count](Axis_images/wpf-chart-interval-based-on-label.jpeg) - ## Apply Padding to the Range -The [`NumericalAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalAxis.html) and [`DateTimeAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html) have a [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalAxis.html#Syncfusion_UI_Xaml_Charts_NumericalAxis_RangePadding) property that can be used to add padding to the range of a chart’s axes. +The [`NumericalAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalAxis.html) and [`DateTimeAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html) have a [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalAxis.html#Syncfusion_UI_Xaml_Charts_NumericalAxis_RangePadding) property that can be used to add padding to the range of a chart's axes. ### DateTimeRangePadding -The [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html#Syncfusion_UI_Xaml_Charts_DateTimeAxis_RangePadding) types available in the [`DateTimeAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html) are: +The [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html#Syncfusion_UI_Xaml_Charts_DateTimeAxis_RangePadding) types available in the [`DateTimeAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html) are: * Auto * Additional @@ -3169,246 +2040,155 @@ By default the date time range padding is [`Auto`](https://help.syncfusion.com/c ![WPF Chart with Default DateTimeAxis Range Padding](Axis_images/wpf-chart-default-datetime-range-padding.jpeg) - **Additional** -When [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html#Syncfusion_UI_Xaml_Charts_DateTimeAxis_RangePadding) for [`DateTimeAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html), the DateTime interval of the axis is added as padding, as shown in the following screenshot. +When [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html#Syncfusion_UI_Xaml_Charts_DateTimeAxis_RangePadding) for [`DateTimeAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html) is set to [`Additional`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeRangePadding.html), the DateTime interval of the axis is added as padding, as shown in the following screenshot. {% tabs %} - {% highlight xaml %} - - - - + - - {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new DateTimeAxis() { - RangePadding = DateTimeRangePadding.Additional - }; - {% endhighlight %} - {% endtabs %} ![Changing DateTimeAxis Range Padding in WPF Chart](Axis_images/wpf-chart-change-datetime-range-padding.jpeg) - **Round** When [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html#Syncfusion_UI_Xaml_Charts_DateTimeAxis_RangePadding) for [`DateTimeAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html) is set to [`Round`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeRangePadding.html), the range of the chart axis is rounded off to the nearest possible DateTime value, as shown in the following screenshot. {% tabs %} - {% highlight xaml %} - - - - + - - {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new DateTimeAxis() { - RangePadding = DateTimeRangePadding.Round - }; - {% endhighlight %} - {% endtabs %} ![WPF Chart with DateTimeAxis Round Range Padding](Axis_images/wpf-chart-datetime-round-range-padding.jpeg) - **None** -When the [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html#Syncfusion_UI_Xaml_Charts_DateTimeAxis_RangePadding) for a [`DateTimeAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html) is [`None`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeRangePadding.html). +When the [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html#Syncfusion_UI_Xaml_Charts_DateTimeAxis_RangePadding) for a [`DateTimeAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html) is set to [`None`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeRangePadding.html), no padding is applied. -The following screenshot demonstrates a chart’s x-axis with `RangePadding` set to `None`. +The following screenshot demonstrates a chart's x-axis with `RangePadding` set to `None`. {% tabs %} - {% highlight xaml %} - - - - + - - {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new DateTimeAxis() { - RangePadding = DateTimeRangePadding.None - }; - {% endhighlight %} - {% endtabs %} ![WPF Chart without DateTimeAxis Range Padding](Axis_images/wpf-chart-without-range-padding.jpeg) **RoundStart** -When [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html#Syncfusion_UI_Xaml_Charts_DateTimeAxis_RangePadding) for [`DateTimeAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html) is set to [`RoundStart`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeRangePadding.html), the range of the chart axis is rounded in the start off to the nearest possible DateTime value, as shown in the following screenshot. +When [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html#Syncfusion_UI_Xaml_Charts_DateTimeAxis_RangePadding) for [`DateTimeAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html) is set to [`RoundStart`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeRangePadding.html), the range of the chart axis is rounded at the start to the nearest possible DateTime value, as shown in the following screenshot. {% tabs %} - {% highlight xaml %} - - - - + - - {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new DateTimeAxis() { - RangePadding = DateTimeRangePadding.RoundStart - }; - {% endhighlight %} - {% endtabs %} ![WPF Chart with DateTimeAxis RoundStart Range Padding](Axis_images/wpf-chart-datetime-axis-roundstart-padding.png) - **RoundEnd** -When [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html#Syncfusion_UI_Xaml_Charts_DateTimeAxis_RangePadding) for [`DateTimeAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html) is set to [`RoundEnd`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeRangePadding.html), the range of the chart axis is rounded in the end off to the nearest possible DateTime value, as shown in the following screenshot. - -{% tabs %} - -{% highlight xaml %} - - - - +When [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html#Syncfusion_UI_Xaml_Charts_DateTimeAxis_RangePadding) for [`DateTimeAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html) is set to [`RoundEnd`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeRangePadding.html), the range of the chart axis is rounded at the end to the nearest possible DateTime value, as shown in the following screenshot. +{% tabs %} +{% highlight xaml %} + + - - {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new DateTimeAxis() { - RangePadding = DateTimeRangePadding.RoundEnd - }; - {% endhighlight %} - {% endtabs %} ![WPF Chart with DateTimeAxis RoundEnd Range Padding](Axis_images/wpf-chart-datetime-axis-roundend-padding.png) - **PrependInterval** -When [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html#Syncfusion_UI_Xaml_Charts_DateTimeAxis_RangePadding) for [`DateTimeAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html) is set to [`PrependInterval`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeRangePadding.html), the DateTime interval of the axis is added in the start as padding, as shown in the following screenshot. +When [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html#Syncfusion_UI_Xaml_Charts_DateTimeAxis_RangePadding) for [`DateTimeAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html) is set to [`PrependInterval`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeRangePadding.html), the DateTime interval of the axis is added at the start as padding, as shown in the following screenshot. {% tabs %} - {% highlight xaml %} - - - - + - - {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new DateTimeAxis() { - RangePadding = DateTimeRangePadding.PrependInterval - }; - {% endhighlight %} - {% endtabs %} ![WPF Chart with Prepend DateTimeAxis Range Padding](Axis_images/wpf-chart-datetime-axis-prepend-interval.png) - **AppendInterval** -When [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html#Syncfusion_UI_Xaml_Charts_DateTimeAxis_RangePadding) for [`DateTimeAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html) is set to [`AppendInterval`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeRangePadding.html), the DateTime interval of the axis is added in the end as padding, as shown in the following screenshot. +When [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html#Syncfusion_UI_Xaml_Charts_DateTimeAxis_RangePadding) for [`DateTimeAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html) is set to [`AppendInterval`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeRangePadding.html), the DateTime interval of the axis is added at the end as padding, as shown in the following screenshot. {% tabs %} - {% highlight xaml %} - - - - + - - {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new DateTimeAxis() { - RangePadding = DateTimeRangePadding.AppendInterval - }; - {% endhighlight %} - {% endtabs %} ![WPF Chart with Append DateTimeAxis Range Padding](Axis_images/wpf-chart-datetime-axis-append-interval.png) - ### NumericalRangePadding The following types are available for [`NumericalAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalAxis.html): @@ -3427,593 +2207,365 @@ The following types are available for [`NumericalAxis`](https://help.syncfusion. By default, the default [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalAxis.html#Syncfusion_UI_Xaml_Charts_NumericalAxis_RangePadding) value for [`PrimaryAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfChart.html#Syncfusion_UI_Xaml_Charts_SfChart_PrimaryAxis) is Auto and for [`SecondaryAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfChart.html#Syncfusion_UI_Xaml_Charts_SfChart_SecondaryAxis), the default value is [`Round`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalPadding.html). -The following screenshot illustrates a chart’s y-axis with [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalAxis.html#Syncfusion_UI_Xaml_Charts_NumericalAxis_RangePadding) set to [`Round`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalPadding.html). +The following screenshot illustrates a chart's y-axis with [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalAxis.html#Syncfusion_UI_Xaml_Charts_NumericalAxis_RangePadding) set to [`Round`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalPadding.html). ![WPF Chart with NumericalAxis Round Range Padding](Axis_images/wpf-chart-numericaxis-range-padding.jpeg) - **Normal** [`Normal`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalPadding.html) [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalAxis.html#Syncfusion_UI_Xaml_Charts_NumericalAxis_RangePadding) for a [`NumericalAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalAxis.html) is used mostly for the y-axis to have padding based on the Range calculation. -The following screenshot illustrates a chart’s y-axis with [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalAxis.html#Syncfusion_UI_Xaml_Charts_NumericalAxis_RangePadding) set to [`Normal`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalPadding.html). +The following screenshot illustrates a chart's y-axis with [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalAxis.html#Syncfusion_UI_Xaml_Charts_NumericalAxis_RangePadding) set to [`Normal`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalPadding.html). {% tabs %} - {% highlight xaml %} - - - - + - - {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new NumericalAxis() { - - RangePadding = NumericalPadding.Additional - + RangePadding = NumericalPadding.Normal }; - {% endhighlight %} - {% endtabs %} ![WPF Chart with NumericalAxis Normal Range Padding](Axis_images/wpf-chart-numericaxis-normal-range-padding.jpeg) - **Additional** If [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalAxis.html#Syncfusion_UI_Xaml_Charts_NumericalAxis_RangePadding) for [`NumericalAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalAxis.html) is set to [`Additional`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalPadding.html), the interval of the axis is added as padding. -The following screenshot demonstrates a chart’s x-axis with [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalAxis.html#Syncfusion_UI_Xaml_Charts_NumericalAxis_RangePadding) set to [`Additional`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalPadding.html). +The following screenshot demonstrates a chart's x-axis with [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalAxis.html#Syncfusion_UI_Xaml_Charts_NumericalAxis_RangePadding) set to [`Additional`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalPadding.html). {% tabs %} - {% highlight xaml %} - - - - + - - {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new NumericalAxis() { - RangePadding = NumericalPadding.Additional - }; - {% endhighlight %} - {% endtabs %} ![WPF Chart with NumericalAxis Additional Range Padding](Axis_images/wpf-chart-additional-range-padding.jpeg) - **None** The following screenshot demonstrates [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalAxis.html#Syncfusion_UI_Xaml_Charts_NumericalAxis_RangePadding) as [`None`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalPadding.html), where no padding is applied for the axis. {% tabs %} - {% highlight xaml %} - - - - + - - {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new NumericalAxis() { - RangePadding = NumericalPadding.None - }; - {% endhighlight %} - {% endtabs %} ![WPF Chart without NumericalAxis Range Padding](Axis_images/wpf-chart-without-numericaxis-padding.jpeg) **RoundStart** -If [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalAxis.html#Syncfusion_UI_Xaml_Charts_NumericalAxis_RangePadding) for [`NumericalAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalAxis.html) is set to [`RoundStart`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalPadding.html), rounds the range of the chart axis in the start to the nearest possible value. +If [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalAxis.html#Syncfusion_UI_Xaml_Charts_NumericalAxis_RangePadding) for [`NumericalAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalAxis.html) is set to [`RoundStart`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalPadding.html), it rounds the range of the chart axis at the start to the nearest possible value. -The following screenshot demonstrates a chart’s x-axis with [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalAxis.html#Syncfusion_UI_Xaml_Charts_NumericalAxis_RangePadding) set to [`RoundStart`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalPadding.html). +The following screenshot demonstrates a chart's x-axis with [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalAxis.html#Syncfusion_UI_Xaml_Charts_NumericalAxis_RangePadding) set to [`RoundStart`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalPadding.html). {% tabs %} - {% highlight xaml %} - - - - + - - {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new NumericalAxis() { - RangePadding = NumericalPadding.RoundStart - }; - {% endhighlight %} - {% endtabs %} ![WPF Chart with NumericalAxis RoundStart Range Padding](Axis_images/wpf-chart-numericalaxis-roundstart-padding.png) - **RoundEnd** -If [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalAxis.html#Syncfusion_UI_Xaml_Charts_NumericalAxis_RangePadding) for [`NumericalAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalAxis.html) is set to [`RoundEnd`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalPadding.html), rounds the range of the chart axis in the end to the nearest possible value. +If [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalAxis.html#Syncfusion_UI_Xaml_Charts_NumericalAxis_RangePadding) for [`NumericalAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalAxis.html) is set to [`RoundEnd`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalPadding.html), it rounds the range of the chart axis at the end to the nearest possible value. -The following screenshot demonstrates a chart’s x-axis with [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalAxis.html#Syncfusion_UI_Xaml_Charts_NumericalAxis_RangePadding) set to [`RoundEnd`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalPadding.html). +The following screenshot demonstrates a chart's x-axis with [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalAxis.html#Syncfusion_UI_Xaml_Charts_NumericalAxis_RangePadding) set to [`RoundEnd`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalPadding.html). {% tabs %} - {% highlight xaml %} - - - - + - - {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new NumericalAxis() { - RangePadding = NumericalPadding.RoundEnd - }; - {% endhighlight %} - {% endtabs %} -![WPF Chart with NumericalAxis RoundStart Range Padding](Axis_images/wpf-chart-numericalaxis-roundend-padding.png) - +![WPF Chart with NumericalAxis RoundEnd Range Padding](Axis_images/wpf-chart-numericalaxis-roundend-padding.png) **PrependInterval** If [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalAxis.html#Syncfusion_UI_Xaml_Charts_NumericalAxis_RangePadding) for [`NumericalAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalAxis.html) is set to [`PrependInterval`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalPadding.html), the interval of the axis is added in the start as padding. -The following screenshot demonstrates a chart’s x-axis with [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalAxis.html#Syncfusion_UI_Xaml_Charts_NumericalAxis_RangePadding) set to [`PrependInterval`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalPadding.html). +The following screenshot demonstrates a chart's x-axis with [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalAxis.html#Syncfusion_UI_Xaml_Charts_NumericalAxis_RangePadding) set to [`PrependInterval`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalPadding.html). {% tabs %} - {% highlight xaml %} - - - - - {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new NumericalAxis() { - RangePadding = NumericalPadding.PrependInterval - }; - {% endhighlight %} - {% endtabs %} ![WPF Chart with PrependInterval NumericalAxis Padding](Axis_images/wpf-chart-numericalaxis-prepend-interval.png) - **AppendInterval** - If [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalAxis.html#Syncfusion_UI_Xaml_Charts_NumericalAxis_RangePadding) for [`NumericalAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalAxis.html) is set to [`AppendInterval`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalPadding.html), the interval of the axis is added in the end as padding. -The following screenshot demonstrates a chart’s x-axis with [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalAxis.html#Syncfusion_UI_Xaml_Charts_NumericalAxis_RangePadding) set to [`AppendInterval`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalPadding.html). +The following screenshot demonstrates a chart's x-axis with [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalAxis.html#Syncfusion_UI_Xaml_Charts_NumericalAxis_RangePadding) set to [`AppendInterval`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalPadding.html). {% tabs %} - {% highlight xaml %} - - - - - {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new NumericalAxis() { - RangePadding = NumericalPadding.AppendInterval - }; - {% endhighlight %} - {% endtabs %} ![WPF Chart with AppendInterval NumericalAxis Padding](Axis_images/wpf-chart-numericalaxis-append-interval.png) - ## Applying Padding to the Axis - [`PlotOffset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_PlotOffset) property is used to provide padding to the axis. The following code snippet demonstrates the padding applied to both x and y axes. {% tabs %} - {% highlight xaml %} - - - - - - - - - {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new NumericalAxis() { - PlotOffset = 30 - }; - chart.SecondaryAxis = new NumericalAxis() { - PlotOffset = 30 - }; - {% endhighlight %} - {% endtabs %} ![WPF Chart with ChartAxis Padding](Axis_images/wpf-chart-axis-padding.jpeg) ### PlotOffsetStart - [`PlotOffsetStart`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_PlotOffsetStart) property is used to provide padding to the axis at start position. The following code snippet demonstrates the padding applied to start position for both x and y axes. {% tabs %} - {% highlight xaml %} - - - - - - - - - {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new NumericalAxis() { - PlotOffsetStart = 30 - }; - chart.SecondaryAxis = new NumericalAxis() { - PlotOffsetStart = 30 - }; - {% endhighlight %} - {% endtabs %} ![WPF Chart with PlotOffsetStart for ChartAxis](Axis_images/wpf-chart-axis-plotoffset-start.png) ### PlotOffsetEnd - [`PlotOffsetEnd`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_PlotOffsetEnd) property is used to provide padding to the axis at end position. The following code snippet demonstrates the padding applied to end position for both x and y axes. {% tabs %} - {% highlight xaml %} - - - - - - - - - {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new NumericalAxis() { - PlotOffsetEnd = 30 - }; - chart.SecondaryAxis = new NumericalAxis() { - PlotOffsetEnd = 30 - }; - {% endhighlight %} - {% endtabs %} ![WPF Chart with PlotOffsetEnd for ChartAxis](Axis_images/wpf-chart-axis-plotoffset-end.png) ## AutoScrollingDelta - -[`AutoScrollingDelta`](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Chart.ChartAxis.html#Syncfusion_Windows_Chart_ChartAxis_AutoScrollingDelta) is used to ensure whether the specified range of data is always visible in the chart. It always shows the recently added data points at the end, and the scrolling will be reset to the end of the range whenever a new point is added. +[`AutoScrollingDelta`](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Chart.ChartAxis.html#Syncfusion_Windows_Chart_ChartAxis_AutoScrollingDelta) is used to ensure whether the specified range of data is always visible in the chart. It always shows the recently added data points at the end, and the scrolling will be reset to the end of the range whenever a new point is added. By activating the [`EnableScrollBar`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxisBase2D.html#Syncfusion_UI_Xaml_Charts_ChartAxisBase2D_EnableScrollBar) property of the axis or by adding [`ChartZoomPanBehavior`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartZoomPanBehavior.html) to the chart, you can scroll to the previous data points. ### AutoScrollingDeltaType - In [`DateTimeAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html), you can apply auto scrolling delta value in [`Years`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeIntervalType.html), [`Months`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeIntervalType.html), [`Days`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeIntervalType.html), [`Hours`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeIntervalType.html), [`Minutes`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeIntervalType.html), [`Seconds`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeIntervalType.html) and [`Milliseconds`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeIntervalType.html) by setting the [`AutoScrollingDeltaType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html#Syncfusion_UI_Xaml_Charts_DateTimeAxis_AutoScrollingDeltaType) property. The default value of this property is [`Auto`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeIntervalType.html), and the delta will be calculated automatically based on range. -{% tabs %} - +{% tabs %} {% highlight xaml %} - - - - + + - {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new DateTimeAxis() { - AutoScrollingDelta = 3, - - AutoScrollingDeltaType = DateTimeIntervalType.Days + AutoScrollingDelta = 3, + AutoScrollingDeltaType = DateTimeIntervalType.Days }; - {% endhighlight %} - {% endtabs %} ### AutoScrollingMode - The [`AutoScrollingMode`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxisBase2D.html#Syncfusion_UI_Xaml_Charts_ChartAxisBase2D_AutoScrollingMode) property is used to determine whether the axis should be scrolled from the start position or end position. The default value of this property is [`End`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAutoScrollingMode.html). -{% tabs %} - +{% tabs %} {% highlight xaml %} - - - - + + - {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new DateTimeAxis() { - AutoScrollingDelta = 3, - - AutoScrollingMode = ChartAutoScrollingMode.Start + AutoScrollingDelta = 3, + AutoScrollingMode = ChartAutoScrollingMode.Start }; - {% endhighlight %} - {% endtabs %} ## Auto Interval Calculation on Zooming - [`EnableAutoIntervalOnZooming`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_EnableAutoIntervalOnZooming) property is used to maintain the interval even it is in zooming state only if we set the interval to the axis. Default value of this property is true. While zooming based on the auto range padding the interval will be calculated. ![WPF Chart with Zooming AutoInterval](Axis_images/wpf-chart-auto-interval-zooming.jpeg) - If you set [`EnableAutoIntervalOnZooming`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_EnableAutoIntervalOnZooming) as False, the intervals will be calculated on the interval based on the axis while zooming. {% tabs %} - {% highlight xaml %} - - - - + - - {% endhighlight %} - {% highlight c# %} - chart.PrimaryAxis = new NumericalAxis() { - EnableScrollBar = true, - EnableAutoIntervalOnZooming = false, - Interval = 1 - }; - {% endhighlight %} - {% endtabs %} ![WPF Chart with Zooming AutoInterval](Axis_images/wpf-chart-interval-zooming.jpeg) ## Multiple Axes - SfChart provides a way to arrange multiple series inside the same chart area, giving the chart more space than x-axis and y-axis. These axes can be arranged in a stacking order or in a side by side pattern. By default, all the series are plotted based on primary and secondary axis. You can add more axes by adding additional axis to the series. There are two properties [`XAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CartesianSeries.html#Syncfusion_UI_Xaml_Charts_CartesianSeries_XAxis) and [`YAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.CartesianSeries.html#Syncfusion_UI_Xaml_Charts_CartesianSeries_YAxis) in all the series type which is used to provide Multiple axes support, except [`AccumulationSeries`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.AccumulationSeriesBase.html). {% tabs %} - {% highlight xaml %} - - +XBindingPath="Demand" YBindingPath="Year2011"> - - - + - - - - - - - {% endhighlight %} - {% highlight c# %} - ColumnSeries series1 = new ColumnSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2011" - }; - LineSeries series2 = new LineSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Date", - YBindingPath = "Year2011", - }; - series2.XAxis = new DateTimeAxis() { - Header = "Additional X Axis" - }; - series2.YAxis = new NumericalAxis() { - Header = "Additional Y Axis" - }; - chart.Series.Add(series1); - chart.Series.Add(series2); - - {% endhighlight %} - {% endtabs %} ![WPF Chart with Multiple Axes](Axis_images/wpf-chart-multiple-axes.jpeg) @@ -4021,61 +2573,37 @@ chart.Series.Add(series2); In the above screenshot, the LineSeries is plotted based on additional X & Y axes, and ColumnSeries (or remaining series) is plotted based on the primary and secondary axes. ## Multi-level Labels - [`Axis`](https://help.syncfusion.com/wpf/charts/axis) can be customized with multiple levels of label by using its [`MultiLevelLabels`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxisBase2D.html#Syncfusion_UI_Xaml_Charts_ChartAxisBase2D_MultiLevelLabels) property. These labels are placed based on the provided [`Start`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartMultiLevelLabel.html#Syncfusion_UI_Xaml_Charts_ChartMultiLevelLabel_Start) and [`End`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartMultiLevelLabel.html#Syncfusion_UI_Xaml_Charts_ChartMultiLevelLabel_End) range values. You can add any number of labels to an axis. The following code example illustrates how to set a multilevel label. {% tabs %} - {% highlight xaml %} - - - - - - - - {% endhighlight %} - {% highlight c# %} - -chart.PrimaryAxis = new CategoryAxis() - +chart.PrimaryAxis = new CategoryAxis() { - ShowLabelBorder = true, - + ShowLabelBorder = true, }; - ChartMultiLevelLabel label = new ChartMultiLevelLabel() - { - - Start = -0.5, - - End = 2.5, - - Text = "Quarter 1" - + Start = -0.5, + End = 2.5, + Text = "Quarter 1" }; - chart.PrimaryAxis.MultiLevelLabels.Add(label); - {% endhighlight %} - {% endtabs %} ![WPF Chart displays Multi-level Axis Labels](Axis_images/wpf-chart-multi-level-axis-labels.png) -**Regarding** **Start** **and** **End** **Properties** - -[`Start`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartMultiLevelLabel.html#Syncfusion_UI_Xaml_Charts_ChartMultiLevelLabel_Start) and [`End`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartMultiLevelLabel.html#Syncfusion_UI_Xaml_Charts_ChartMultiLevelLabel_End) properties of [`ChartMultiLevelLabel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartMultiLevelLabel.html) are type of objects. You can provide the start and end values for a multi-level label based on its Axis type. It is described in the following table. +**Regarding Start and End Properties** +[`Start`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartMultiLevelLabel.html#Syncfusion_UI_Xaml_Charts_ChartMultiLevelLabel_Start) and [`End`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartMultiLevelLabel.html#Syncfusion_UI_Xaml_Charts_ChartMultiLevelLabel_End) properties of [`ChartMultiLevelLabel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartMultiLevelLabel.html) are type of objects. You can provide the start and end values for a multi-level label based on its Axis type. It is described in the following table. @@ -4122,1386 +2650,743 @@ chart.PrimaryAxis.MultiLevelLabels.Add(label);
+**Customizing multi-level labels** -**Customizing** **multi-level** **labels** - -**Border** **Customization** +**Border Customization** [`ChartMultiLevelLabel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartMultiLevelLabel.html) border width and color can be customized with [`LabelBorderWidth`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxisBase2D.html#Syncfusion_UI_Xaml_Charts_ChartAxisBase2D_LabelBorderWidth) and [`LabelBorderBrush`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxisBase2D.html#Syncfusion_UI_Xaml_Charts_ChartAxisBase2D_LabelBorderBrush) properties of chart axis. It can be set as shown in the following code example. {% tabs %} - {% highlight xaml %} - - - - + - - - + - - - {% endhighlight %} - {% highlight c# %} - -chart.PrimaryAxis = new CategoryAxis() - +chart.PrimaryAxis = new CategoryAxis() { LabelBorderWidth = 3, - ShowLabelBorder = true, - LabelBorderBrush = new SolidColorBrush(Colors.Red), - }; - ChartMultiLevelLabel label = new ChartMultiLevelLabel() - { - - Start = -0.5, - - End = 2.5, - - Text = "Quarter 1", - - BorderWidth = 4 - + Start = -0.5, + End = 2.5, + Text = "Quarter 1", + BorderWidth = 4 }; - chart.PrimaryAxis.MultiLevelLabels.Add(label); - {% endhighlight %} - {% endtabs %} ![Customizing Axis Border in WPF Chart](Axis_images/wpf-chart-axis-label-border.png) - -**Border** **Type** - -[`Chart Axis`](https://help.syncfusion.com/wpf/charts/axis) provides support to various types of border for [`ChartMultiLevelLabels`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartMultiLevelLabel.html). It can be applied by using its [`MultiLevelLabelsBorderType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxisBase2D.html#Syncfusion_UI_Xaml_Charts_ChartAxisBase2D_MultiLevelLabelsBorderType) property. The default [`MultiLevelLabelsBorderType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxisBase2D.html#Syncfusion_UI_Xaml_Charts_ChartAxisBase2D_MultiLevelLabelsBorderType) is [`Rectangle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.BorderType.html). The another supported border types are [`Brace`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.BorderType.html) ,[`None`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.BorderType.html) and [`WithoutTopAndBottomBorder`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.BorderType.html). +**Border Type** +[`Chart Axis`](https://help.syncfusion.com/wpf/charts/axis) provides support to various types of border for [`ChartMultiLevelLabels`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartMultiLevelLabel.html). It can be applied by using its [`MultiLevelLabelsBorderType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxisBase2D.html#Syncfusion_UI_Xaml_Charts_ChartAxisBase2D_MultiLevelLabelsBorderType) property. The default [`MultiLevelLabelsBorderType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxisBase2D.html#Syncfusion_UI_Xaml_Charts_ChartAxisBase2D_MultiLevelLabelsBorderType) is [`Rectangle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.BorderType.html). The another supported border types are [`Brace`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.BorderType.html), [`None`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.BorderType.html) and [`WithoutTopAndBottomBorder`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.BorderType.html). **Rectangle** {% tabs %} - {% highlight xaml %} - - - - + - - - + - - - - - - - - - + - - - + - - - - - {% endhighlight %} - {% highlight c# %} - -chart.PrimaryAxis = new CategoryAxis() - +chart.PrimaryAxis = new CategoryAxis() { - ShowLabelBorder = true, + ShowLabelBorder = true, }; - ChartMultiLevelLabel label1 = new ChartMultiLevelLabel() - { - - Start = -0.5, - - End = 2.5, - - Text = "Quarter 1", - + Start = -0.5, + End = 2.5, + Text = "Quarter 1", }; - chart.PrimaryAxis.MultiLevelLabels.Add(label1); - ChartMultiLevelLabel label2 = new ChartMultiLevelLabel() - { - Start = 2.5, - End = 5.5, - Text = "Quarter 2" - }; - chart.PrimaryAxis.MultiLevelLabels.Add(label2); - ChartMultiLevelLabel label3 = new ChartMultiLevelLabel() - { - Start = 5.5, - End = 8.5, - Text = "Quarter 3" - }; - chart.PrimaryAxis.MultiLevelLabels.Add(label3); - ChartMultiLevelLabel label4 = new ChartMultiLevelLabel() - { - Start = 8.5, - - End = 11.5, - - Text = "Quarter 4" - + Start = 8.5, + End = 11.5, + Text = "Quarter 4" }; - chart.PrimaryAxis.MultiLevelLabels.Add(label4); - chart.SecondaryAxis = new NumericalAxis() - { - ShowLabelBorder = true, + ShowLabelBorder = true, }; - ChartMultiLevelLabel label5 = new ChartMultiLevelLabel() - { - - Start = 32, - - End = 36, - - Text = "Low" - + Start = 32, + End = 36, + Text = "Low" }; - chart.SecondaryAxis.MultiLevelLabels.Add(label5); - ChartMultiLevelLabel label6 = new ChartMultiLevelLabel() - { Start = 36, - End = 42, - Text = "Medium" }; - chart.SecondaryAxis.MultiLevelLabels.Add(label6); - ChartMultiLevelLabel label7 = new ChartMultiLevelLabel() - { - Start = 42, - - End = 48, - - Text = "High" + Start = 42, + End = 48, + Text = "High" }; - chart.SecondaryAxis.MultiLevelLabels.Add(label7); - {% endhighlight %} - {% endtabs %} ![WPF Chart displays Rectangel Axis Border Label](Axis_images/wpf-chart-rectangle-axis-border-label.png) - **Brace** - {% tabs %} - {% highlight xaml %} - - - - - - - - - - - - - - - - - - - - {% endhighlight %} - {% highlight c# %} - -chart.PrimaryAxis = new CategoryAxis() - +chart.PrimaryAxis = new CategoryAxis() { - ShowLabelBorder = true, - - MultiLevelLabelsBorderType = BorderType.Brace - + ShowLabelBorder = true, + MultiLevelLabelsBorderType = BorderType.Brace }; - ChartMultiLevelLabel label1 = new ChartMultiLevelLabel() - { - - Start = -0.5, - - End = 2.5, - - Text = "Quarter 1", + Start = -0.5, + End = 2.5, + Text = "Quarter 1", }; - chart.PrimaryAxis.MultiLevelLabels.Add(label1); - ChartMultiLevelLabel label2 = new ChartMultiLevelLabel() - { - Start = 2.5, - End = 5.5, - Text = "Quarter 2", }; - chart.PrimaryAxis.MultiLevelLabels.Add(label2); - ChartMultiLevelLabel label3 = new ChartMultiLevelLabel() - { - Start = 5.5, - End = 8.5, - Text = "Quarter 3", - }; - chart.PrimaryAxis.MultiLevelLabels.Add(label3); - ChartMultiLevelLabel label4 = new ChartMultiLevelLabel() - { - Start = 8.5, - - End = 11.5, - - Text = "Quarter 4", - + Start = 8.5, + End = 11.5, + Text = "Quarter 4", }; - chart.PrimaryAxis.MultiLevelLabels.Add(label4); - chart.SecondaryAxis = new NumericalAxis() - { - ShowLabelBorder = true, - - MultiLevelLabelsBorderType = BorderType.Brace + ShowLabelBorder = true, + MultiLevelLabelsBorderType = BorderType.Brace }; - ChartMultiLevelLabel label5 = new ChartMultiLevelLabel() - { - - Start = 32, - - End = 36, - - Text = "Low", - + Start = 32, + End = 36, + Text = "Low", }; - chart.SecondaryAxis.MultiLevelLabels.Add(label5); - ChartMultiLevelLabel label6 = new ChartMultiLevelLabel() - { Start = 36, - End = 42, - Text = "Medium", }; - chart.SecondaryAxis.MultiLevelLabels.Add(label6); - ChartMultiLevelLabel label7 = new ChartMultiLevelLabel() - { - Start = 42, - - End = 48, - - Text = "High", + Start = 42, + End = 48, + Text = "High", }; - chart.SecondaryAxis.MultiLevelLabels.Add(label7); - - {% endhighlight %} - {% endtabs %} - ![WPF Chart displays Brace Axis Border Label](Axis_images/wpf-chart-brace-axis-border-label.png) **None** - {% tabs %} - {% highlight xaml %} - - - - - + + - - - - - - - - - - - - - - - - - - {% endhighlight %} - {% highlight c# %} - -chart.PrimaryAxis = new CategoryAxis() - +chart.PrimaryAxis = new CategoryAxis() { ShowLabelBorder = true, - MultiLevelLabelsBorderType = BorderType.None - }; - ChartMultiLevelLabel label1 = new ChartMultiLevelLabel() - { - - Start = -0.5, - - End = 2.5, - - Text = "Quarter 1" - + Start = -0.5, + End = 2.5, + Text = "Quarter 1" }; - chart.PrimaryAxis.MultiLevelLabels.Add(label1); - ChartMultiLevelLabel label2 = new ChartMultiLevelLabel() - { - Start = 2.5, - End = 5.5, - Text = "Quarter 2" - }; - chart.PrimaryAxis.MultiLevelLabels.Add(label2); - ChartMultiLevelLabel label3 = new ChartMultiLevelLabel() - { - Start = 5.5, - End = 8.5, - Text = "Quarter 3" }; - chart.PrimaryAxis.MultiLevelLabels.Add(label3); - ChartMultiLevelLabel label4 = new ChartMultiLevelLabel() - { - Start = 8.5, - - End = 11.5, - - Text = "Quarter 4" - + Start = 8.5, + End = 11.5, + Text = "Quarter 4" }; - chart.PrimaryAxis.MultiLevelLabels.Add(label4); - chart.SecondaryAxis = new NumericalAxis() - { - ShowLabelBorder = true, - MultiLevelLabelsBorderType = BorderType.None - }; - ChartMultiLevelLabel label5 = new ChartMultiLevelLabel() - { - - Start = 32, - - End = 36, - - Text = "Low" - + Start = 32, + End = 36, + Text = "Low" }; - chart.SecondaryAxis.MultiLevelLabels.Add(label5); - ChartMultiLevelLabel label6 = new ChartMultiLevelLabel() - { Start = 36, - End = 42, - Text = "Medium" }; - chart.SecondaryAxis.MultiLevelLabels.Add(label6); - ChartMultiLevelLabel label7 = new ChartMultiLevelLabel() - { - Start = 42, - - End = 48, - - Text = "High" + Start = 42, + End = 48, + Text = "High" }; - chart.SecondaryAxis.MultiLevelLabels.Add(label7); - - {% endhighlight %} - {% endtabs %} - ![WPF Chart without Axis Border Label](Axis_images/wpf-chart-without-axis-border-label.png) **WithoutTopAndBottomBorder** - {% tabs %} - {% highlight xaml %} - - - - + - - - - - - - - - - - + - - - - - - - {% endhighlight %} - {% highlight c# %} - -chart.PrimaryAxis = new CategoryAxis() - +chart.PrimaryAxis = new CategoryAxis() { - ShowLabelBorder = true, - - MultiLevelLabelsBorderType = BorderType.WithoutTopAndBottomBorder - + ShowLabelBorder = true, + MultiLevelLabelsBorderType = BorderType.WithoutTopAndBottomBorder }; - ChartMultiLevelLabel label1 = new ChartMultiLevelLabel() - { - - Start = -0.5, - - End = 2.5, - - Text = "Quarter 1", - + Start = -0.5, + End = 2.5, + Text = "Quarter 1", }; - chart.PrimaryAxis.MultiLevelLabels.Add(label1); - ChartMultiLevelLabel label2 = new ChartMultiLevelLabel() - { - Start = 2.5, - End = 5.5, - Text = "Quarter 2", - }; - chart.PrimaryAxis.MultiLevelLabels.Add(label2); - ChartMultiLevelLabel label3 = new ChartMultiLevelLabel() - { - Start = 5.5, - End = 8.5, - Text = "Quarter 3", - }; - chart.PrimaryAxis.MultiLevelLabels.Add(label3); - ChartMultiLevelLabel label4 = new ChartMultiLevelLabel() - { - Start = 8.5, - - End = 11.5, - - Text = "Quarter 4", + Start = 8.5, + End = 11.5, + Text = "Quarter 4", }; - chart.PrimaryAxis.MultiLevelLabels.Add(label4); - chart.SecondaryAxis = new NumericalAxis() - { - ShowLabelBorder = true, - - MultiLevelLabelsBorderType = BorderType.WithoutTopAndBottomBorder - + MultiLevelLabelsBorderType = BorderType.WithoutTopAndBottomBorder }; - ChartMultiLevelLabel label5 = new ChartMultiLevelLabel() - { - - Start = 32, - - End = 36, - - Text = "Low", - + Start = 32, + End = 36, + Text = "Low", }; - chart.SecondaryAxis.MultiLevelLabels.Add(label5); - ChartMultiLevelLabel label6 = new ChartMultiLevelLabel() - { Start = 36, - End = 42, - Text = "Medium", }; - chart.SecondaryAxis.MultiLevelLabels.Add(label6); - ChartMultiLevelLabel label7 = new ChartMultiLevelLabel() - { - Start = 42, - - End = 48, - - Text = "High", + Start = 42, + End = 48, + Text = "High", }; - chart.SecondaryAxis.MultiLevelLabels.Add(label7); - {% endhighlight %} - {% endtabs %} - ![WPF Chart displays Axis Border Label](Axis_images/wpf-chart-multi-axis-label-border.png) - -**Text** **Customization** - +**Text Customization** [`ChartMultiLevelLabel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartMultiLevelLabel.html) text can be customized with its [`FontSize`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartMultiLevelLabel.html#Syncfusion_UI_Xaml_Charts_ChartMultiLevelLabel_FontSize), [`FontFamily`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartMultiLevelLabel.html#Syncfusion_UI_Xaml_Charts_ChartMultiLevelLabel_FontFamily) and [`Foreground`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartMultiLevelLabel.html#Syncfusion_UI_Xaml_Charts_ChartMultiLevelLabel_Foreground) properties. It is shown in following code example. - {% tabs %} - {% highlight xaml %} - - - - + - - - - - {% endhighlight %} - {% highlight c# %} - -chart.PrimaryAxis = new CategoryAxis() - +chart.PrimaryAxis = new CategoryAxis() { - ShowLabelBorder = true, + ShowLabelBorder = true, }; - ChartMultiLevelLabel label = new ChartMultiLevelLabel() - { - Start = -0.5, - End = 11.5, - Text = "Year - 2016", - Foreground = new SolidColorBrush(Colors.Blue), - FontSize = 14, - FontFamily = new FontFamily("Algerian") - }; - chart.PrimaryAxis.MultiLevelLabels.Add(label); - {% endhighlight %} - {% endtabs %} - ![Customizing Multi-level Axis Labels Text in WPF Chart](Axis_images/wpf-chart-multilabel-text-customization.png) - -**Label** **Alignment** - +**Label Alignment** The text of [`ChartMultiLevelLabel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartMultiLevelLabel.html) can be aligned with its [`LabelAlignment`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartMultiLevelLabel.html#Syncfusion_UI_Xaml_Charts_ChartMultiLevelLabel_LabelAlignment) property. The default value of [`LabelAlignment`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartMultiLevelLabel.html#Syncfusion_UI_Xaml_Charts_ChartMultiLevelLabel_LabelAlignment) property is Center. **Center** - {% tabs %} - {% highlight xaml %} - - - - + - - - - - - - - - - - - - - - - - {% endhighlight %} - {% highlight c# %} - -chart.PrimaryAxis = new CategoryAxis() - +chart.PrimaryAxis = new CategoryAxis() { - ShowLabelBorder = true, + ShowLabelBorder = true, }; - ChartMultiLevelLabel label1 = new ChartMultiLevelLabel() - { - - Start = -0.5, - - End = 2.5, - - Text = "Quarter 1", - + Start = -0.5, + End = 2.5, + Text = "Quarter 1", }; - chart.PrimaryAxis.MultiLevelLabels.Add(label1); - ChartMultiLevelLabel label2 = new ChartMultiLevelLabel() - { - Start = 2.5, - End = 5.5, - Text = "Quarter 2" - }; - chart.PrimaryAxis.MultiLevelLabels.Add(label2); - ChartMultiLevelLabel label3 = new ChartMultiLevelLabel() - { - Start = 5.5, - End = 8.5, - Text = "Quarter 3" - }; - chart.PrimaryAxis.MultiLevelLabels.Add(label3); - ChartMultiLevelLabel label4 = new ChartMultiLevelLabel() - { - Start = 8.5, - - End = 11.5, - - Text = "Quarter 4" - + Start = 8.5, + End = 11.5, + Text = "Quarter 4" }; - chart.PrimaryAxis.MultiLevelLabels.Add(label4); - chart.SecondaryAxis = new NumericalAxis() - { - ShowLabelBorder = true, + ShowLabelBorder = true, }; - ChartMultiLevelLabel label5 = new ChartMultiLevelLabel() - { - - Start = 32, - - End = 36, - - Text = "Low" - + Start = 32, + End = 36, + Text = "Low" }; - chart.SecondaryAxis.MultiLevelLabels.Add(label5); - ChartMultiLevelLabel label6 = new ChartMultiLevelLabel() - { Start = 36, - End = 42, - Text = "Medium" }; - chart.SecondaryAxis.MultiLevelLabels.Add(label6); - ChartMultiLevelLabel label7 = new ChartMultiLevelLabel() - { - Start = 42, - - End = 48, - - Text = "High" + Start = 42, + End = 48, + Text = "High" }; - chart.SecondaryAxis.MultiLevelLabels.Add(label7); - {% endhighlight %} - {% endtabs %} - ![Changing Multi-level Axis Label Alignment in WPF Chart](Axis_images/wpf-chart-multilabel-axis-alignment.png) - **Near** - {% tabs %} - {% highlight xaml %} - - - - - - - - - - - - + + + + - - - - - - - - - - - - + + + - - - {% endhighlight %} - {% highlight c# %} - -chart.PrimaryAxis = new CategoryAxis() - +chart.PrimaryAxis = new CategoryAxis() { - ShowLabelBorder = true, + ShowLabelBorder = true, }; - ChartMultiLevelLabel label1 = new ChartMultiLevelLabel() - { - - Start = -0.5, - - End = 2.5, - - Text = "Quarter 1", - - LabelAlignment = LabelAlignment.Near - + Start = -0.5, + End = 2.5, + Text = "Quarter 1", + LabelAlignment = LabelAlignment.Near }; - chart.PrimaryAxis.MultiLevelLabels.Add(label1); - ChartMultiLevelLabel label2 = new ChartMultiLevelLabel() - { - Start = 2.5, - End = 5.5, - Text = "Quarter 2", - LabelAlignment = LabelAlignment.Near - }; - chart.PrimaryAxis.MultiLevelLabels.Add(label2); - ChartMultiLevelLabel label3 = new ChartMultiLevelLabel() - { - Start = 5.5, - End = 8.5, - Text = "Quarter 3", - LabelAlignment = LabelAlignment.Near - }; - chart.PrimaryAxis.MultiLevelLabels.Add(label3); - ChartMultiLevelLabel label4 = new ChartMultiLevelLabel() - { - Start = 8.5, - - End = 11.5, - - Text = "Quarter 4", - - LabelAlignment = LabelAlignment.Near - + Start = 8.5, + End = 11.5, + Text = "Quarter 4", + LabelAlignment = LabelAlignment.Near }; - chart.PrimaryAxis.MultiLevelLabels.Add(label4); - chart.SecondaryAxis = new NumericalAxis() - -{ +{ ShowLabelBorder = true, }; - ChartMultiLevelLabel label5 = new ChartMultiLevelLabel() - { - - Start = 32, - - End = 36, - - Text = "Low", - - LabelAlignment = LabelAlignment.Near - + Start = 32, + End = 36, + Text = "Low", + LabelAlignment = LabelAlignment.Near }; - chart.SecondaryAxis.MultiLevelLabels.Add(label5); - ChartMultiLevelLabel label6 = new ChartMultiLevelLabel() - { Start = 36, - End = 42, - Text = "Medium", - LabelAlignment = LabelAlignment.Near }; - chart.SecondaryAxis.MultiLevelLabels.Add(label6); - ChartMultiLevelLabel label7 = new ChartMultiLevelLabel() - { - Start = 42, - - End = 48, - - Text = "High", - - LabelAlignment = LabelAlignment.Near + Start = 42, + End = 48, + Text = "High", + LabelAlignment = LabelAlignment.Near }; - chart.SecondaryAxis.MultiLevelLabels.Add(label7); - {% endhighlight %} - {% endtabs %} - ![Changing Multi-level axis label Alignment in WPF Chart](Axis_images/wpf-chart-multilabel-with-near-alignment.png) - **Far** - {% tabs %} - {% highlight xaml %} - - - - - - - - - - - - - - - - - - - - {% endhighlight %} - {% highlight c# %} - -chart.PrimaryAxis = new CategoryAxis() - +chart.PrimaryAxis = new CategoryAxis() { - ShowLabelBorder = true, + ShowLabelBorder = true, }; - ChartMultiLevelLabel label1 = new ChartMultiLevelLabel() - { - - Start = -0.5, - - End = 2.5, - - Text = "Quarter 1", - - LabelAlignment = LabelAlignment.Near - + Start = -0.5, + End = 2.5, + Text = "Quarter 1", + LabelAlignment = LabelAlignment.Far }; - chart.PrimaryAxis.MultiLevelLabels.Add(label1); - ChartMultiLevelLabel label2 = new ChartMultiLevelLabel() - { - Start = 2.5, - End = 5.5, - Text = "Quarter 2", - - LabelAlignment = LabelAlignment.Near - + LabelAlignment = LabelAlignment.Far }; - chart.PrimaryAxis.MultiLevelLabels.Add(label2); - ChartMultiLevelLabel label3 = new ChartMultiLevelLabel() - { - Start = 5.5, - End = 8.5, - Text = "Quarter 3", - - LabelAlignment = LabelAlignment.Near - + LabelAlignment = LabelAlignment.Far }; - chart.PrimaryAxis.MultiLevelLabels.Add(label3); - ChartMultiLevelLabel label4 = new ChartMultiLevelLabel() - { - Start = 8.5, - - End = 11.5, - - Text = "Quarter 4", - - LabelAlignment = LabelAlignment.Near - + Start = 8.5, + End = 11.5, + Text = "Quarter 4", + LabelAlignment = LabelAlignment.Far }; - chart.PrimaryAxis.MultiLevelLabels.Add(label4); - chart.SecondaryAxis = new NumericalAxis() - { - ShowLabelBorder = true, + ShowLabelBorder = true, }; - ChartMultiLevelLabel label5 = new ChartMultiLevelLabel() - { - - Start = 32, - - End = 36, - - Text = "Low", - - LabelAlignment = LabelAlignment.Near - + Start = 32, + End = 36, + Text = "Low", + LabelAlignment = LabelAlignment.Far }; - chart.SecondaryAxis.MultiLevelLabels.Add(label5); - ChartMultiLevelLabel label6 = new ChartMultiLevelLabel() - { Start = 36, - End = 42, - Text = "Medium", - - LabelAlignment = LabelAlignment.Near + LabelAlignment = LabelAlignment.Far }; - chart.SecondaryAxis.MultiLevelLabels.Add(label6); - ChartMultiLevelLabel label7 = new ChartMultiLevelLabel() - { - Start = 42, - - End = 48, - - Text = "High", - - LabelAlignment = LabelAlignment.Near + Start = 42, + End = 48, + Text = "High", + LabelAlignment = LabelAlignment.Far }; - chart.SecondaryAxis.MultiLevelLabels.Add(label7); - {% endhighlight %} - {% endtabs %} - ![Changing Multi-level axis label Alignment in WPF Chart](Axis_images/wpf-chart-multilabel-with-far-alignment.png) The text of [`ChartMultiLevelLabel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartMultiLevelLabel.html) will be trimmed automatically when the text width exceeds the width of [`ChartMultiLevelLabel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartMultiLevelLabel.html), and it is shown below. {% tabs %} - {% highlight xaml %} - - - - - - - - - - {% endhighlight %} - {% highlight c# %} - chart.SecondaryAxis = new NumericalAxis() - { - ShowLabelBorder = true, + ShowLabelBorder = true, }; - ChartMultiLevelLabel label5 = new ChartMultiLevelLabel() - { - - Start = 32, - - End = 36, - - Text = "Low Temperature" + Start = 32, + End = 36, + Text = "Low Temperature" }; - chart.SecondaryAxis.MultiLevelLabels.Add(label5); - ChartMultiLevelLabel label6 = new ChartMultiLevelLabel() - { - Start = 36, - - End = 42, - - Text = "Medium Temperature" - + Start = 36, + End = 42, + Text = "Medium Temperature" }; - chart.SecondaryAxis.MultiLevelLabels.Add(label6); - ChartMultiLevelLabel label7 = new ChartMultiLevelLabel() - { - - Start = 42, - - End = 48, - - Text = "High Temperature" - - }; - - chart.SecondaryAxis.MultiLevelLabels.Add(label7); - + Start = 42, + End = 48, + Text = "High Temperature" +}; +chart.SecondaryAxis.MultiLevelLabels.Add(label7); {% endhighlight %} - {% endtabs %} - ![Changing Multi-level Axis Label Alignment WPF Chart](Axis_images/wpf-chart-axis-label-alignment.png) - ## Events - ### ActualRangeChanged - The [`ActualRangeChanged`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_ActualRangeChanged) event occurs when an axis range is changed. This argument contains the following information. - * [`ActualMinimum`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ActualRangeChangedEventArgs.html#Syncfusion_UI_Xaml_Charts_ActualRangeChangedEventArgs_ActualMinimum) - Gets or sets the actual minimum value of axis. * [`ActualMaximum`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ActualRangeChangedEventArgs.html#Syncfusion_UI_Xaml_Charts_ActualRangeChangedEventArgs_ActualMaximum) - Gets or sets the actual maximum value of axis. * [`VisibleMinimum`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ActualRangeChangedEventArgs.html#Syncfusion_UI_Xaml_Charts_ActualRangeChangedEventArgs_VisibleMinimum) - Gets or sets the visible minimum value of axis. @@ -5509,23 +3394,17 @@ The [`ActualRangeChanged`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml * [`ActualInterval`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ActualRangeChangedEventArgs.html#Syncfusion_UI_Xaml_Charts_ActualRangeChangedEventArgs_ActualInterval) - Gets the actual interval of axis. ### LabelCreated - The [`LabelCreated`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_LabelCreated) event occurs when the axis label is created. This argument contains [`AxisLabel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.LabelCreatedEventArgs.html#Syncfusion_UI_Xaml_Charts_LabelCreatedEventArgs_AxisLabel) of [`ChartAxisLabel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxisLabel.html), which contains the following properties. - * [`LabelContent`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxisLabel.html#Syncfusion_UI_Xaml_Charts_ChartAxisLabel_LabelContent) - Gets or sets the content of label. * [`Position`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxisLabel.html#Syncfusion_UI_Xaml_Charts_ChartAxisLabel_Position) - Gets or sets the position of label. ### AxisBoundsChanged - The [`AxisBoundsChanged`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_AxisBoundsChanged) event occurs when the bounds of the axis are changed. This argument contains the following information. - * [`NewBounds`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxisBoundsEventArgs.html#Syncfusion_UI_Xaml_Charts_ChartAxisBoundsEventArgs_NewBounds) - Gets the new axis bounds. * [`OldBounds`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxisBoundsEventArgs.html#Syncfusion_UI_Xaml_Charts_ChartAxisBoundsEventArgs_OldBounds) - Gets the old axis bounds. ### LabelClicked - The [`LabelClicked`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxisBase2D.html#Syncfusion_UI_Xaml_Charts_ChartAxisBase2D_LabelClicked) event is triggered when labels are clicked. Supports for 2D axis. The argument contains [`AxisLabel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.AxisLabelClickedEventArgs.html#Syncfusion_UI_Xaml_Charts_AxisLabelClickedEventArgs_AxisLabel) of [`ChartAxisLabel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxisLabel.html), which contains the following properties. - * [`LabelContent`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxisLabel.html#Syncfusion_UI_Xaml_Charts_ChartAxisLabel_LabelContent) - Gets the content of label. * [`Position`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxisLabel.html#Syncfusion_UI_Xaml_Charts_ChartAxisLabel_Position) - Gets the position of label. * [`PrefixLabelTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxisLabel.html#Syncfusion_UI_Xaml_Charts_ChartAxisLabel_PrefixLabelTemplate) - Gets the prefix template of label. @@ -5534,29 +3413,16 @@ The [`LabelClicked`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Chart 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. ## See also - [`How to get axis range in chart`](https://support.syncfusion.com/kb/article/9439/how-can-i-retrieve-the-charts-axis-range-in-wpf) - [`How to wrap the multi-level axis label's text in WPF Chart`](https://support.syncfusion.com/kb/article/8937/how-to-wrap-the-multi-level-axis-labels-text-in-wpf-charts) - [`How to use the DateTimeAxis as SecondaryAxis in WPF Chart`](https://support.syncfusion.com/kb/article/8435/how-to-use-the-datetimeaxis-as-secondaryaxis-in-wpf-sfchart) - [`How to apply the custom labels in WPF Logarithmic Axis`](https://support.syncfusion.com/kb/article/8370/how-to-apply-the-custom-labels-in-wpf-charts-logarithmicaxis) - [`How to customize label formats of date-time axis during the interval transitions`](https://support.syncfusion.com/kb/article/6378/how-to-customize-the-label-formats-of-date-time-axis-during-interval-transitions-in-wpf) - [`How to rotate axis label in the Chart`](https://support.syncfusion.com/kb/article/4968/how-to-rotate-axis-label-in-the-wpf-chart-sfchart) - [`How to hide axis in chart`](https://support.syncfusion.com/kb/article/4919/how-to-hide-axis-in-wpf-chart-sfchart) - [`How to position the primary and secondary axes as the center of chart`](https://support.syncfusion.com/kb/article/3829/how-to-set-the-position-of-primary-and-secondary-axes-of-wpf-sfchart-) - [`How to display the axis labels in a particular format`](https://support.syncfusion.com/kb/article/3503/how-to-display-axis-labels-in-a-particular-format-of-wpf-chart) - [`How to display the axis labels for all datapoints`](https://support.syncfusion.com/kb/article/3172/how-to-display-the-axis-labels-for-all-datapoints-in-wpf-chart-sfchart) - [`How to define ticker labels of custom axis`](https://support.syncfusion.com/kb/article/2776/how-to-define-ticker-labels-of-custom-axis-in-wpf-chart-sfchart) - [`How to display striplines in DateTimeAxis of WPF Chart`](https://support.syncfusion.com/kb/article/9199/how-to-display-striplines-in-datetimeaxis-of-wpf-chart) - -[`How to set the custom labels with auto range for axis`](https://support.syncfusion.com/kb/article/5497/how-to-set-the-custom-labels-with-auto-range-for-axis-in-wpf-chart-sfchart) +[`How to set the custom labels with auto range for axis`](https://support.syncfusion.com/kb/article/5497/how-to-set-the-custom-labels-with-auto-range-for-axis-in-wpf-chart-sfchart) \ No newline at end of file diff --git a/wpf/Charts/CodedUI.md b/wpf/Charts/CodedUI.md index 3d31692a86..eae69ab6e5 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. +N> 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 +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 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..a1ca308553 100644 --- a/wpf/Charts/FastChart/Fast-Series.md +++ b/wpf/Charts/FastChart/Fast-Series.md @@ -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..5daf49f45a 100644 --- a/wpf/Charts/FastChart/FastCharts.md +++ b/wpf/Charts/FastChart/FastCharts.md @@ -7,12 +7,12 @@ 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. +* **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..a2b0a17aa2 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..1dd5240163 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,6 +1,6 @@ --- layout: post -title: Add custom labels to track ball behavior| SfChart | Wpf | Syncfusion +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 @@ -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..aa63768826 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,28 @@ --- 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 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. +//. . . +// 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..c884e5ca2d 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..7ea21aa1b9 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 %} - - - - + + - -