From 8707e53849b8ae0fdc6356837406dcfce3a25125 Mon Sep 17 00:00:00 2001 From: Harsha Date: Wed, 21 May 2025 06:09:18 +0530 Subject: [PATCH 1/3] checked UG content for axis folder --- .../Axis/AutoScrollingDelta.md | 10 +++---- .../Cartesian-Charts/Axis/Axislabels.md | 30 ++++++++----------- .../Cartesian-Charts/Axis/Axisline.md | 8 +++-- .../Cartesian-Charts/Axis/Gridlines.md | 19 +++++++----- maui-toolkit/Cartesian-Charts/Axis/Padding.md | 12 ++++---- .../Cartesian-Charts/Axis/Range-padding.md | 16 +++++----- .../Cartesian-Charts/Axis/Ticklines.md | 12 ++++---- maui-toolkit/Cartesian-Charts/Axis/Title.md | 8 ++--- maui-toolkit/Cartesian-Charts/Overview.md | 18 +++++------ 9 files changed, 68 insertions(+), 65 deletions(-) diff --git a/maui-toolkit/Cartesian-Charts/Axis/AutoScrollingDelta.md b/maui-toolkit/Cartesian-Charts/Axis/AutoScrollingDelta.md index 2e069213..1a7b0dbe 100644 --- a/maui-toolkit/Cartesian-Charts/Axis/AutoScrollingDelta.md +++ b/maui-toolkit/Cartesian-Charts/Axis/AutoScrollingDelta.md @@ -10,9 +10,9 @@ keywords: .net maui chart auto scrolling, .net maui chart scrolling customizatio # Auto scrolling in .NET MAUI Chart -The auto-scrolling of [SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html) ensures that the specified range of data is always visible in the chart. It always shows the recently added data points at the end, and scrolling will be reset to the end of the range whenever a new point is added. The [AutoScrollingDelta](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_AutoScrollingDelta) property of the chart axis can be used to set the number of data points to be always visible in the chart. +The auto-scrolling feature of [SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html) ensures that a specified range of data is always visible in the chart. It continuously displays the most recently added data points at the end, and scrolling resets to the end of the range whenever a new point is added. The [AutoScrollingDelta](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_AutoScrollingDelta) property of the chart axis can be used to set the number of data points to always remain visible in the chart. -By adding [ChartZoomPanBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartZoomPanBehavior.html) to the chart, you can scroll to see the previous data points. +By adding [ChartZoomPanBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartZoomPanBehavior.html) to the chart, you can scroll to view previous data points. {% tabs %} @@ -56,7 +56,7 @@ this.Content = chart; ## AutoScrollingMode -[AutoScrollingMode](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_AutoScrollingMode) property can be used to determine whether the axis should be scrolled from start position or end position. The default value of [AutoScrollingMode](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_AutoScrollingMode) is `End`. +The [AutoScrollingMode](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_AutoScrollingMode) property determines whether the axis should scroll from the start position or end position. The default value of [AutoScrollingMode](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_AutoScrollingMode) is `End`. {% tabs %} @@ -92,7 +92,7 @@ this.Content = chart; ## AutoScrollingDeltaType -In [DateTimeAxis](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimeAxis.html), you can apply auto scrolling delta value in [Years](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimeIntervalType.html#Syncfusion_Maui_Toolkit_Charts_DateTimeIntervalType_Years), [Months](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimeIntervalType.html#Syncfusion_Maui_Toolkit_Charts_DateTimeIntervalType_Months), [Days](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimeIntervalType.html#Syncfusion_Maui_Toolkit_Charts_DateTimeIntervalType_Days), [Hours](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimeIntervalType.html#Syncfusion_Maui_Toolkit_Charts_DateTimeIntervalType_Hours), [Minutes](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimeIntervalType.html#Syncfusion_Maui_Toolkit_Charts_DateTimeIntervalType_Minutes), [Seconds](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimeIntervalType.html#Syncfusion_Maui_Toolkit_Charts_DateTimeIntervalType_Seconds) and [Milliseconds](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimeIntervalType.html#Syncfusion_Maui_Toolkit_Charts_DateTimeIntervalType_Milliseconds) by setting [AutoScrollingDeltaType](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimeAxis.html#Syncfusion_Maui_Toolkit_Charts_DateTimeAxis_AutoScrollingDeltaType) property. The default value of this property is [Auto](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimeIntervalType.html#Syncfusion_Maui_Toolkit_Charts_DateTimeIntervalType_Auto), and the delta will be calculated automatically based on range. +In [DateTimeAxis](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimeAxis.html), you can apply auto scrolling delta values in [Years](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimeIntervalType.html#Syncfusion_Maui_Toolkit_Charts_DateTimeIntervalType_Years), [Months](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimeIntervalType.html#Syncfusion_Maui_Toolkit_Charts_DateTimeIntervalType_Months), [Days](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimeIntervalType.html#Syncfusion_Maui_Toolkit_Charts_DateTimeIntervalType_Days), [Hours](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimeIntervalType.html#Syncfusion_Maui_Toolkit_Charts_DateTimeIntervalType_Hours), [Minutes](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimeIntervalType.html#Syncfusion_Maui_Toolkit_Charts_DateTimeIntervalType_Minutes), [Seconds](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimeIntervalType.html#Syncfusion_Maui_Toolkit_Charts_DateTimeIntervalType_Seconds), and [Milliseconds](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimeIntervalType.html#Syncfusion_Maui_Toolkit_Charts_DateTimeIntervalType_Milliseconds) by setting the [AutoScrollingDeltaType](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimeAxis.html#Syncfusion_Maui_Toolkit_Charts_DateTimeAxis_AutoScrollingDeltaType) property. The default value of this property is [Auto](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimeIntervalType.html#Syncfusion_Maui_Toolkit_Charts_DateTimeIntervalType_Auto), and the delta will be calculated automatically based on the range. {% tabs %} @@ -115,7 +115,7 @@ SfCartesianChart chart = new SfCartesianChart(); DateTimeAxis primaryAxis = new DateTimeAxis() { AutoScrollingDelta = 3, - AutoScrollingDeltaType = DateTimeDeltaType.Days, // Setting the type of the scrolling delta to Days, meaning the axis will scroll by 3 days. + AutoScrollingDeltaType = DateTimeIntervalType.Days, // Setting the type of the scrolling delta to Days, meaning the axis will scroll by 3 days. }; chart.XAxes.Add(primaryAxis); . . . diff --git a/maui-toolkit/Cartesian-Charts/Axis/Axislabels.md b/maui-toolkit/Cartesian-Charts/Axis/Axislabels.md index c13ad3e4..db18f908 100644 --- a/maui-toolkit/Cartesian-Charts/Axis/Axislabels.md +++ b/maui-toolkit/Cartesian-Charts/Axis/Axislabels.md @@ -1,7 +1,7 @@ --- layout: post title: Axis labels in .NET MAUI Chart control | Syncfusion -description: Learn here all about axis labels and its customization in Syncfusion® .NET MAUI Chart (SfCartesianChart) control. +description: Learn here all about axis labels and their customization in Syncfusion® .NET MAUI Chart (SfCartesianChart) control. platform: maui-toolkit control: SfCartesianChart documentation: ug @@ -10,11 +10,11 @@ keywords: .net maui chart axis labels, axis labels customization .net maui, sync # Axis labels in .NET MAUI Chart -Axis labels are used to show the units or measures or category value of axis to visualize the data user friendly. It will be generated based on the range and the values binded to [XBindingPath](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_XBindingPath) or [YBindingPath](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.XYDataSeries.html#Syncfusion_Maui_Toolkit_Charts_XYDataSeries_YBindingPath) properties of series. +Axis labels are used to display units, measurements, or category values on an axis to help users visualize data more effectively. Labels are generated based on the axis range and the values bound to the [XBindingPath](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_XBindingPath) or [YBindingPath](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.XYDataSeries.html#Syncfusion_Maui_Toolkit_Charts_XYDataSeries_YBindingPath) properties of the series. ## Positioning the labels -The [LabelsPosition](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_LabelsPosition) property is used to position the axis labels inside or outside the chart area. [LabelsPosition](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_LabelsPosition) property default value is `AxisElementPosition.Outside`. +The [LabelsPosition](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_LabelsPosition) property is used to position axis labels inside or outside the chart area. The default value is `AxisElementPosition.Outside`. {% tabs %} @@ -31,7 +31,6 @@ The [LabelsPosition](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui - {% endhighlight %} {% highlight c# %} @@ -87,7 +86,7 @@ this.Content = chart; ## Label customization -The [LabelStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_LabelStyle) property of axis provides options to customize the font-family, font-size, font-attributes and text color of axis labels. The axis labels can be customized using following properties: +The [LabelStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_LabelStyle) property of the axis provides options to customize the font-family, font-size, font-attributes, and text color of axis labels. The axis labels can be customized using the following properties: * `Background` - Gets or sets the background color of the labels. * `CornerRadius` - Gets or sets a value that defines the rounded corners for labels. @@ -103,17 +102,16 @@ The [LabelStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Too * `MaxWidth` - Gets or sets the wrap width of the axis labels. * `WrappedLabelAlignment` - Gets or sets the horizontal rendering position of the wrapped axis labels. The default value is `Start`, other available values are `Center` and `End`. - ## Edge Labels Drawing Mode -Chart axis provides support to customize the rendering position of the edge labels using the [EdgeLabelsDrawingMode](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_EdgeLabelsDrawingMode) property. [EdgeLabelsDrawingMode](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_EdgeLabelsDrawingMode) property default value is `Shift`. +Chart axis provides support to customize the rendering position of edge labels using the [EdgeLabelsDrawingMode](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_EdgeLabelsDrawingMode) property. The default value is `Shift`. | Action | Description | |--|--| | Center | Indicates that the edge label should appear at the center of its GridLines. | | Fit | Indicates that the edge labels should be fit within the area of SfCartesianChart. | -| Hide | Indicates that the edge labels will be hidden | -| Shift | Indicates that edge labels should be shifted to either left or right so that it comes within the area of Chart. | +| Hide | Indicates that the edge labels will be hidden. | +| Shift | Indicates that edge labels should be shifted to either left or right so that they come within the area of Chart. | {% tabs %} @@ -147,11 +145,11 @@ this.Content = chart; ## Edge Labels Visibility -The visibility of the edge labels of the axis can be controlled using the [EdgeLabelsVisibilityMode](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RangeAxisBase.html#Syncfusion_Maui_Toolkit_Charts_RangeAxisBase_EdgeLabelsVisibilityMode) property. The default value of [EdgeLabelsVisibilityMode](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RangeAxisBase.html#Syncfusion_Maui_Toolkit_Charts_RangeAxisBase_EdgeLabelsVisibilityMode) is `Default`, which displays the edge label based on auto interval calculations. +The visibility of the edge labels of the axis can be controlled using the [EdgeLabelsVisibilityMode](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RangeAxisBase.html#Syncfusion_Maui_Toolkit_Charts_RangeAxisBase_EdgeLabelsVisibilityMode) property. The default value is `Default`, which displays the edge label based on auto interval calculations. **Always Visible** -`AlwaysVisible` option in [EdgeLabelsVisibilityMode](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RangeAxisBase.html#Syncfusion_Maui_Toolkit_Charts_RangeAxisBase_EdgeLabelsVisibilityMode) is used to view the edge labels even in chart area zoomed state. +The `AlwaysVisible` option in [EdgeLabelsVisibilityMode](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RangeAxisBase.html#Syncfusion_Maui_Toolkit_Charts_RangeAxisBase_EdgeLabelsVisibilityMode) is used to view the edge labels even when the chart area is zoomed. {% tabs %} @@ -172,7 +170,6 @@ SfCartesianChart chart = new SfCartesianChart(); . . . NumericalAxis primaryAxis = new NumericalAxis() { - // Set the edge labels to always be visible, ensuring they don't get clipped or hidden. EdgeLabelsVisibilityMode = EdgeLabelsVisibilityMode.AlwaysVisible }; chart.XAxes.Add(primaryAxis); @@ -184,7 +181,7 @@ this.Content = chart; **Visible** -`Visible` option is used to display the edge labels irrespective of the auto interval calculation until zooming (i.e., in normal state). +The `Visible` option is used to display the edge labels irrespective of the auto interval calculation until zooming (i.e., in normal state). {% tabs %} @@ -216,7 +213,7 @@ this.Content = chart; ## Smart Axis Labels -Axis labels may overlap with each other based on chart dimensions and label size. The [LabelsIntersectAction](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_LabelsIntersectAction) property of axis is used to avoid overlapping of axis labels. The default value of the LabelsIntersectAction is `Hide`, other available values are `MultipleRows`, `None`, and `Wrap`. +Axis labels may overlap with each other based on chart dimensions and label size. The [LabelsIntersectAction](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_LabelsIntersectAction) property of axis is used to avoid overlapping of axis labels. The default value is `Hide`, other available values are `MultipleRows`, `None`, and `Wrap`. {% tabs %} @@ -237,7 +234,6 @@ SfCartesianChart chart = new SfCartesianChart(); . . . CategoryAxis primaryAxis = new CategoryAxis() { - // Set the labels intersect action to "MultipleRows", allowing labels to be positioned on multiple rows to avoid overlap LabelsIntersectAction = AxisLabelsIntersectAction.MultipleRows, }; chart.XAxes.Add(primaryAxis); @@ -247,6 +243,6 @@ this.Content = chart; {% endtabs %} -![Smart axis lable support in .NET MAUI SfCartesianChart.](axis_images/maui_chart_smart_axis_labels.png) +![Smart axis label support in .NET MAUI SfCartesianChart.](axis_images/maui_chart_smart_axis_labels.png) -N> If the [LabelsIntersectAction](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_LabelsIntersectAction) is set to Wrap, we should set the width of the wrap using the [MaxWidth](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxisLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartAxisLabelStyle_MaxWidth) property. We can align the wrapped axis label using the [WrappedLabelAlignment](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxisLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartAxisLabelStyle_WrappedLabelAlignment) property. +N> If the [LabelsIntersectAction](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_LabelsIntersectAction) is set to Wrap, you should set the width of the wrap using the [MaxWidth](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxisLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartAxisLabelStyle_MaxWidth) property. You can align the wrapped axis label using the [WrappedLabelAlignment](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxisLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartAxisLabelStyle_WrappedLabelAlignment) property. diff --git a/maui-toolkit/Cartesian-Charts/Axis/Axisline.md b/maui-toolkit/Cartesian-Charts/Axis/Axisline.md index 0ed43787..666420ea 100644 --- a/maui-toolkit/Cartesian-Charts/Axis/Axisline.md +++ b/maui-toolkit/Cartesian-Charts/Axis/Axisline.md @@ -12,7 +12,7 @@ keywords: .net maui chart axis line, .net maui chart axis customization, .net ma ## Customization -Cartesian chart axis provides support to customize the style of axis line by defining the [AxisLineStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_AxisLineStyle) property as shown in the below code snippet. +Cartesian chart axis provides support to customize the style of the axis line by defining the [AxisLineStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_AxisLineStyle) property as shown in the code snippet below. {% tabs %} @@ -48,6 +48,7 @@ primaryAxis.AxisLineStyle = axisLineStyle; // Apply the defined axis line style chart.XAxes.Add(primaryAxis); . . . this.Content = chart; + {% endhighlight %} {% endtabs %} @@ -56,7 +57,7 @@ this.Content = chart; ## Offset -The padding to the axis line is defined by using the [AxisLineOffset](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_AxisLineOffset) property. +The padding to the axis line can be defined using the [AxisLineOffset](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_AxisLineOffset) property. {% tabs %} @@ -92,8 +93,9 @@ primaryAxis.AxisLineStyle = axisLineStyle; chart.XAxes.Add(primaryAxis); . . . this.Content = chart; + {% endhighlight %} {% endtabs %} -![Padding support for axis line in WinUI](Axis_images/maui_chart_axis_line_offset.jpg) \ No newline at end of file +![Padding support for axis line in .NET MAUI Chart](Axis_images/maui_chart_axis_line_offset.jpg) \ No newline at end of file diff --git a/maui-toolkit/Cartesian-Charts/Axis/Gridlines.md b/maui-toolkit/Cartesian-Charts/Axis/Gridlines.md index 5b19bd6e..487dcd26 100644 --- a/maui-toolkit/Cartesian-Charts/Axis/Gridlines.md +++ b/maui-toolkit/Cartesian-Charts/Axis/Gridlines.md @@ -1,7 +1,7 @@ --- layout: post title: Axis grid lines in .NET MAUI Chart control | Syncfusion -description: Learn here all about the chart axis grid lines and its customization in syncfusion® .NET MAUI Chart(SfCartesianChart). +description: Learn here all about the chart axis grid lines and their customization in Syncfusion® .NET MAUI Chart (SfCartesianChart). platform: maui-toolkit control: SfCartesianChart documentation: ug @@ -12,7 +12,7 @@ keywords: .net maui chart grid lines, .net maui chart grid customization, syncfu ## Major Grid Lines -By default, major gridlines are automatically added to the [ChartAxis](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html) in its defined intervals. The visibility of the major gridlines can be controlled using the [ShowMajorGridLines](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_ShowMajorGridLines) property. The default value of [ShowMajorGridLines](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_ShowMajorGridLines) is `true`. +By default, major gridlines are automatically added to the [ChartAxis](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html) at its defined intervals. The visibility of the major gridlines can be controlled using the [ShowMajorGridLines](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_ShowMajorGridLines) property. The default value of [ShowMajorGridLines](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_ShowMajorGridLines) is `true`. {% tabs %} @@ -42,6 +42,7 @@ NumericalAxis secondaryAxis = new NumericalAxis(); chart.YAxes.Add(secondaryAxis); . . . this.Content = chart; + {% endhighlight %} {% endtabs %} @@ -55,6 +56,7 @@ The [MajorGridLineStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion. {% tabs %} {% highlight xaml %} + . . . @@ -104,6 +106,7 @@ NumericalAxis secondaryAxis = new NumericalAxis(); chart.YAxes.Add(secondaryAxis); this.Content = chart; + {% endhighlight %} {% endtabs %} @@ -112,7 +115,7 @@ this.Content = chart; ## Minor Grid Lines -Minor gridlines will be added automatically when the small tick lines is defined and using the [MinorTicksPerInterval](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RangeAxisBase.html#Syncfusion_Maui_Toolkit_Charts_RangeAxisBase_MinorTicksPerInterval) property of chart axis. The visibility of the minor gridlines can be controlled using the [ShowMinorGridLines](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RangeAxisBase.html#Syncfusion_Maui_Toolkit_Charts_RangeAxisBase_ShowMinorGridLines) property. The default value of [ShowMinorGridLines](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RangeAxisBase.html#Syncfusion_Maui_Toolkit_Charts_RangeAxisBase_ShowMinorGridLines) is `true`. +Minor gridlines are added automatically when small tick lines are defined using the [MinorTicksPerInterval](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RangeAxisBase.html#Syncfusion_Maui_Toolkit_Charts_RangeAxisBase_MinorTicksPerInterval) property of chart axis. The visibility of the minor gridlines can be controlled using the [ShowMinorGridLines](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RangeAxisBase.html#Syncfusion_Maui_Toolkit_Charts_RangeAxisBase_ShowMinorGridLines) property. The default value of [ShowMinorGridLines](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RangeAxisBase.html#Syncfusion_Maui_Toolkit_Charts_RangeAxisBase_ShowMinorGridLines) is `true`. {% tabs %} @@ -138,7 +141,7 @@ SfCartesianChart chart = new SfCartesianChart(); NumericalAxis primaryAxis = new NumericalAxis(); chart.XAxes.Add(primaryAxis); -chart.SecondaryAxis = new NumericalAxis() +NumericalAxis secondaryAxis = new NumericalAxis() { // Set the number of minor ticks per interval on the axis MinorTicksPerInterval = 3, @@ -146,6 +149,7 @@ chart.SecondaryAxis = new NumericalAxis() chart.YAxes.Add(secondaryAxis); . . . this.Content = chart; + {% endhighlight %} {% endtabs %} @@ -188,7 +192,7 @@ The [MinorGridLineStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion. {% highlight c# %} SfCartesianChart chart = new SfCartesianChart(); -... +. . . DoubleCollection doubleCollection = new DoubleCollection(); doubleCollection.Add(3); doubleCollection.Add(3); @@ -197,18 +201,19 @@ NumericalAxis primaryAxis = new NumericalAxis(); chart.XAxes.Add(primaryAxis); NumericalAxis secondaryAxis = new NumericalAxis() { MinorTicksPerInterval = 2 }; -// Define the style for the minor grid lines on the Y-axis. +// Define the style for the minor grid lines on the Y-axis ChartLineStyle gridLineStyle = new ChartLineStyle() { Stroke = Colors.Black, StrokeWidth = 0.8, StrokeDashArray = doubleCollection, }; -// Apply the grid line style to the minor grid lines of the secondary axis. +// Apply the grid line style to the minor grid lines of the secondary axis secondaryAxis.MinorGridLineStyle = gridLineStyle; chart.YAxes.Add(secondaryAxis); this.Content = chart; + {% endhighlight %} {% endtabs %} diff --git a/maui-toolkit/Cartesian-Charts/Axis/Padding.md b/maui-toolkit/Cartesian-Charts/Axis/Padding.md index 70db0ebb..6b108b9e 100644 --- a/maui-toolkit/Cartesian-Charts/Axis/Padding.md +++ b/maui-toolkit/Cartesian-Charts/Axis/Padding.md @@ -12,7 +12,7 @@ Keywords: .net maui chart axis padding, .net maui chart axis spacing, .net maui ## PlotOffsetStart -The [PlotOffsetStart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_PlotOffsetStart) property is used to provide padding to the axis at start position. The following code sample demonstrates the padding applied to Start position for both x and y-axes. +The [PlotOffsetStart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_PlotOffsetStart) property is used to provide padding to the axis at the start position. The following code sample demonstrates the padding applied to the start position for both x and y-axes. {% tabs %} @@ -53,11 +53,11 @@ this.Content = chart; {% endtabs %} -![PlotOffsetStart support in MAUI Chart](Axis_images/maui_chart_axis_plot-offset-start.jpg) +![PlotOffsetStart support in .NET MAUI Chart](Axis_images/maui_chart_axis_plot-offset-start.jpg) ## PlotOffsetEnd -The [PlotOffsetEnd](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_PlotOffsetEnd) property is used to provide padding to the axis at end position. The following code sample demonstrates the padding applied to end position for both x and y-axes. +The [PlotOffsetEnd](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_PlotOffsetEnd) property is used to provide padding to the axis at the end position. The following code sample demonstrates the padding applied to the end position for both x and y-axes. {% tabs %} @@ -83,13 +83,13 @@ SfCartesianChart chart = new SfCartesianChart(); . . . CategoryAxis primaryAxis = new CategoryAxis() { - PlotOffsetEnd = 30 // Set the offset at the end of the plot area for the Y-axis + PlotOffsetEnd = 30 // Set the offset at the end of the plot area for the X-axis }; chart.XAxes.Add(primaryAxis); NumericalAxis secondaryAxis = new NumericalAxis() { - PlotOffsetEnd = 30 // Set the offset at the end of the plot area for the Y-axis. + PlotOffsetEnd = 30 // Set the offset at the end of the plot area for the Y-axis }; chart.YAxes.Add(secondaryAxis); . . . @@ -98,4 +98,4 @@ this.Content = chart; {% endtabs %} -![PlotOffsetEnd support in MAUI Chart](Axis_images/maui_chart_axis_plot-offset-end.jpg) \ No newline at end of file +![PlotOffsetEnd support in .NET MAUI Chart](Axis_images/maui_chart_axis_plot-offset-end.jpg) diff --git a/maui-toolkit/Cartesian-Charts/Axis/Range-padding.md b/maui-toolkit/Cartesian-Charts/Axis/Range-padding.md index c176a94d..acd46607 100644 --- a/maui-toolkit/Cartesian-Charts/Axis/Range-padding.md +++ b/maui-toolkit/Cartesian-Charts/Axis/Range-padding.md @@ -10,7 +10,7 @@ keywords: .net maui chart axis range padding, .net maui chart range padding cust # Axis Range Padding in .NET MAUI Chart -Range padding is used to apply the minimum and maximum extremes of chart axis range by using the [RangePadding](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.NumericalAxis.html#Syncfusion_Maui_Toolkit_Charts_NumericalAxis_RangePadding) property. The [NumericalAxis](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.NumericalAxis.html) and [DateTimeAxis](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimeAxis.html) have a [RangePadding](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.NumericalAxis.html#Syncfusion_Maui_Toolkit_Charts_NumericalAxis_RangePadding) property that can be used to add padding to the range of the chart axis. +Range padding is used to adjust the minimum and maximum extremes of chart axis range by using the [RangePadding](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.NumericalAxis.html#Syncfusion_Maui_Toolkit_Charts_NumericalAxis_RangePadding) property. The [NumericalAxis](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.NumericalAxis.html) and [DateTimeAxis](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimeAxis.html) have a [RangePadding](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.NumericalAxis.html#Syncfusion_Maui_Toolkit_Charts_NumericalAxis_RangePadding) property that can be used to add padding to the range of the chart axis. ## Numerical Range Padding @@ -68,7 +68,7 @@ this.Content = chart; {% endtabs %} -![NumericalAxis range padding support in MAUI Chart](Axis_Images/maui_chart_axis_numerical-range-padding_additional.jpg) +![NumericalAxis range padding support in .NET MAUI Chart](Axis_Images/maui_chart_axis_numerical-range-padding_additional.jpg) **None** @@ -108,7 +108,7 @@ this.Content = chart; {% endtabs %} -![NumericalAxis range padding none in MAUI Chart](Axis_Images/maui_chart_axis_numerical-range-padding_none.jpg) +![NumericalAxis range padding none in .NET MAUI Chart](Axis_Images/maui_chart_axis_numerical-range-padding_none.jpg) **Round** @@ -148,7 +148,7 @@ this.Content = chart; {% endtabs %} -![NumericalAxis range padding round in MAUI Chart](Axis_Images/maui_chart_axis_numerical-range-padding_round.jpg) +![NumericalAxis range padding round in .NET MAUI Chart](Axis_Images/maui_chart_axis_numerical-range-padding_round.jpg) ## DateTime Range Padding @@ -161,7 +161,7 @@ The [RangePadding](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.T * `RoundStart` - The visible start range round to nearest interval value. * `RoundEnd` - The visible end range round to nearest interval value. * `PrependInterval` - The visible start range will be prepended with an additional interval. -* `AppendInterval` - The visible start range will be appended with an additional interval. +* `AppendInterval` - The visible end range will be appended with an additional interval. **Additional** @@ -202,7 +202,7 @@ this.Content = chart; {% endtabs %} -![DateTimeAxis range padding support in MAUI Chart](Axis_Images/maui_chart_axis_datetime-range-padding_additional.jpg) +![DateTimeAxis range padding support in .NET MAUI Chart](Axis_Images/maui_chart_axis_datetime-range-padding_additional.jpg) **None** @@ -242,7 +242,7 @@ this.Content = chart; {% endtabs %} -![DateTimeAxis range padding none in MAUI Chart](Axis_Images/maui_chart_axis_datetime-range-padding_none.jpg) +![DateTimeAxis range padding none in .NET MAUI Chart](Axis_Images/maui_chart_axis_datetime-range-padding_none.jpg) **Round** @@ -282,4 +282,4 @@ this.Content = chart; {% endtabs %} -![DateTimeAxis range padding round in MAUI Chart](Axis_Images/maui_chart_axis_datetime-range-padding_round.jpg) \ No newline at end of file +![DateTimeAxis range padding round in .NET MAUI Chart](Axis_Images/maui_chart_axis_datetime-range-padding_round.jpg) diff --git a/maui-toolkit/Cartesian-Charts/Axis/Ticklines.md b/maui-toolkit/Cartesian-Charts/Axis/Ticklines.md index 91e4f8ea..2a5e2c7b 100644 --- a/maui-toolkit/Cartesian-Charts/Axis/Ticklines.md +++ b/maui-toolkit/Cartesian-Charts/Axis/Ticklines.md @@ -10,11 +10,11 @@ keywords: .net maui chart tick lines, .net maui chart tick customization, .net m # Tick Lines in .NET MAUI Chart -Tick lines 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 small lines drawn on the axis line representing the axis labels. By default, tick lines are drawn outside of the axis. -And also minor tick lines can be added to the axis by defining the [MinorTicksPerInterval](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RangeAxisBase.html#Syncfusion_Maui_Toolkit_Charts_RangeAxisBase_MinorTicksPerInterval) property. This property will add the minor tick lines to every interval based on value. +Minor tick lines can also be added to the axis by defining the [MinorTicksPerInterval](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RangeAxisBase.html#Syncfusion_Maui_Toolkit_Charts_RangeAxisBase_MinorTicksPerInterval) property. This property adds minor tick lines to every interval based on the specified value. -N> For category axis, minor tick lines are not applicable. Since it is rendered based on index positions. +N> Minor tick lines are not applicable for category axis since it is rendered based on index positions. {% tabs %} @@ -53,7 +53,7 @@ this.Content = chart; ## Positioning the ticks -The tick lines can be positioned inside or outside the chart area using the [TickPosition](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_TickPosition) property. [TickPosition](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_TickPosition) property default value is `AxisElementPosition.Outside`. +The tick lines can be positioned inside or outside the chart area using the [TickPosition](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_TickPosition) property. The default value of [TickPosition](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_TickPosition) is `AxisElementPosition.Outside`. {% tabs %} @@ -93,7 +93,7 @@ this.Content = chart; ## Customization -Both major and minor tick lines can be customized by using the [MajorTickStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_MajorTickStyle) and [MinorTickStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RangeAxisBase.html#Syncfusion_Maui_Toolkit_Charts_RangeAxisBase_MinorTickStyle) properties respectively. They provide options to change the [StrokeWidth](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxisTickStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartAxisTickStyle_StrokeWidth), [TickSize](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxisTickStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartAxisTickStyle_TickSize), [Stroke](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxisTickStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartAxisTickStyle_Stroke) of tick lines. By default minor tick lines will not be visible. +Both major and minor tick lines can be customized using the [MajorTickStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_MajorTickStyle) and [MinorTickStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RangeAxisBase.html#Syncfusion_Maui_Toolkit_Charts_RangeAxisBase_MinorTickStyle) properties respectively. These properties provide options to change the [StrokeWidth](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxisTickStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartAxisTickStyle_StrokeWidth), [TickSize](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxisTickStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartAxisTickStyle_TickSize), and [Stroke](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxisTickStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartAxisTickStyle_Stroke) of tick lines. By default, minor tick lines are not visible. {% tabs %} @@ -152,4 +152,4 @@ this.Content = chart; {% endtabs %} -![Axis tick lines customization support in MAUI Chart](Axis_images/maui_chart_axis_tickline_customization.jpg) +![Axis tick lines customization support in .NET MAUI Chart](Axis_images/maui_chart_axis_tickline_customization.jpg) diff --git a/maui-toolkit/Cartesian-Charts/Axis/Title.md b/maui-toolkit/Cartesian-Charts/Axis/Title.md index eea89260..2745dfc4 100644 --- a/maui-toolkit/Cartesian-Charts/Axis/Title.md +++ b/maui-toolkit/Cartesian-Charts/Axis/Title.md @@ -8,7 +8,7 @@ documentation: ug keywords: .net maui cartesian charts, .net maui axis title, cartesian chart axis title, syncfusion cartesian charts maui, maui chart axis labeling, .net maui chart axis title, cartesian chart axis title guide maui, .net maui sfCartesianChart axis title. --- -# Axis Title in MAUI Chart +# Axis Title in .NET MAUI Chart The [Title](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_Title) property is used to set the title for the chart axis. @@ -61,11 +61,11 @@ this.Content = chart; {% endtabs %} -![Title support for ChartAxis in MAUI Chart](Axis_Images/maui_chart_axis_title.jpg) +![Title support for ChartAxis in .NET MAUI Chart](Axis_Images/maui_chart_axis_title.jpg) ## Customization -The [Title](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_Title) property in axis provides options to customize the text and font of axis title. Axis does not display title by default. The title can be customized using following properties, +The [Title](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_Title) property in axis provides options to customize the text and font of axis title. Axis does not display title by default. The title can be customized using the following properties: * `Text` - Gets or sets the title for axis. * `Background` - Gets or sets the background color of the labels. @@ -80,7 +80,7 @@ The [Title](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit. ## Label extent -The [LabelExtent](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_LabelExtent) property allows to set the gap between axis labels and title. This is typically used to maintain the fixed gap between axis labels and title when the digits of the axis value changed in live update. +The [LabelExtent](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_LabelExtent) property allows you to set the gap between axis labels and title. This is typically used to maintain a fixed gap between axis labels and title when the digits of the axis value change in live updates. {% tabs %} diff --git a/maui-toolkit/Cartesian-Charts/Overview.md b/maui-toolkit/Cartesian-Charts/Overview.md index f5713bea..0e87355d 100644 --- a/maui-toolkit/Cartesian-Charts/Overview.md +++ b/maui-toolkit/Cartesian-Charts/Overview.md @@ -1,25 +1,25 @@ --- layout: post -title: About .NET MAUI Chart control | Syncfusion -description: Learn here all about introduction of Syncfusion® .NET MAUI Chart (SfCartesianChart) control with key features and more. +title: About .NET MAUI Chart Control | Syncfusion +description: Learn all about the introduction to Syncfusion® .NET MAUI Chart (SfCartesianChart) control with key features and more. platform: maui-toolkit control: SfCartesianChart documentation: ug -keywords: .net maui sfCartesianChart overview, introduction to sfCartesianChart in .net maui, exploring sfCartesianChart in .net maui. +keywords: .NET MAUI SfCartesianChart overview, introduction to SfCartesianChart in .NET MAUI, exploring SfCartesianChart in .NET MAUI. --- # .NET MAUI Cartesian Chart Overview -The Syncfusion® Toolkit for .NET MAUI Cartesian Chart (`SfCartesianChart`) provides an efficient way to visualize data with a focus on development productivity, simplicity, and high user interaction. It supports a wide range of charting features to visualize large data sets, offering flexibility in data binding and extensive user customization. +The Syncfusion® Toolkit for .NET MAUI Cartesian Chart (`SfCartesianChart`) provides an efficient means to visualize data, focusing on development productivity, simplicity, and high user interaction. It supports a wide range of charting features designed to display large data sets, offering flexibility in data binding and extensive user customization. ## Key Features -* **Versatile Cartesian Charts**: Supports multiple series types, each offering a unique way to represent data with an emphasis on user-friendly and visually appealing UI components. +- **Versatile Cartesian Charts**: Supports multiple series types, each offering a unique way to represent data with an emphasis on user-friendly and visually appealing UI components. -* **Data Binding**: Allows easy mapping of data through specified paths, enabling flexible data binding. +- **Data Binding**: Allows easy mapping of data through specified paths, enabling flexible data binding. -* **Interactive Zooming**: Enables users to explore detailed portions of large charts with smooth performance. +- **Interactive Zooming**: Enables users to explore detailed portions of large charts with smooth performance. -* **Multiple Series Rendering**: Supports rendering multiple series simultaneously, allowing for comparison and visualization of different data sets within the same chart. +- **Multiple Series Rendering**: Supports rendering multiple series simultaneously, allowing for comparison and visualization of different data sets within the same chart. -* **Customizable UI**: Offers extensive customization options for chart features, including axes, labels, legends, and series, allowing users to tailor the chart’s appearance and behavior. \ No newline at end of file +- **Customizable UI**: Offers extensive customization options for chart features, including axes, labels, legends, and series, allowing users to tailor the chart’s appearance and behavior. From e340d91ce025616758238faf218d4fc7424127a7 Mon Sep 17 00:00:00 2001 From: Harsha Date: Wed, 21 May 2025 13:26:45 +0530 Subject: [PATCH 2/3] Updated UG content for Series and other files. --- .../Cartesian-Charts/Add-custom-labels.md | 2 +- maui-toolkit/Cartesian-Charts/Annotation.md | 90 +------ maui-toolkit/Cartesian-Charts/Appearance.md | 21 +- maui-toolkit/Cartesian-Charts/Area.md | 12 +- .../Cartesian-Charts/Axis/Overview.md | 20 +- maui-toolkit/Cartesian-Charts/Axis/Types.md | 225 ++++++------------ maui-toolkit/Cartesian-Charts/BarChart.md | 10 +- .../Cartesian-Charts/BoxAndWhisker.md | 30 +-- maui-toolkit/Cartesian-Charts/Bubble.md | 13 +- maui-toolkit/Cartesian-Charts/Candle.md | 6 +- maui-toolkit/Cartesian-Charts/Column.md | 12 +- .../Customize-each-chart-axis-label.md | 2 +- maui-toolkit/Cartesian-Charts/DataLabels.md | 48 ++-- maui-toolkit/Cartesian-Charts/EmptyPoints.md | 22 +- .../Cartesian-Charts/Errorbar-Chart.md | 62 +++-- maui-toolkit/Cartesian-Charts/Exporting.md | 11 +- maui-toolkit/Cartesian-Charts/FastScatter.md | 6 +- maui-toolkit/Cartesian-Charts/Fastline.md | 10 +- ...e-data-point-collection-based-on-region.md | 6 +- .../Get-the-touch-position-in-chart.md | 3 +- .../Cartesian-Charts/Getting-Started.md | 50 ++-- maui-toolkit/Cartesian-Charts/Histogram.md | 15 +- maui-toolkit/Cartesian-Charts/Legend.md | 69 +++--- maui-toolkit/Cartesian-Charts/Line.md | 16 +- maui-toolkit/Cartesian-Charts/Localization.md | 21 +- maui-toolkit/Cartesian-Charts/OHLC.md | 12 +- maui-toolkit/Cartesian-Charts/PlotBand.md | 116 ++++----- maui-toolkit/Cartesian-Charts/Range-Column.md | 16 +- maui-toolkit/Cartesian-Charts/RangeArea.md | 12 +- maui-toolkit/Cartesian-Charts/Scatter.md | 4 +- maui-toolkit/Cartesian-Charts/Selection.md | 10 +- .../Cartesian-Charts/SplineRangeArea.md | 30 +-- maui-toolkit/Cartesian-Charts/StackedArea.md | 18 +- .../Cartesian-Charts/StackedArea100.md | 14 +- .../Cartesian-Charts/StackedColumn.md | 27 +-- .../Cartesian-Charts/StackedColumn100.md | 12 +- maui-toolkit/Cartesian-Charts/StackedLine.md | 19 +- .../Cartesian-Charts/StackedLine100.md | 18 +- maui-toolkit/Cartesian-Charts/StepArea.md | 14 +- maui-toolkit/Cartesian-Charts/StepLine.md | 50 ++-- maui-toolkit/Cartesian-Charts/Tooltip.md | 26 +- maui-toolkit/Cartesian-Charts/Trackball.md | 102 ++++---- ...xis-value-to-pixel-value-and-vice-versa.md | 10 +- .../Cartesian-Charts/Waterfall-Chart.md | 24 +- .../Cartesian-Charts/Zooming-and-panning.md | 46 ++-- 45 files changed, 604 insertions(+), 758 deletions(-) diff --git a/maui-toolkit/Cartesian-Charts/Add-custom-labels.md b/maui-toolkit/Cartesian-Charts/Add-custom-labels.md index 19674d54..5b398456 100644 --- a/maui-toolkit/Cartesian-Charts/Add-custom-labels.md +++ b/maui-toolkit/Cartesian-Charts/Add-custom-labels.md @@ -10,7 +10,7 @@ Keywords: .net maui chart custom axis labels, .net maui chart axis label customi # Add custom labels to the chart axis -[ChartAxis](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html) provides the [OnCreateLabels](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_OnCreateLabels) override method to add custom axis labels. The [OnCreateLabels](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_OnCreateLabels) method is called whenever new labels are generated. The following properties are available to add custom labels. +[ChartAxis](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html) provides the [OnCreateLabels](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_OnCreateLabels) override method to add custom axis labels. The [OnCreateLabels](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_OnCreateLabels) method is called whenever new labels are generated. The following properties are available to add custom labels: * [VisibleLabels](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_VisibleLabels) - This property is used to get an Observable Collection of visible axis labels. diff --git a/maui-toolkit/Cartesian-Charts/Annotation.md b/maui-toolkit/Cartesian-Charts/Annotation.md index 73338d90..0bdd843d 100644 --- a/maui-toolkit/Cartesian-Charts/Annotation.md +++ b/maui-toolkit/Cartesian-Charts/Annotation.md @@ -5,12 +5,12 @@ description: Learn here all about annotation support and its features in Syncfus platform: maui-toolkit control: SfCartesianChart documentation: ug -keywords: .net maui chart annotations, .net maui annotations customization, syncfusion maui chart annotations, .net maui chart text annotation, .net maui chart shape annotation, .net maui chart view annotation. +keywords: .net maui chart annotations, .net maui annotations customization, syncfusion maui chart annotations, .net maui chart text annotation, .net maui chart shape annotation, .net maui chart view annotation. --- # Annotations in .NET MAUI Chart -[SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html) provides annotation support that allows you to mark specific areas of interest in the chart area. This feature enables you to add text, images, and custom views using the following annotations. +[SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html) provides annotation support that allows you to mark specific areas of interest in the chart area. This feature enables you to add text, images, and custom views using the following annotation types: * Text annotation * Shape annotation @@ -18,7 +18,7 @@ keywords: .net maui chart annotations, .net maui annotations customization, sync ## Adding Annotations -To add annotations, create an instance of any type of annotation and add it to the [Annotations](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_Annotations) collection. For example, the [EllipseAnnotation](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.EllipseAnnotation.html) can be added. +To add annotations, create an instance of any annotation type and add it to the [Annotations](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_Annotations) collection. For example, the [EllipseAnnotation](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.EllipseAnnotation.html) can be added as shown below: {% tabs %} @@ -172,7 +172,6 @@ chart.Annotations.Add(ellipse); // Set the chart as the content of the current view this.Content = chart; - {% endhighlight %} {% endtabs %} @@ -217,7 +216,6 @@ chart.Annotations.Add(text); // Set the chart as the content of the current view/page this.Content = chart; - {% endhighlight %} {% endtabs %} @@ -231,7 +229,7 @@ The [TextAnnotation](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui * [TextColor](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLabelStyle_TextColor) - Gets or sets the text color of the label. * [Background](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLabelStyle_Background) - Gets or sets the background color of the labels. * [Margin](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLabelStyle_Margin) - Gets or sets the margin of the label to customize the appearance of label. -* [FontFamily](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLabelStyle_FontFamily) - Gets or sets the font family name for the label. +* [FontFamily](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLabelStyle_FontFamily) - Gets or sets the font family name for the label. * [FontAttributes](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLabelStyle_FontAttributes) - Gets or sets the font style for the label. * [FontSize](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLabelStyle_FontSize) - Gets or sets the font size for the label. * [HorizontalTextAlignment](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAnnotationLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartAnnotationLabelStyle_HorizontalTextAlignment) - Gets or sets the horizontal alignment of the label. @@ -343,26 +341,19 @@ this.Content = chart; N> When the [X2](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ShapeAnnotation.html#Syncfusion_Maui_Toolkit_Charts_ShapeAnnotation_X2) and [Y2](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ShapeAnnotation.html#Syncfusion_Maui_Toolkit_Charts_ShapeAnnotation_Y2) properties of the [EllipseAnnotation](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.EllipseAnnotation.html) are set, the [Height](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.EllipseAnnotation.html#Syncfusion_Maui_Toolkit_Charts_EllipseAnnotation_Height) and [Width](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.EllipseAnnotation.html#Syncfusion_Maui_Toolkit_Charts_EllipseAnnotation_Width) properties become ineffective. ## Line annotation - The [LineAnnotation](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.LineAnnotation.html) is used to draw a line at specific points in the chart area. {% tabs %} - {% highlight xaml %} - ... - {% endhighlight %} - {% highlight c# %} - SfCartesianChart chart = new SfCartesianChart(); - // Create and configure a LineAnnotation with specified coordinates var line = new LineAnnotation() { @@ -372,25 +363,19 @@ var line = new LineAnnotation() Y2 = 20, Text = "Line" }; - // Add the line annotation to the annotations collection of the chart chart.Annotations.Add(line); this.Content = chart; - {% endhighlight %} - {% endtabs %} - + ![Line Annotation in MAUI Chart](Annotation_image/Line_annotation.png) ## Vertical and Horizontal line annotations - The [VerticalLineAnnotation](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.VerticalLineAnnotation.html) and [HorizontalLineAnnotation](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.HorizontalLineAnnotation.html) are used to draw vertical and horizontal lines at specific points in the chart area. {% tabs %} - {% highlight xaml %} - ... @@ -398,11 +383,8 @@ The [VerticalLineAnnotation](https://help.syncfusion.com/cr/maui-toolkit/Syncfus - {% endhighlight %} - {% highlight c# %} - SfCartesianChart chart = new SfCartesianChart(); . . . // Create a vertical line annotation @@ -410,32 +392,25 @@ var verticalLineAnnotation = new VerticalLineAnnotation() { X1 = 2, }; - // Create a horizontal line annotation var horizontalLineAnnotation = new HorizontalLineAnnotation() { Y1 = 20, }; - -// Add the vertical and horizontal line annotations to the chart's annotations. +// Add the vertical and horizontal line annotations to the chart's annotations chart.Annotations.Add(verticalLineAnnotation); chart.Annotations.Add(horizontalLineAnnotation); this.Content = chart; - {% endhighlight %} - {% endtabs %} ![Vertical and horizontal Line Annotation in MAUI Chart](Annotation_image/Horizontal_vertical_annotation.png) ## Displaying axis label for vertical and horizontal line annotations - The [VerticalLineAnnotation](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.VerticalLineAnnotation.html) and [HorizontalLineAnnotation](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.HorizontalLineAnnotation.html) allow for the display of axis labels at the line's position using the [ShowAxisLabel](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.VerticalLineAnnotation.html#Syncfusion_Maui_Toolkit_Charts_VerticalLineAnnotation_ShowAxisLabel) property. The default value of the [ShowAxisLabel](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.VerticalLineAnnotation.html#Syncfusion_Maui_Toolkit_Charts_VerticalLineAnnotation_ShowAxisLabel) property is `false` as shown in the code snippet below: {% tabs %} - {% highlight xaml %} - ... @@ -443,11 +418,8 @@ The [VerticalLineAnnotation](https://help.syncfusion.com/cr/maui-toolkit/Syncfus - {% endhighlight %} - {% highlight c# %} - SfCartesianChart chart = new SfCartesianChart(); . . . var verticalLineAnnotation = new VerticalLineAnnotation() @@ -455,25 +427,20 @@ var verticalLineAnnotation = new VerticalLineAnnotation() X1 = 2.5, ShowAxisLabel = true // Display the label on the X-axis where the line intersects }; - var horizontalLineAnnotation = new HorizontalLineAnnotation() { Y1 = 25, ShowAxisLabel = true // Display the label on the Y-axis where the line intersects }; - chart.Annotations.Add(verticalLineAnnotation); chart.Annotations.Add(horizontalLineAnnotation); this.Content = chart; - {% endhighlight %} - {% endtabs %} ![Vertical and horizontal Line Annotation with axis label in MAUI Chart](Annotation_image/axis_label.png) ## Axis label customization - The default appearance of the axis label can also be customized using the [AxisLabelStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.HorizontalLineAnnotation.html#Syncfusion_Maui_Toolkit_Charts_HorizontalLineAnnotation_AxisLabelStyle) property. The [AxisLabelStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.HorizontalLineAnnotation.html#Syncfusion_Maui_Toolkit_Charts_HorizontalLineAnnotation_AxisLabelStyle) property allows you to customize the axis labels by changing the font family, font size, font attributes, and text color. The following styles are used to customize the axis label: * [TextColor](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLabelStyle_TextColor) - Gets or sets the text color of the label. @@ -484,13 +451,10 @@ The default appearance of the axis label can also be customized using the [AxisL * [FontSize](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLabelStyle_FontSize) - Gets or sets the font size for the label. ## Adding arrow to vertical and horizontal line annotations - To display a single-headed arrow, set the [LineCap](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.LineAnnotation.html#Syncfusion_Maui_Toolkit_Charts_LineAnnotation_LineCap) property to [Arrow](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLineCap.html#Syncfusion_Maui_Toolkit_Charts_ChartLineCap_Arrow). The default value of the [LineCap](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.LineAnnotation.html#Syncfusion_Maui_Toolkit_Charts_LineAnnotation_LineCap) property is [None](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLineCap.html#Syncfusion_Maui_Toolkit_Charts_ChartLineCap_None). {% tabs %} - {% highlight xaml %} - ... @@ -498,11 +462,8 @@ To display a single-headed arrow, set the [LineCap](https://help.syncfusion.com/ - {% endhighlight %} - {% highlight c# %} - SfCartesianChart chart = new SfCartesianChart(); . . . var verticalLineAnnotation = new VerticalLineAnnotation() @@ -510,19 +471,15 @@ var verticalLineAnnotation = new VerticalLineAnnotation() X1 = 2.5, LineCap = ChartLineCap.Arrow // Add an arrow cap to the end of the line }; - var horizontalLineAnnotation = new HorizontalLineAnnotation() { Y1 = 25, LineCap = ChartLineCap.Arrow // Add an arrow cap to the end of the line }; - chart.Annotations.Add(verticalLineAnnotation); chart.Annotations.Add(horizontalLineAnnotation); this.Content = chart; - {% endhighlight %} - {% endtabs %} ![Vertical and horizontal Line Annotations with linecap in MAUI Chart](Annotation_image/Horizontal_vertical_with_cap.png) @@ -530,24 +487,18 @@ this.Content = chart; N> The [LineCap](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.LineAnnotation.html#Syncfusion_Maui_Toolkit_Charts_LineAnnotation_LineCap) is applicable to line, horizontal, and vertical annotations. ## Adding text in shape annotation - For all shape annotations, the text can be displayed using the [Text](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ShapeAnnotation.html#Syncfusion_Maui_Toolkit_Charts_ShapeAnnotation_Text) property. {% tabs %} - {% highlight xaml %} - ... - {% endhighlight %} - {% highlight c# %} - SfCartesianChart chart = new SfCartesianChart(); ... var ellipseAnnotation = new EllipseAnnotation() @@ -558,18 +509,14 @@ var ellipseAnnotation = new EllipseAnnotation() Y2 = 15, Text = "Ellipse" // Set the text label for the ellipse. }; - chart.Annotations.Add(ellipseAnnotation); this.Content = chart; - {% endhighlight %} - {% endtabs %} ![Annotation in MAUI Chart](Annotation_image/Adding_annotation.png) ## Text customization in shape annotation - The [Text](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ShapeAnnotation.html#Syncfusion_Maui_Toolkit_Charts_ShapeAnnotation_Text) in shape annotation also can be customized by using the [LabelStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ShapeAnnotation.html#Syncfusion_Maui_Toolkit_Charts_ShapeAnnotation_LabelStyle) property. The [LabelStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ShapeAnnotation.html#Syncfusion_Maui_Toolkit_Charts_ShapeAnnotation_LabelStyle) property provides options to customize the font-family, font-size, font-attributes and text color of axis labels. * [TextColor](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLabelStyle_TextColor) - Gets or sets the text color of the label. @@ -578,17 +525,15 @@ The [Text](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.C * [FontFamily](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLabelStyle_FontFamily) - Gets or sets the font family name for the label. * [FontAttributes](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLabelStyle_FontAttributes) - Gets or sets the font style for the label. * [FontSize](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLabelStyle_FontSize) - Gets or sets the font size for the label. -* [HorizontalTextAlignment](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAnnotationLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartAnnotationLabelStyle_HorizontalTextAlignment) - Gets or sets the horizontal alignment of the label. +* [HorizontalTextAlignment](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAnnotationLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartAnnotationLabelStyle_HorizontalTextAlignment) - Gets or sets the horizontal alignment of the label. * [VerticalTextAlignment](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAnnotationLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartAnnotationLabelStyle_VerticalTextAlignment) - Gets or sets the vertical alignment of the label. -## View annotation +## View Annotation The [ViewAnnotation](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ViewAnnotation.html) allows you to add annotations in the form of your own custom view using the [View](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ViewAnnotation.html#Syncfusion_Maui_Toolkit_Charts_ViewAnnotation_View) property at a specific area of interest in the chart area. Additionally, the [ViewAnnotation](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ViewAnnotation.html) can be aligned using the [VerticalAlignment](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ViewAnnotation.html#Syncfusion_Maui_Toolkit_Charts_ViewAnnotation_VerticalAlignment) and [HorizontalAlignment](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ViewAnnotation.html#Syncfusion_Maui_Toolkit_Charts_ViewAnnotation_HorizontalAlignment) properties. {% tabs %} - {% highlight xaml %} - ... @@ -599,11 +544,8 @@ The [ViewAnnotation](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui - {% endhighlight %} - {% highlight c# %} - SfCartesianChart chart = new SfCartesianChart(); ... // Define a new ViewAnnotation to add a graphical element to the chart. @@ -611,37 +553,31 @@ var viewAnnotation = new ViewAnnotation() { X1 = 3, Y1 = 30, - View = new Image() { Source = "cloud.png" }; + View = new Image() { Source = "cloud.png" } }; // Add the created ViewAnnotation to the chart's Annotations collection. chart.Annotations.Add(viewAnnotation); this.Content = chart; {% endhighlight %} - {% endtabs %} -![View Annotation in MAUI Chart](Annotation_image/View_annotation.png) +![View Annotation in .NET MAUI Chart](Annotation_image/View_annotation.png) ## Annotation Visibility The [IsVisible](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAnnotation.html#Syncfusion_Maui_Toolkit_Charts_ChartAnnotation_IsVisible) property of [ChartAnnotation](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAnnotation.html) is used to toggle the visibility of the annotation. {% tabs %} - {% highlight xaml %} - ... - {% endhighlight %} - {% highlight c# %} - SfCartesianChart chart = new SfCartesianChart(); ... var ellipseAnnotation = new EllipseAnnotation() @@ -654,9 +590,7 @@ var ellipseAnnotation = new EllipseAnnotation() IsVisible = false // Set the visibility of the annotation }; -chart.Annotations.Add(ellipse); +chart.Annotations.Add(ellipseAnnotation); this.Content = chart; - {% endhighlight %} - -{% endtabs %} \ No newline at end of file +{% endtabs %} diff --git a/maui-toolkit/Cartesian-Charts/Appearance.md b/maui-toolkit/Cartesian-Charts/Appearance.md index fe1ee36f..ebe3dfa8 100644 --- a/maui-toolkit/Cartesian-Charts/Appearance.md +++ b/maui-toolkit/Cartesian-Charts/Appearance.md @@ -1,6 +1,6 @@ --- layout: post -title: Appearance in .NET MAUI Chart control Syncfusion +title: Appearance in .NET MAUI Chart control | Syncfusion description: Learn here all about appearance customization in .NET MAUI Chart (SfCartesianChart), its elements and more. platform: maui-toolkit control: SfCartesianChart @@ -9,15 +9,15 @@ keywords: .net maui cartesian chart appearance, .net maui chart appearance custo --- # Appearance in .NET MAUI Cartesian Chart -The appearance of [SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html) can be customized by using the predefined brushes, custom brushes and gradient, which allows to enrich the application. +The appearance of [SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html) can be customized by using predefined brushes, custom brushes, and gradients, which allows you to enhance your application's visual appeal. ## Applying PaletteBrushes for Chart -By default, chart applies a set of predefined brushes to the series in a predefined order. [SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html) provides [PaletteBrushes](hhttps://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_PaletteBrushes) property for applying various kinds of custom palettes brushes. +By default, chart applies a set of predefined brushes to the series in a predefined order. [SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html) provides the [PaletteBrushes](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_PaletteBrushes) property for applying various kinds of custom palette brushes. ### Custom PaletteBrushes -[SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html) provides support to define own brushes for the chart with preferred order by using the [PaletteBrushes](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_PaletteBrushes) property, as shown in the following code example. +[SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html) provides support to define your own brushes for the chart with preferred order by using the [PaletteBrushes](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_PaletteBrushes) property, as shown in the following code example. {% tabs %} @@ -76,6 +76,7 @@ public class ViewModel // Create a new list to hold custom brushes for the chart. public List CustomBrushes { get; set; } + public ViewModel() { CustomBrushes = new List(); @@ -123,9 +124,11 @@ public class ViewModel // Create a new list to hold gradient brushes for the chart. public List CustomBrushes { get; set; } + public ViewModel() { CustomBrushes = new List(); + LinearGradientBrush gradientColor1 = new LinearGradientBrush(); gradientColor1.GradientStops = new GradientStopCollection() { @@ -177,9 +180,9 @@ public class ViewModel ![Gradient support in MAUI Chart](Appearance_images/MAUI_chart_gradient_color.png) -## Plotting Area Customization: +## Plotting Area Customization -[SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html) allows you to add any view to the chart plot area, which is useful for adding any relevant data, a watermark, or a color gradient to the background of the chart. +[SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html) allows you to add any view to the chart plot area, which is useful for adding relevant data, a watermark, or a color gradient to the background of the chart. {% tabs %} @@ -211,6 +214,7 @@ public class ViewModel SfCartesianChart chart = new SfCartesianChart(); AbsoluteLayout absoluteLayout = new AbsoluteLayout(); + var copyRight = new Label() { Text = "Copyright @ 2001 - 2022 Syncfusion Inc", @@ -221,9 +225,11 @@ var copyRight = new Label() AbsoluteLayout.SetLayoutBounds(copyRight, new Rect(1, 1, -1, -1)); AbsoluteLayout.SetLayoutFlags(copyRight, Microsoft.Maui.Layouts.AbsoluteLayoutFlags.PositionProportional); absoluteLayout.Children.Add(copyRight); + var watermark = new Label() { - Text = "CONFIDENTIAL",Rotation = 340, + Text = "CONFIDENTIAL", + Rotation = 340, FontSize = 80, FontAttributes = FontAttributes.Bold, TextColor = Colors.Gray, @@ -233,6 +239,7 @@ var watermark = new Label() AbsoluteLayout.SetLayoutBounds(watermark, new Rect(0.5, 0.5, -1, -1)); AbsoluteLayout.SetLayoutFlags(watermark, Microsoft.Maui.Layouts.AbsoluteLayoutFlags.PositionProportional); absoluteLayout.Children.Add(watermark); + chart.PlotAreaBackgroundView = absoluteLayout; this.Content = chart; diff --git a/maui-toolkit/Cartesian-Charts/Area.md b/maui-toolkit/Cartesian-Charts/Area.md index ee9733a6..11ff17d0 100644 --- a/maui-toolkit/Cartesian-Charts/Area.md +++ b/maui-toolkit/Cartesian-Charts/Area.md @@ -12,7 +12,7 @@ keywords: .net maui area chart, .net maui chart area type, area chart customizat ## Area Chart -The area chart is rendered by using a collection of line segments connected to form a closed loop area, filled with the specified color. To render a area chart, create an instance of [AreaSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.AreaSeries.html) and add it to the [Series](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_Series) collection property of the chart. +The area chart is rendered by using a collection of line segments connected to form a closed loop area, filled with the specified color. To render an area chart, create an instance of [AreaSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.AreaSeries.html) and add it to the [Series](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_Series) collection property of the chart. N> The Cartesian chart has [Series](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_Series) as its default content. @@ -46,7 +46,7 @@ chart.XAxes.Add(primaryAxis); NumericalAxis secondaryAxis = new NumericalAxis(); chart.YAxes.Add(secondaryAxis); -// Create a AreaSeries for the chart +// Create an AreaSeries for the chart AreaSeries series = new AreaSeries() { ItemsSource = new ViewModel().Data, @@ -144,10 +144,10 @@ AreaSeries series = new AreaSeries() XBindingPath = "Year", YBindingPath = "Percentage", ShowMarkers = true, // Enable markers on data points for better visibility - }; +}; chart.Series.Add(series); -this.Content= chart; +this.Content = chart; {% endhighlight %} @@ -155,7 +155,7 @@ this.Content= chart; ### Marker customization -In order to change the series markers appearance, create an instance of the [MarkerSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.AreaSeries.html#Syncfusion_Maui_Toolkit_Charts_AreaSeries_MarkerSettings) property. The following properties are used to customize marker appearance. +In order to change the series markers appearance, create an instance of the [MarkerSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.AreaSeries.html#Syncfusion_Maui_Toolkit_Charts_AreaSeries_MarkerSettings) property. The following properties are used to customize marker appearance: * [Type](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartMarkerSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartMarkerSettings_Type), of type `ShapeType`, describes the shape of the series marker. The default value of this property is [ShapeType.Circle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ShapeType.html#Syncfusion_Maui_Toolkit_Charts_ShapeType_Circle). * [Stroke](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartMarkerSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartMarkerSettings_Stroke), of type `Brush`, indicates the brush used to paint the marker border. @@ -192,7 +192,7 @@ In order to change the series markers appearance, create an instance of the [Mar SfCartesianChart chart = new SfCartesianChart(); ... // Configure the marker settings for the chart series -ChartMarkerSettings chartMarker= new ChartMarkerSettings() +ChartMarkerSettings chartMarker = new ChartMarkerSettings() { Type = ShapeType.Diamond, Fill = Colors.Brown, diff --git a/maui-toolkit/Cartesian-Charts/Axis/Overview.md b/maui-toolkit/Cartesian-Charts/Axis/Overview.md index 8dfa4879..8dcdf8c1 100644 --- a/maui-toolkit/Cartesian-Charts/Axis/Overview.md +++ b/maui-toolkit/Cartesian-Charts/Axis/Overview.md @@ -1,7 +1,7 @@ --- layout: post title: About Axis in .NET MAUI Chart control | Syncfusion -description: Learn here all about chart axis and its keys features of Syncfusion® .NET MAUI Chart (SfCartesianChart) control. +description: Learn here all about chart axis and its key features of Syncfusion .NET MAUI Chart (SfCartesianChart) control. platform: maui-toolkit control: SfCartesianChart documentation: ug @@ -10,19 +10,19 @@ keywords: .net maui chart axis overview, .net maui chart control axis, .net maui # Axis in .NET MAUI Chart -[ChartAxis](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.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/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html) is used to locate data points 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. -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 -* Logarithm +* DateTime +* Logarithmic ## Key features -* Axis supports different type of axis such as Category, Numeric, Logarithmic and Date time. -* Allow you to customize the chart axis line such as grid lines, tick lines, and support to customize the style of the axis line by defining the [AxisLineStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_AxisLineStyle). -* Axis allow you to customize the origin of the chart axis. -* Provides options to set padding for axis and axis visible range. -* Multiple axes support provides a way to arrange multiple series inside the same chart area, gives more space for X and Y axis. +* Axis supports different types of scales such as Category, Numeric, Logarithmic, and DateTime. +* Allows you to customize the chart axis elements such as grid lines and tick lines, and supports customizing the style of the axis line by defining the [AxisLineStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_AxisLineStyle). +* Provides options to customize the origin of the chart axis. +* Offers settings to adjust padding for the axis and axis visible range. +* Multiple axes support enables arranging multiple series inside the same chart area, providing more space for X and Y axes. diff --git a/maui-toolkit/Cartesian-Charts/Axis/Types.md b/maui-toolkit/Cartesian-Charts/Axis/Types.md index 5117f3e4..5f4e627f 100644 --- a/maui-toolkit/Cartesian-Charts/Axis/Types.md +++ b/maui-toolkit/Cartesian-Charts/Axis/Types.md @@ -10,7 +10,7 @@ keywords: .net maui cartesian charts, .net maui axis types, cartesian chart axis # Types of Axis in .NET MAUI Chart -Cartesian chart supports the following types of chart axis. +Cartesian chart supports the following types of chart axis: * NumericalAxis * CategoryAxis @@ -39,19 +39,19 @@ Cartesian chart supports the following types of chart axis. {% highlight c# %} - SfCartesianChart chart = new SfCartesianChart(); - . . . - // Create a numerical axis for the X-axis - NumericalAxis primaryAxis = new NumericalAxis(); - // Add the primary axis to the chart's XAxes collection - chart.XAxes.Add(primaryAxis); +SfCartesianChart chart = new SfCartesianChart(); +. . . +// Create a numerical axis for the X-axis +NumericalAxis primaryAxis = new NumericalAxis(); +// Add the primary axis to the chart's XAxes collection +chart.XAxes.Add(primaryAxis); - // Create a numerical axis for the Y-axis - NumericalAxis secondaryAxis = new NumericalAxis(); - // Add the secondary axis to the chart's YAxes collection - chart.YAxes.Add(secondaryAxis); +// Create a numerical axis for the Y-axis +NumericalAxis secondaryAxis = new NumericalAxis(); +// Add the secondary axis to the chart's YAxes collection +chart.YAxes.Add(secondaryAxis); - this.Content = chart; +this.Content = chart; {% endhighlight %} {% endtabs %} @@ -101,7 +101,7 @@ this.Content = chart; ### Customizing the Range -[Maximum](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.NumericalAxis.html#Syncfusion_Maui_Toolkit_Charts_NumericalAxis_Maximum) and [Minimum](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.NumericalAxis.html#Syncfusion_Maui_Toolkit_Charts_NumericalAxis_Minimum) properties of axis is used for setting the maximum and minimum value of the axis range respectively. +[Maximum](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.NumericalAxis.html#Syncfusion_Maui_Toolkit_Charts_NumericalAxis_Maximum) and [Minimum](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.NumericalAxis.html#Syncfusion_Maui_Toolkit_Charts_NumericalAxis_Minimum) properties of axis are used for setting the maximum and minimum value of the axis range respectively. N> If minimum or maximum value is set, the other value is calculated by default internally. @@ -130,7 +130,7 @@ NumericalAxis secondaryAxis = new NumericalAxis() }; chart.YAxes.Add(secondaryAxis); - this.Content = chart; +this.Content = chart; {% endhighlight %} {% endtabs %} @@ -161,7 +161,7 @@ CategoryAxis primaryAxis = new CategoryAxis(); // Add the primaryAxis to the chart's XAxes collection chart.XAxes.Add(primaryAxis); - this.Content = chart; +this.Content = chart; {% endhighlight %} {% endtabs %} @@ -170,7 +170,7 @@ chart.XAxes.Add(primaryAxis); ### Label placement -The [LabelPlacement](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CategoryAxis.html#Syncfusion_Maui_Toolkit_Charts_CategoryAxis_LabelPlacement) property in [CategoryAxis](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CategoryAxis.html) is used to placed the axis labels based on ticks and between ticks. The default value of [LabelPlacement](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CategoryAxis.html#Syncfusion_Maui_Toolkit_Charts_CategoryAxis_LabelPlacement) is [OnTicks](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.LabelPlacement.html#Syncfusion_Maui_Toolkit_Charts_LabelPlacement_OnTicks). +The [LabelPlacement](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CategoryAxis.html#Syncfusion_Maui_Toolkit_Charts_CategoryAxis_LabelPlacement) property in [CategoryAxis](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CategoryAxis.html) is used to place the axis labels based on ticks and between ticks. The default value of [LabelPlacement](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CategoryAxis.html#Syncfusion_Maui_Toolkit_Charts_CategoryAxis_LabelPlacement) is [OnTicks](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.LabelPlacement.html#Syncfusion_Maui_Toolkit_Charts_LabelPlacement_OnTicks). {% tabs %} @@ -196,7 +196,7 @@ CategoryAxis primaryAxis = new CategoryAxis() }; chart.XAxes.Add(primaryAxis); - this.Content = chart; +this.Content = chart; {% endhighlight %} {% endtabs %} @@ -205,7 +205,7 @@ chart.XAxes.Add(primaryAxis); ### Interval -By default, the [CategoryAxis](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CategoryAxis.html) axis labels are display with fixed interval 1. It can customized by using the [Interval](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CategoryAxis.html#Syncfusion_Maui_Toolkit_Charts_CategoryAxis_Interval) property of axis. +By default, the [CategoryAxis](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CategoryAxis.html) axis labels are displayed with fixed interval 1. It can be customized by using the [Interval](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CategoryAxis.html#Syncfusion_Maui_Toolkit_Charts_CategoryAxis_Interval) property of axis. {% tabs %} @@ -334,7 +334,7 @@ DateTimeAxis primaryAxis = new DateTimeAxis(); // Add the DateTimeAxis instance to the chart's XAxes collection chart.XAxes.Add(primaryAxis); - this.Content = chart; +this.Content = chart; {% endhighlight %} {% endtabs %} @@ -368,7 +368,7 @@ DateTimeAxis primaryAxis = new DateTimeAxis() }; chart.XAxes.Add(primaryAxis); - this.Content = chart; +this.Content = chart; {% endhighlight %} {% endtabs %} @@ -582,72 +582,56 @@ this.Content = chart; ![Inversed axis support in MAUI Chart](Axis_Images/maui_chart_axis_isInversed.jpg) ## Axis Visibility - Axis visibility can be controlled using the [IsVisible](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_IsVisible) property of axis. Default value of [IsVisible](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_IsVisible) property is `True`. {% tabs %} - {% highlight xaml %} - - . . . - - - +. . . + + + - {% endhighlight %} - {% highlight c# %} - SfCartesianChart chart = new SfCartesianChart(); . . . NumericalAxis secondaryAxis = new NumericalAxis() { - IsVisible = false // Set the IsVisible property to false, making this axis hidden/not visible in the chart + IsVisible = false // Set the IsVisible property to false, making this axis hidden/not visible in the chart }; chart.YAxes.Add(secondaryAxis); - this.Content = chart; {% endhighlight %} - {% endtabs %} ## Multiple Axes +Cartesian charts provides support to arrange multiple series inside the same chart area with specified x-axis and y-axis. There are two properties [XAxisName](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CartesianSeries.html#Syncfusion_Maui_Toolkit_Charts_CartesianSeries_XAxisName) and [YAxisName](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CartesianSeries.html#Syncfusion_Maui_Toolkit_Charts_CartesianSeries_YAxisName) in all the Cartesian series types, which are used to provide multiple axes support. These axes can be arranged in a stacking order or in a side-by-side pattern. -Cartesian charts provides support to arrange the multiple series inside the same chart area with specified x-axis and y-axis. There are two properties [XAxisName](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CartesianSeries.html#Syncfusion_Maui_Toolkit_Charts_CartesianSeries_XAxisName) and [YAxisName](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CartesianSeries.html#Syncfusion_Maui_Toolkit_Charts_CartesianSeries_YAxisName) in all the Cartesian series type, which is used to provide multiple axes support. These axes can be arranged in a stacking order or in a side by side pattern. - -By default, The 0th index value of XAxes and YAxes is used to plot all of the series. +By default, the 0th index value of XAxes and YAxes is used to plot all of the series. {% tabs %} - {% highlight xaml %} - - - . . . - - - - - - - - - - - - - + +. . . + + + + + + + + + + {% endhighlight %} - {% highlight c# %} - SfCartesianChart chart = new SfCartesianChart(); - DateTimeAxis primaryAxis = new DateTimeAxis() { ShowMajorGridLines = false @@ -686,49 +670,36 @@ SplineSeries series2 = new SplineSeries() chart.Series.Add(series1); chart.Series.Add(series2); - this.Content = chart; - {% endhighlight %} - {% endtabs %} -![Mulitipe axis support in MAUI Chart](Axis_Images/multiple_axis.png) +![Multiple axis support in MAUI Chart](Axis_Images/multiple_axis.png) In the above image, the [ColumnSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ColumnSeries.html) is plotted based on additional axes of [YAxes](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_YAxes) collection, and [SplineSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SplineSeries.html) is plotted based on axis of the collection's 0th index. ## Axis Crossing - -The chart allows you to customize the origin, by default the axis will be rendered with (0,0) as the origin in x and y-axes. An axis can be positioned anywhere in the chart area by using the [CrossesAt](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_CrossesAt) property. This property specifies where the horizontal axis intersects or crosses the vertical axis, and vice versa. The default value of the CrossesAt property is `double.NaN`. +The chart allows you to customize the origin. By default, the axis will be rendered with (0,0) as the origin in x and y-axes. An axis can be positioned anywhere in the chart area by using the [CrossesAt](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_CrossesAt) property. This property specifies where the horizontal axis intersects or crosses the vertical axis, and vice versa. The default value of the CrossesAt property is `double.NaN`. {% tabs %} - {% highlight xaml %} - - - - - - - - - - + + + + + + - {% endhighlight %} - {% highlight c# %} - SfCartesianChart chart = new SfCartesianChart(); - NumericalAxis primaryAxis = new NumericalAxis(); primaryAxis.CrossesAt = 0; // Sets the point where the axis crosses the other axis at 0 primaryAxis.Minimum = -8; // Sets the minimum value of the axis to -8 @@ -742,40 +713,28 @@ secondaryAxis.Minimum = -8; // Sets the minimum value of the axis to -8 secondaryAxis.Maximum = 8; // Sets the maximum value of the axis to 8 secondaryAxis.ShowMajorGridLines = false; chart.YAxes.Add(secondaryAxis); - this.Content = chart; {% endhighlight %} - {% endtabs %} ![Axis crossing support in MAUI Chart](Axis_Images/maui_chart_axis_crossing.png) ### Positioning the axis elements while crossing - The [RenderNextToCrossingValue](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_RenderNextToCrossingValue) property is used to determine whether the crossing axis should be placed at crossing position or not. The default value of [RenderNextToCrossingValue](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_RenderNextToCrossingValue) property is true. {% tabs %} - {% highlight xaml %} - - - - - - - - - - + + + + + + - {% endhighlight %} - {% highlight c# %} - SfCartesianChart chart = new SfCartesianChart(); - NumericalAxis primaryAxis = new NumericalAxis(); primaryAxis.CrossesAt = 0; primaryAxis.RenderNextToCrossingValue = false; // Ensure the X-axis is not rendered next to its crossing value @@ -784,110 +743,78 @@ chart.XAxes.Add(primaryAxis); NumericalAxis secondaryAxis = new NumericalAxis(); secondaryAxis.CrossesAt = 0; chart.YAxes.Add(secondaryAxis); - this.Content = chart; {% endhighlight %} - {% endtabs %} ![RenderNextToCrossingValue support in MAUI Chart](Axis_Images/maui_chart_axis_rendernexttocrossingvalue.png) ### Crossing the date-time axis - For the crossing in date time horizontal axis, date object should be provided as value for `CrossesAt` property of vertical axis. {% tabs %} - {% highlight xaml %} - - - - - - - - - - + + + + + + - {% endhighlight %} - {% highlight c# %} - SfCartesianChart chart = new SfCartesianChart(); - DateTimeAxis primaryAxis = new DateTimeAxis(); primaryAxis.CrossesAt = new DateTime(2021, 01, 01); // Set the primary X-axis to start with a specific date chart.XAxes.Add(primaryAxis); NumericalAxis secondaryAxis = new NumericalAxis(); chart.YAxes.Add(secondaryAxis); - this.Content = chart; - {% endhighlight %} - {% endtabs %} ![DateTimeAxis crossing support in MAUI Chart](Axis_Images/maui_chart_datetime_axis_crossing.png) ### Opposite Side Axis with CrossesAt - The chart allows you to position the axis to opposed position by setting the value as `double.MaxValue` to the [CrossesAt](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_CrossesAt) property. {% tabs %} - {% highlight xaml %} - - - - - - - - - - + + + + + + - {% endhighlight %} - {% highlight c# %} - SfCartesianChart chart = new SfCartesianChart(); - NumericalAxis primaryAxis = new NumericalAxis(); chart.XAxes.Add(primaryAxis); NumericalAxis secondaryAxis = new NumericalAxis(); secondaryAxis.CrossesAt = double.MaxValue; chart.YAxes.Add(secondaryAxis); - this.Content = chart; {% endhighlight %} - {% endtabs %} ![Axis opposite position in MAUI Chart](Axis_Images/maui_chart_axis_opposite_position.png) ## Events - ### ActualRangeChanged - The [ActualRangeChanged](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_ActualRangeChanged) event is triggered when the actual range of the axis is changed. The argument contains the following information: - * [ActualMinimum](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ActualRangeChangedEventArgs.html#Syncfusion_Maui_Toolkit_Charts_ActualRangeChangedEventArgs_ActualMinimum) - used to get the actual minimum value of the axis. * [ActualMaximum](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ActualRangeChangedEventArgs.html#Syncfusion_Maui_Toolkit_Charts_ActualRangeChangedEventArgs_ActualMaximum) - used to get the actual maximum value of the axis. N> The actual range is changed by specifying the [ZoomPosition](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_ZoomPosition) and [ZoomFactor](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_ZoomFactor) properties or zooming the chart interactively. ### LabelCreated - The [LabelCreated](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_LabelCreated) event is triggered when the axis label is created. The argument contains the following information: - * [Label](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxisLabelEventArgs.html#Syncfusion_Maui_Toolkit_Charts_ChartAxisLabelEventArgs_Label) - Used to get or set the text of axis label. * [Position](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxisLabelEventArgs.html#Syncfusion_Maui_Toolkit_Charts_ChartAxisLabelEventArgs_Position) - Used to get the position of label. * [LabelStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxisLabelEventArgs.html#Syncfusion_Maui_Toolkit_Charts_ChartAxisLabelEventArgs_LabelStyle) - Used to customize the appearance of axis labels. \ No newline at end of file diff --git a/maui-toolkit/Cartesian-Charts/BarChart.md b/maui-toolkit/Cartesian-Charts/BarChart.md index 11f36277..de51e8da 100644 --- a/maui-toolkit/Cartesian-Charts/BarChart.md +++ b/maui-toolkit/Cartesian-Charts/BarChart.md @@ -10,9 +10,9 @@ keywords: .net maui bar chart, maui bar chart, .net maui chart bar type, bar cha # Bar Chart in .NET MAUI Chart -A bar chart uses bars to represent data points and compare values across different categories. To render bar chart, initialize the [SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html) and switch the chart X and Y axes by using the [IsTransposed](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_IsTransposed) property as true. Then, create the column chart. To render a column chart, create an instance of [ColumnSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ColumnSeries.html), and add it to the [Series](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_Series) collection property of [SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html). +A bar chart uses horizontal bars to represent data points and compare values across different categories. To render a bar chart, initialize the [SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html) and set the [IsTransposed](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_IsTransposed) property to true. This effectively transforms a column chart into a bar chart by switching the chart's X and Y axes. To create the chart, instantiate a [ColumnSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ColumnSeries.html) and add it to the [Series](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_Series) collection of the [SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html). -N> By default, [IsTransposed](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_IsTransposed) property of the [SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html) is false. +N> By default, the [IsTransposed](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_IsTransposed) property of the [SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html) is false. N> The Cartesian chart has `Series` as its default content. @@ -65,7 +65,7 @@ this.Content = chart; ## Spacing and Width -The [Spacing](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ColumnSeries.html#Syncfusion_Maui_Toolkit_Charts_ColumnSeries_Spacing) property of the [ColumnSeries](hhttps://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ColumnSeries.html) is used to change the spacing between two segments. The default value of spacing is 0, and the value ranges from 0 to 1. Here, 1 and 0 correspond to 100% and 0% of the available space, respectively. +The [Spacing](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ColumnSeries.html#Syncfusion_Maui_Toolkit_Charts_ColumnSeries_Spacing) property of the [ColumnSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ColumnSeries.html) is used to change the spacing between two segments. The default value of spacing is 0, and the value ranges from 0 to 1. Here, 1 and 0 correspond to 100% and 0% of the available space, respectively. The [Width](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ColumnSeries.html#Syncfusion_Maui_Toolkit_Charts_ColumnSeries_Width) property of the [ColumnSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ColumnSeries.html) is used to change the width of the rectangle. The default value of the width is 0.8, and the value ranges from 0 to 1. @@ -107,8 +107,8 @@ ColumnSeries series = new ColumnSeries() ItemsSource = new ViewModel().Data, XBindingPath = "XValue", YBindingPath = "YValue", - Spacing = 0.3, // Set the spacing between columns (bars) in the series. - Width = 0.5 // Set the width of the columns (bars) in the series. + Spacing = 0.3, // Set the spacing between columns (bars) in the series + Width = 0.5 // Set the width of the columns (bars) in the series }; chart.Series.Add(series); diff --git a/maui-toolkit/Cartesian-Charts/BoxAndWhisker.md b/maui-toolkit/Cartesian-Charts/BoxAndWhisker.md index b9f038db..5e7335ec 100644 --- a/maui-toolkit/Cartesian-Charts/BoxAndWhisker.md +++ b/maui-toolkit/Cartesian-Charts/BoxAndWhisker.md @@ -1,11 +1,11 @@ --- layout: post -title: Box and whisker Chart in .NET MAUI Chart control | Syncfusion +title: Box and Whisker Chart in .NET MAUI Chart control | Syncfusion description: Learn here all about box and whisker chart support in Syncfusion® .NET MAUI Chart (SfCartesianChart) control. platform: maui-toolkit control: SfCartesianChart documentation: ug -keywords: .net maui box and whisker chart, maui box and whisker chart, box and whisker chart customization .net maui, syncfusion maui box and whisker chart, .net maui chart box plot visualization, .net maui chart box and whisker , .net maui box plot chart. +keywords: .net maui box and whisker chart, maui box and whisker chart, box and whisker chart customization .net maui, syncfusion maui box and whisker chart, .net maui chart box plot visualization, .net maui chart box and whisker, .net maui box plot chart. --- # Box and Whisker Chart in .NET MAUI Chart @@ -66,19 +66,19 @@ this.Content = chart; ![BoxAndWhisker chart type in MAUI Chart](Chart-types-images/BoxBasicRendering.png) -## Customize the series Box mode -The series box plotting mode can be changed by using [BoxPlotMode](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.BoxAndWhiskerSeries.html#Syncfusion_Maui_Toolkit_Charts_BoxAndWhiskerSeries_BoxPlotMode) property of [BoxAndWhiskerSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.BoxAndWhiskerSeries.html). The plotting mode of series can be calculated as follows: +## Customize the Series Box Mode +The series box plotting mode can be changed by using the [BoxPlotMode](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.BoxAndWhiskerSeries.html#Syncfusion_Maui_Toolkit_Charts_BoxAndWhiskerSeries_BoxPlotMode) property of [BoxAndWhiskerSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.BoxAndWhiskerSeries.html). The plotting mode of series can be calculated as follows: -* [`Exclusive`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.BoxPlotMode.html#Syncfusion_Maui_Toolkit_Charts_BoxPlotMode_Exclusive)- The quartile values are calculated by using the formula (N+1) * P (N count, P percentile) and its index value starts from 1 in the list. +* [`Exclusive`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.BoxPlotMode.html#Syncfusion_Maui_Toolkit_Charts_BoxPlotMode_Exclusive) - The quartile values are calculated by using the formula (N+1) * P (N count, P percentile) and its index value starts from 1 in the list. -* [`Inclusive`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.BoxPlotMode.html#Syncfusion_Maui_Toolkit_Charts_BoxPlotMode_Inclusive)- The quartile values are calculated by using the formula (N−1) * P (N count, P percentile) and its index value starts from 0 in the list. +* [`Inclusive`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.BoxPlotMode.html#Syncfusion_Maui_Toolkit_Charts_BoxPlotMode_Inclusive) - The quartile values are calculated by using the formula (N−1) * P (N count, P percentile) and its index value starts from 0 in the list. -* [`Normal`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.BoxPlotMode.html#Syncfusion_Maui_Toolkit_Charts_BoxPlotMode_Normal)- The quartile values are calculated by splitting the list and getting the median values. +* [`Normal`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.BoxPlotMode.html#Syncfusion_Maui_Toolkit_Charts_BoxPlotMode_Normal) - The quartile values are calculated by splitting the list and getting the median values. By default, [BoxPlotMode](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.BoxAndWhiskerSeries.html#Syncfusion_Maui_Toolkit_Charts_BoxAndWhiskerSeries_BoxPlotMode) value is [Exclusive](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.BoxPlotMode.html#Syncfusion_Maui_Toolkit_Charts_BoxPlotMode_Exclusive). ## Normal -In Normal mode, the whiskers extend to the minimum and maximum data points within two times the standard deviation of the data. This method assumes that the data is normally distributed. The following code illustrate how to define property [BoxPlotMode](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.BoxAndWhiskerSeries.html#Syncfusion_Maui_Toolkit_Charts_BoxAndWhiskerSeries_BoxPlotMode) value as [Normal](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.BoxPlotMode.html#Syncfusion_Maui_Toolkit_Charts_BoxPlotMode_Normal). +In Normal mode, the whiskers extend to the minimum and maximum data points within two times the standard deviation of the data. This method assumes that the data is normally distributed. The following code illustrates how to define the [BoxPlotMode](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.BoxAndWhiskerSeries.html#Syncfusion_Maui_Toolkit_Charts_BoxAndWhiskerSeries_BoxPlotMode) property value as [Normal](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.BoxPlotMode.html#Syncfusion_Maui_Toolkit_Charts_BoxPlotMode_Normal). {% tabs %} @@ -116,7 +116,7 @@ BoxAndWhiskerSeries series = new BoxAndWhiskerSeries() ItemsSource = new ViewModel().BoxWhiskerData, XBindingPath = "Department", YBindingPath = "Age", - BoxPlotMode = "Normal" // Set the mode of the box plot to "Normal" + BoxPlotMode = BoxPlotMode.Normal // Set the mode of the box plot to "Normal" }; chart.Series.Add(series); @@ -129,7 +129,7 @@ this.Content = chart; ![BoxPlotMode Normal in MAUI Chart](Chart-types-images/BoxModeNormal.png) ## Inclusive -In Inclusive mode, the whiskers extend to the minimum and maximum data points within 1.5 times the IQR. Any points beyond this range are considered outliers. The following code illustrate how to define property [BoxPlotMode](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.BoxAndWhiskerSeries.html#Syncfusion_Maui_Toolkit_Charts_BoxAndWhiskerSeries_BoxPlotMode) value as [Inclusive](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.BoxPlotMode.html#Syncfusion_Maui_Toolkit_Charts_BoxPlotMode_Inclusive). +In Inclusive mode, the whiskers extend to the minimum and maximum data points within 1.5 times the IQR. Any points beyond this range are considered outliers. The following code illustrates how to define the [BoxPlotMode](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.BoxAndWhiskerSeries.html#Syncfusion_Maui_Toolkit_Charts_BoxAndWhiskerSeries_BoxPlotMode) property value as [Inclusive](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.BoxPlotMode.html#Syncfusion_Maui_Toolkit_Charts_BoxPlotMode_Inclusive). {% tabs %} @@ -167,7 +167,7 @@ BoxAndWhiskerSeries series = new BoxAndWhiskerSeries() ItemsSource = new ViewModel().BoxWhiskerData, XBindingPath = "Department", YBindingPath = "Age", - BoxPlotMode = "Inclusive" // Set the mode of the box plot to "Inclusive" + BoxPlotMode = BoxPlotMode.Inclusive // Set the mode of the box plot to "Inclusive" }; chart.Series.Add(series); @@ -180,7 +180,7 @@ this.Content = chart; ![BoxPlotMode Inclusive in MAUI Chart](Chart-types-images/BoxModeInclusive.png) ## ShowMedian -The Median values of given dataset is viewed by enabling the [ShowMedian](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.BoxAndWhiskerSeries.html#Syncfusion_Maui_Toolkit_Charts_BoxAndWhiskerSeries_ShowMedian) property of [BoxAndWhiskerSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.BoxAndWhiskerSeries.html). By default, the ShowMedian property value is `False`. The following code illustrates how to enable the [ShowMedian](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.BoxAndWhiskerSeries.html#Syncfusion_Maui_Toolkit_Charts_BoxAndWhiskerSeries_ShowMedian) property. +The median values of the given dataset can be displayed by enabling the [ShowMedian](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.BoxAndWhiskerSeries.html#Syncfusion_Maui_Toolkit_Charts_BoxAndWhiskerSeries_ShowMedian) property of [BoxAndWhiskerSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.BoxAndWhiskerSeries.html). By default, the ShowMedian property value is `false`. The following code illustrates how to enable the [ShowMedian](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.BoxAndWhiskerSeries.html#Syncfusion_Maui_Toolkit_Charts_BoxAndWhiskerSeries_ShowMedian) property. {% tabs %} @@ -218,7 +218,7 @@ BoxAndWhiskerSeries series = new BoxAndWhiskerSeries() ItemsSource = new ViewModel().BoxWhiskerData, XBindingPath = "Department", YBindingPath = "Age", - ShowMedian = true, // Enable the median line display in the box plot + ShowMedian = true // Enable the median line display in the box plot }; chart.Series.Add(series); @@ -238,7 +238,7 @@ N> * The middle number of data points is the median for the odd number of data p The outlier displays the outlier point that lies either under the lower whisker or above the upper whisker line. It is an observation numerically distant from the rest of the data. ## ShowOutlier -The outlier value in the box plot can be viewed by enabling the [ShowOutlier](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.BoxAndWhiskerSeries.html#Syncfusion_Maui_Toolkit_Charts_BoxAndWhiskerSeries_ShowOutlier) property of [BoxAndWhiskerSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.BoxAndWhiskerSeries.html).By default, [ShowOutlier](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.BoxAndWhiskerSeries.html#Syncfusion_Maui_Toolkit_Charts_BoxAndWhiskerSeries_ShowOutlier) value is `true`. The following code demonstrates how to disable the [ShowOutlier](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.BoxAndWhiskerSeries.html#Syncfusion_Maui_Toolkit_Charts_BoxAndWhiskerSeries_ShowOutlier) property. +The outlier value in the box plot can be viewed by enabling the [ShowOutlier](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.BoxAndWhiskerSeries.html#Syncfusion_Maui_Toolkit_Charts_BoxAndWhiskerSeries_ShowOutlier) property of [BoxAndWhiskerSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.BoxAndWhiskerSeries.html). By default, the [ShowOutlier](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.BoxAndWhiskerSeries.html#Syncfusion_Maui_Toolkit_Charts_BoxAndWhiskerSeries_ShowOutlier) value is `true`. The following code demonstrates how to disable the [ShowOutlier](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.BoxAndWhiskerSeries.html#Syncfusion_Maui_Toolkit_Charts_BoxAndWhiskerSeries_ShowOutlier) property. {% tabs %} @@ -290,7 +290,7 @@ this.Content = chart; ## OutlierShapeType -The [OutlierShapeType](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.BoxAndWhiskerSeries.html#Syncfusion_Maui_Toolkit_Charts_BoxAndWhiskerSeries_OutlierShapeType) displays the outlier point with different symbols. The available symbols are Cross, Diamond, Circle, Hexagon, InvertedTriangle, Pentagon, Plus, Rectangle and Triangle. By default, [OutlierShapeType](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.BoxAndWhiskerSeries.html#Syncfusion_Maui_Toolkit_Charts_BoxAndWhiskerSeries_OutlierShapeType) value is [Circle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ShapeType.html#Syncfusion_Maui_Toolkit_Charts_ShapeType_Circle). +The [OutlierShapeType](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.BoxAndWhiskerSeries.html#Syncfusion_Maui_Toolkit_Charts_BoxAndWhiskerSeries_OutlierShapeType) displays the outlier point with different symbols. The available symbols are Cross, Diamond, Circle, Hexagon, InvertedTriangle, Pentagon, Plus, Rectangle, and Triangle. By default, the [OutlierShapeType](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.BoxAndWhiskerSeries.html#Syncfusion_Maui_Toolkit_Charts_BoxAndWhiskerSeries_OutlierShapeType) value is [Circle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ShapeType.html#Syncfusion_Maui_Toolkit_Charts_ShapeType_Circle). The following code shows how to set the [OutlierShapeType](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.BoxAndWhiskerSeries.html#Syncfusion_Maui_Toolkit_Charts_BoxAndWhiskerSeries_OutlierShapeType) value as [Cross](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ShapeType.html#Syncfusion_Maui_Toolkit_Charts_ShapeType_Cross). diff --git a/maui-toolkit/Cartesian-Charts/Bubble.md b/maui-toolkit/Cartesian-Charts/Bubble.md index e5eb2264..49891288 100644 --- a/maui-toolkit/Cartesian-Charts/Bubble.md +++ b/maui-toolkit/Cartesian-Charts/Bubble.md @@ -12,11 +12,11 @@ keywords: .net maui bubble chart, maui bubble chart, bubble chart customization ## Bubble Chart -The bubble chart is represented by closely packed circles, whose areas are proportional to the quantities. +The bubble chart is represented by closely packed circles whose areas are proportional to the quantities they represent. -To render a bubble chart, create an instance of [BubbleSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.BubbleSeries.html), and add it to the [Series](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_Series) collection property of [SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html). The bubble chart is similar to a scatter plot, but with the additional dimension of bubble size to represent the third variable. +To render a bubble chart, create an instance of [BubbleSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.BubbleSeries.html), and add it to the [Series](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_Series) collection property of [SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html). The bubble chart is similar to a scatter plot, but with the additional dimension of bubble size to represent a third variable. -The size of the [BubbleSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.BubbleSeries.html) is relatively proportional to the value bound with the series using the [SizeValuePath](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.BubbleSeries.html#Syncfusion_Maui_Toolkit_Charts_BubbleSeries_SizeValuePath) property. You can set the constraints on this size using the [MinimumRadius](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.BubbleSeries.html#Syncfusion_Maui_Toolkit_Charts_BubbleSeries_MinimumRadius) and [MaximumRadius](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.BubbleSeries.html#Syncfusion_Maui_Toolkit_Charts_BubbleSeries_MaximumRadius). The following code illustrates how to set the value to the property. +The size of the [BubbleSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.BubbleSeries.html) is proportional to the value bound with the series using the [SizeValuePath](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.BubbleSeries.html#Syncfusion_Maui_Toolkit_Charts_BubbleSeries_SizeValuePath) property. You can set constraints on this size using the [MinimumRadius](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.BubbleSeries.html#Syncfusion_Maui_Toolkit_Charts_BubbleSeries_MinimumRadius) and [MaximumRadius](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.BubbleSeries.html#Syncfusion_Maui_Toolkit_Charts_BubbleSeries_MaximumRadius) properties. N> The Cartesian chart has [Series](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_Series) as its default content. @@ -73,7 +73,8 @@ this.Content = chart; ![Bubble chart type in MAUI Chart](Chart-Types-images/BubbleBasisImage.png) ## Show zero size bubbles -The zero size bubble segments can be enabled or disabled using the [ShowZeroSizeBubbles](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.BubbleSeries.html#Syncfusion_Maui_Toolkit_Charts_BubbleSeries_ShowZeroSizeBubbles) property. By default, the property value is `True`. The following code illustrates how to set the value to the property. + +The zero size bubble segments can be enabled or disabled using the [ShowZeroSizeBubbles](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.BubbleSeries.html#Syncfusion_Maui_Toolkit_Charts_BubbleSeries_ShowZeroSizeBubbles) property. By default, the property value is `True`. The following code illustrates how to set this property: {% tabs %} @@ -101,7 +102,7 @@ BubbleSeries bubbleSeries = new BubbleSeries() XBindingPath = "XValue", YBindingPath = "YValue", SizeValuePath = "Size", - ShowZeroSizeBubbles = false; + ShowZeroSizeBubbles = false }; chart.Series.Add(bubbleSeries); @@ -111,4 +112,4 @@ this.Content = chart; {% endtabs %} -![ShowZeroSize bubble type in MAUI Chart](Chart-Types-images/ShowZeroSizeBubble.png) \ No newline at end of file +![ShowZeroSize bubble type in MAUI Chart](Chart-Types-images/ShowZeroSizeBubble.png) \ No newline at end of file diff --git a/maui-toolkit/Cartesian-Charts/Candle.md b/maui-toolkit/Cartesian-Charts/Candle.md index 6cbc2c56..c75598bc 100644 --- a/maui-toolkit/Cartesian-Charts/Candle.md +++ b/maui-toolkit/Cartesian-Charts/Candle.md @@ -12,11 +12,11 @@ keywords: .net maui candle chart, candle chart customization .net maui, syncfusi ## Candle Chart -Candle charts are a type of financial chart used to represent the price movement of an asset over time. The chart is made up of a series of rectangular bars, called candlesticks, that represent a specific time, typically one day. To render a candle chart, create an instance of [CandleSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CandleSeries.html), and add it to the [Series](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_Series) collection property of [SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html). +Candle charts are a type of financial chart used to represent the price movement of an asset over time. The chart consists of a series of rectangular bars, called candlesticks, that represent a specific time period, typically one day. To render a candle chart, create an instance of [CandleSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CandleSeries.html), and add it to the [Series](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_Series) collection property of [SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html). N> The Cartesian chart has [Series](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_Series) as its default content. -To plot a point on a candlestick chart, a collection of five values is required, including the X-value, open value, high value, low value, and close value. You can use the below collection. +To plot a point on a candlestick chart, a collection of five values is required: X-value, open value, high value, low value, and close value. You can use the collection shown below: {% tabs %} @@ -91,7 +91,7 @@ this.Content = chart; ## Bull and Bear Color -In the Candle chart, the [BullishFill](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.FinancialSeriesBase.html#Syncfusion_Maui_Toolkit_Charts_FinancialSeriesBase_BullishFill) property is used to specify a fill color for the segments that indicates an increase in the stock price in the measured time interval, and the [BearishFill](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.FinancialSeriesBase.html#Syncfusion_Maui_Toolkit_Charts_FinancialSeriesBase_BearishFill) property is used to specify a fill color for the segments that indicates a decrease in the stock price in the measured time interval. +In the Candle chart, the [BullishFill](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.FinancialSeriesBase.html#Syncfusion_Maui_Toolkit_Charts_FinancialSeriesBase_BullishFill) property is used to specify a fill color for segments that indicate an increase in stock price during the measured time interval. The [BearishFill](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.FinancialSeriesBase.html#Syncfusion_Maui_Toolkit_Charts_FinancialSeriesBase_BearishFill) property is used to specify a fill color for segments that indicate a decrease in stock price during the measured time interval. {% tabs %} diff --git a/maui-toolkit/Cartesian-Charts/Column.md b/maui-toolkit/Cartesian-Charts/Column.md index f500a6f9..cb22c559 100644 --- a/maui-toolkit/Cartesian-Charts/Column.md +++ b/maui-toolkit/Cartesian-Charts/Column.md @@ -73,7 +73,6 @@ The [Width](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit. {% highlight xaml %} - @@ -83,11 +82,10 @@ The [Width](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit. - + XBindingPath="XValue" + YBindingPath="YValue" + Spacing="0.5" + Width="0.6"/> {% endhighlight %} @@ -168,7 +166,7 @@ ColumnSeries series2 = new ColumnSeries() ItemsSource = new ViewModel().Data2, XBindingPath = "XValue", YBindingPath = "YValue", - Width = 0.2; + Width = 0.2 }; chart.Series.Add(series1); diff --git a/maui-toolkit/Cartesian-Charts/Customize-each-chart-axis-label.md b/maui-toolkit/Cartesian-Charts/Customize-each-chart-axis-label.md index d1433b41..6a241b4e 100644 --- a/maui-toolkit/Cartesian-Charts/Customize-each-chart-axis-label.md +++ b/maui-toolkit/Cartesian-Charts/Customize-each-chart-axis-label.md @@ -1,6 +1,6 @@ --- layout: post -title: Customize each axis chart label using the callback event | Syncfusion +title: Customize each chart axis label using the callback event | Syncfusion description: Learn here all about to customize each chart axis label using the callback event in Syncfusion® .NET MAUI Chart (SfCartesianChart) control. platform: maui-toolkit control: SfCartesianChart diff --git a/maui-toolkit/Cartesian-Charts/DataLabels.md b/maui-toolkit/Cartesian-Charts/DataLabels.md index c851244e..3d1f4d9a 100644 --- a/maui-toolkit/Cartesian-Charts/DataLabels.md +++ b/maui-toolkit/Cartesian-Charts/DataLabels.md @@ -1,7 +1,7 @@ --- layout: post title: Data label in .NET MAUI Chart control | Syncfusion -description: This section explains about how to configure the data labels and its features in .NET MAUI Chart (SfCartesianChart). +description: This section explains how to configure the data labels and their features in .NET MAUI Chart (SfCartesianChart). platform: maui-toolkit control: SfCartesianChart documentation: ug @@ -10,7 +10,7 @@ keywords: .net maui chart data label, maui chart data label, .net maui data labe # Data Labels in .NET MAUI Chart -Data labels are used to display values related to a chart segment. Values from data point(x, y) or other custom properties from a data source can be displayed. +Data labels are used to display values related to a chart segment. Values from data points (x, y) or other custom properties from a data source can be displayed. Each data label can be represented by the following: @@ -29,7 +29,8 @@ The [ShowDataLabels](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui . . . + YBindingPath="Value" + ShowDataLabels="True"> @@ -53,18 +54,17 @@ this.Content = chart; {% endtabs %} -Data labels can be customized by using the [DataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CartesianSeries.html#Syncfusion_Maui_Toolkit_Charts_CartesianSeries_DataLabelSettings) property of chart series. For customizing, need to create an instance of [CartesianDataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CartesianDataLabelSettings.html) and set to the [DataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CartesianSeries.html#Syncfusion_Maui_Toolkit_Charts_CartesianSeries_DataLabelSettings) property. Following properties are used to customize the data labels which are available in [CartesianDataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CartesianDataLabelSettings.html). +Data labels can be customized by using the [DataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CartesianSeries.html#Syncfusion_Maui_Toolkit_Charts_CartesianSeries_DataLabelSettings) property of chart series. For customizing, you need to create an instance of [CartesianDataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CartesianDataLabelSettings.html) and set it to the [DataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CartesianSeries.html#Syncfusion_Maui_Toolkit_Charts_CartesianSeries_DataLabelSettings) property. The following properties are used to customize the data labels which are available in [CartesianDataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CartesianDataLabelSettings.html): -* [BarAlignment](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CartesianDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_CartesianDataLabelSettings_BarAlignment) - Gets or sets the data label alignment top, middle or bottom. -* [LabelPlacement](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartDataLabelSettings_LabelPlacement) - Gets or sets the data label position inside, outside or default. -* [LabelStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartDataLabelSettings_LabelStyle) - Gets or sets the options for customizing the data labels. +* [BarAlignment](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CartesianDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_CartesianDataLabelSettings_BarAlignment) - Gets or sets the data label alignment to top, middle, or bottom. +* [LabelPlacement](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartDataLabelSettings_LabelPlacement) - Gets or sets the data label position to inside, outside, or default. +* [LabelStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartDataLabelSettings_LabelStyle) - Gets or sets the options for customizing the data labels. * [UseSeriesPalette](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartDataLabelSettings_UseSeriesPalette) - Gets or sets a value indicating whether the data label should reflect the series interior. - -![Data label in MAUI chart](DataLabel_images/maui_chart_data_label.jpg) +![Data label in MAUI chart](DataLabel_images/maui_chart_data_label.jpg) ## Data Label Alignment -The alignment of data labels inside the series is defined by using the [BarAlignment](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CartesianDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_CartesianDataLabelSettings_BarAlignment) property. +The alignment of data labels inside the series is defined by using the [BarAlignment](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CartesianDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_CartesianDataLabelSettings_BarAlignment) property. * [Top](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DataLabelAlignment.html#Syncfusion_Maui_Toolkit_Charts_DataLabelAlignment_Top) - Positions the data label at the top edge point of a chart segment. * [Middle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DataLabelAlignment.html#Syncfusion_Maui_Toolkit_Charts_DataLabelAlignment_Middle) - Positions the data label at the center point of a chart segment. @@ -110,13 +110,13 @@ this.Content = chart; ## LabelPlacement -Other than the above alignment options, Chart providing additional customization option to position the data labels. +In addition to the alignment options, Chart provides additional customization options to position the data labels. -The [LabelPlacement](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartDataLabelSettings_LabelPlacement) property is used to position the data labels at [Center](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DataLabelPlacement.html#Syncfusion_Maui_Toolkit_Charts_DataLabelPlacement_Center), [Inner](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DataLabelPlacement.html#Syncfusion_Maui_Toolkit_Charts_DataLabelPlacement_Inner) and [Outer](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DataLabelPlacement.html#Syncfusion_Maui_Toolkit_Charts_DataLabelPlacement_Outer) position of the actual data point position. By default, labels are positioned based on the series types for better readability. +The [LabelPlacement](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartDataLabelSettings_LabelPlacement) property is used to position the data labels at [Center](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DataLabelPlacement.html#Syncfusion_Maui_Toolkit_Charts_DataLabelPlacement_Center), [Inner](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DataLabelPlacement.html#Syncfusion_Maui_Toolkit_Charts_DataLabelPlacement_Inner), and [Outer](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DataLabelPlacement.html#Syncfusion_Maui_Toolkit_Charts_DataLabelPlacement_Outer) positions relative to the actual data point position. By default, labels are positioned based on the series types for better readability. ## Applying Series Brush -[UseSeriesPalette](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartDataLabelSettings_UseSeriesPalette) property is used to set the interior of the series to the data marker background. +The [UseSeriesPalette](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartDataLabelSettings_UseSeriesPalette) property is used to apply the interior color of the series to the data label background. {% tabs %} @@ -156,9 +156,9 @@ this.Content = chart; ## Formatting Label Context -The content of the label can be customized using the [LabelContext](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_LabelContext) property. Following are the two options that are supported now, +The content of the label can be customized using the [LabelContext](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_LabelContext) property. The following options are currently supported: -* [Percentage](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.LabelContext.html#Syncfusion_Maui_Toolkit_Charts_LabelContext_Percentage) - This will show the percentage value of corresponding data point Y value. +* [Percentage](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.LabelContext.html#Syncfusion_Maui_Toolkit_Charts_LabelContext_Percentage) - This will show the percentage value of the corresponding data point's Y value. * [YValue](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.LabelContext.html#Syncfusion_Maui_Toolkit_Charts_LabelContext_YValue) - This will show the corresponding Y value. @@ -168,10 +168,10 @@ The content of the label can be customized using the [LabelContext](https://help . . . - @@ -188,12 +188,12 @@ ColumnSeries series = new ColumnSeries() XBindingPath = "XValue", YBindingPath = "YValue", ShowDataLabels = true, - LabelContext = LabelContext.Percentage // Set the context for the displayed data labels + LabelContext = LabelContext.Percentage // Set the context for the displayed data labels }; chart.Series.Add(series); this.Content = chart; - + {% endhighlight %} {% endtabs %} @@ -213,14 +213,14 @@ The [SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Ma - . . . @@ -266,17 +266,17 @@ DataTemplate labelTemplate = new DataTemplate(() => WidthRequest = 15, HeightRequest = 15 }; - + horizontalStackLayout.Children.Add(image); horizontalStackLayout.Children.Add(label); - + return horizontalStackLayout; }); series.LabelTemplate = labelTemplate; // Assign the custom label template to the series chart.Series.Add(series); this.Content = chart; - + {% endhighlight %} {% endtabs %} diff --git a/maui-toolkit/Cartesian-Charts/EmptyPoints.md b/maui-toolkit/Cartesian-Charts/EmptyPoints.md index d52b5439..8c5f54aa 100644 --- a/maui-toolkit/Cartesian-Charts/EmptyPoints.md +++ b/maui-toolkit/Cartesian-Charts/EmptyPoints.md @@ -9,11 +9,11 @@ keywords: .net maui chart empty points, .net maui empty points customization, sy --- # Empty Points in .NET MAUI Chart -Empty Points are used to indicate missing or null data in a series. These empty points can occur when data is unavailable, improperly formatted, or explicitly set as null or double.NaN. The chart provides options to handle and customize these empty points to enhance visualization and maintain the integrity of data representation. +Empty points are used to indicate missing or null data in a series. These empty points can occur when data is unavailable, improperly formatted, or explicitly set as null or double.NaN. The chart provides options to handle and customize these empty points to enhance visualization and maintain the integrity of data representation. [SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html) provides support for empty points, allowing users to handle missing data effectively. -The data collection that is passed to the chart can have NaN or Null values that are considered as empty points. The empty point can be defined as in the below code example. +The data collection passed to the chart can have NaN or null values that are considered as empty points. Empty points can be defined as shown in the code example below: {% highlight C# %} @@ -28,20 +28,20 @@ ProductSales.Add(new Model() { Product = "Books", Sales = 50 }); {% endhighlight %} -By default, the [EmptyPointMode](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.EmptyPointMode.html) property is `None`. So the empty points will not be rendered as shown in the below. +By default, the [EmptyPointMode](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.EmptyPointMode.html) property is set to `None`. Therefore, empty points will not be rendered as shown below: ![Empty Points in MAUI Chart](EmptyPoints_images/EmptyPoints_Default.png) ## Empty Point Mode The [EmptyPointMode](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.EmptyPointMode.html) property of series specifies how empty points should be handled. -This property provides the following options. +This property provides the following options: * **None** - Empty points are not rendered. This is the default behavior. * **Zero** - Empty points will be replaced with zero. * **Average** - Empty points will be replaced with the average value of the surrounding data points. -The following code example shows the [EmptyPointMode](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.EmptyPointMode.html) as `Zero`. +The following code example shows the [EmptyPointMode](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.EmptyPointMode.html) set to `Zero`: {% tabs %} @@ -82,7 +82,7 @@ this.Content = chart; ![EmptyPoint Mode Zero in MAUI Chart](EmptyPoints_images/EmptyPoints_Mode_Zero.png) -The following code example shows the [EmptyPointMode](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.EmptyPointMode.html) as `Average`. +The following code example shows the [EmptyPointMode](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.EmptyPointMode.html) set to `Average`: {% tabs %} @@ -124,7 +124,7 @@ this.Content = chart; ![EmptyPoint Mode Average in MAUI Chart](EmptyPoints_images/EmptyPoints_Mode_Average.png) ## Empty Point Customization -The [EmptyPointSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.EmptyPointSettings.html) property allows you to customize the appearance of empty points in a series. This enables you to adjust various visual aspects of empty points, making them more distinct from the other data points. You can modify the following properties within [EmptyPointSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.EmptyPointSettings.html). +The [EmptyPointSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.EmptyPointSettings.html) property allows you to customize the appearance of empty points in a series. This enables you to adjust various visual aspects of empty points, making them more distinct from the other data points. You can modify the following properties within [EmptyPointSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.EmptyPointSettings.html): * [Fill](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.EmptyPointSettings.html#Syncfusion_Maui_Toolkit_Charts_EmptyPointSettings_Fill) - Gets or sets the fill color for the empty points. * [Stroke](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.EmptyPointSettings.html#Syncfusion_Maui_Toolkit_Charts_EmptyPointSettings_Stroke) - Gets or sets the stroke color for empty points. @@ -171,13 +171,13 @@ LineSeries series = new LineSeries() EmptyPointMode = EmptyPointMode.Average }; -EmptyPointSettings emptypointSettings = new EmptyPointSettings() +EmptyPointSettings emptyPointSettings = new EmptyPointSettings() { Fill = Colors.Orange, StrokeWidth = 2 }; -series.EmptyPointSettings = emptypointSettings; +series.EmptyPointSettings = emptyPointSettings; chart.Series.Add(series); this.Content = chart; @@ -186,6 +186,8 @@ this.Content = chart; {% endtabs %} -![Customize EmptyPoints in MAUI Chart](EmptyPoints_images\Customize_EmptyPoints.png) +![Customize EmptyPoints in MAUI Chart](EmptyPoints_images/Customize_EmptyPoints.png) N> EmptyPoint support is not applicable for Histogram and BoxAndWhisker series. + + diff --git a/maui-toolkit/Cartesian-Charts/Errorbar-Chart.md b/maui-toolkit/Cartesian-Charts/Errorbar-Chart.md index faf24c67..401c2dab 100644 --- a/maui-toolkit/Cartesian-Charts/Errorbar-Chart.md +++ b/maui-toolkit/Cartesian-Charts/Errorbar-Chart.md @@ -12,12 +12,12 @@ keywords: .net maui error bar chart, error bar chart customization .net maui, sy ## Error Bar Chart -[ErrorBarSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ErrorBarSeries.html) indicates the errors or uncertainty in reported values. This will find the possible variations in measurements, and in Chart control these values are displayed as data points. -The [HorizontalErrorValue](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ErrorBarSeries.html#Syncfusion_Maui_Toolkit_Charts_ErrorBarSeries_HorizontalErrorValue) and the [VerticalErrorValue](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ErrorBarSeries.html#Syncfusion_Maui_Toolkit_Charts_ErrorBarSeries_VerticalErrorValue) is used to set the error value(variation) to the series. +[ErrorBarSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ErrorBarSeries.html) indicates the errors or uncertainty in reported values. This helps visualize the possible variations in measurements, and in the Chart control these values are displayed as data points. +The [HorizontalErrorValue](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ErrorBarSeries.html#Syncfusion_Maui_Toolkit_Charts_ErrorBarSeries_HorizontalErrorValue) and the [VerticalErrorValue](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ErrorBarSeries.html#Syncfusion_Maui_Toolkit_Charts_ErrorBarSeries_VerticalErrorValue) properties are used to set the error value (variation) to the series. -N> The Error Bar is not an individual Chart, it associate with a main Chart. Here, we use `Scatter Series Chart` as Main Chart with the Error Bar Series Chart Support +N> The Error Bar is not an individual chart; it associates with a main chart. Here, we use `Scatter Series Chart` as the main chart with the Error Bar Series Chart support. -The following code examples illustrates how to create error bar series: +The following code examples illustrate how to create an error bar series: {% tabs %} @@ -76,7 +76,7 @@ ErrorBarSeries errorBar = new ErrorBarSeries() VerticalErrorValue = 50 }; -// Add the both series to the chart's series collection +// Add both series to the chart's series collection chart.Series.Add(scatterSeries); chart.Series.Add(errorBar); @@ -89,10 +89,10 @@ this.Content = chart; ![Error Bar Series in MAUI Chart](Chart-types-images/maui_errorbar_BasicRendering.png) ## Mode -The error bar mode specifies whether the error bar should be drawn horizontally, vertically or both. The [Mode](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ErrorBarSeries.html#Syncfusion_Maui_Toolkit_Charts_ErrorBarSeries_Mode) property used to switch the error bar mode. By default, the Mode value is [Both](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ErrorBarMode.html#Syncfusion_Maui_Toolkit_Charts_ErrorBarMode_Both), which will display both horizontal and vertical error values. +The error bar mode specifies whether the error bar should be drawn horizontally, vertically, or both. The [Mode](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ErrorBarSeries.html#Syncfusion_Maui_Toolkit_Charts_ErrorBarSeries_Mode) property is used to switch the error bar mode. By default, the Mode value is [Both](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ErrorBarMode.html#Syncfusion_Maui_Toolkit_Charts_ErrorBarMode_Both), which will display both horizontal and vertical error values. ### Both -To view both the horizontal and vertical error value, you can set the Mode as `Both` as shown in the following code example. +To view both the horizontal and vertical error values, you can set the Mode as `Both` as shown in the following code example: {% tabs %} @@ -117,18 +117,18 @@ ErrorBarSeries errorBar = new ErrorBarSeries() YBindingPath = "Coal", HorizontalErrorValue = 0.5, VerticalErrorValue = 50, - Mode = Both // Specifies the mode of the error bars + Mode = ErrorBarMode.Both // Specifies the mode of the error bars }; {% endhighlight %} {% endtabs %} -![Horizontal Mode Support in Error Bar Series](Chart-types-images/maui_errorbar_BasicRendering.png) +![Both Mode Support in Error Bar Series](Chart-types-images/maui_errorbar_BasicRendering.png) ### Horizontal -To view horizontal error value, you can set the Mode as `Horizontal` as shown in the following code example. +To view only horizontal error values, you can set the Mode as `Horizontal` as shown in the following code example: {% tabs %} @@ -153,7 +153,7 @@ ErrorBarSeries errorBar = new ErrorBarSeries() YBindingPath = "Coal", HorizontalErrorValue = 0.5, VerticalErrorValue = 50, - Mode = Horizontal + Mode = ErrorBarMode.Horizontal }; chart.Series.Add(errorBar); @@ -166,13 +166,13 @@ chart.Series.Add(errorBar); ### Vertical -To view vertical error value, you can set the Mode as `Vertical`, as shown in the below code example. +To view only vertical error values, you can set the Mode as `Vertical`, as shown in the following code example: {% tabs %} {% highlight xaml %} - + VerticalDirection="Minus"> {% endhighlight %} @@ -242,18 +240,18 @@ ErrorBarSeries errorBar = new ErrorBarSeries() HorizontalErrorValue = 0.5, VerticalErrorValue = 50, HorizontalDirection = ErrorBarDirection.Plus, // Sets the direction of the horizontal error bars - VerticalDirectyion = ErrorBarDirection.Minus // Sets the direction of the vertical error bars + VerticalDirection = ErrorBarDirection.Minus // Sets the direction of the vertical error bars }; {% endhighlight %} {% endtabs %} -![Horizontal Direction as Both in Error Bar Series](Chart-types-images/maui_errorbar_Direction.png) +![Direction Configuration in Error Bar Series](Chart-types-images/maui_errorbar_Direction.png) ## Type -The [Type](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ErrorBarSeries.html#Syncfusion_Maui_Toolkit_Charts_ErrorBarSeries_Type) property is used to define the error bar type value in [Fixed](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ErrorBarType.html#Syncfusion_Maui_Toolkit_Charts_ErrorBarType_Fixed), [Custom](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ErrorBarType.html#Syncfusion_Maui_Toolkit_Charts_ErrorBarType_Custom), [Percentage](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ErrorBarType.html#Syncfusion_Maui_Toolkit_Charts_ErrorBarType_Percentage), [StandardDeviation](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ErrorBarType.html#Syncfusion_Maui_Toolkit_Charts_ErrorBarType_StandardDeviation), and [StandardErrors](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ErrorBarType.html#Syncfusion_Maui_Toolkit_Charts_ErrorBarType_StandardError). The default value of this property is [Fixed](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ErrorBarType.html#Syncfusion_Maui_Toolkit_Charts_ErrorBarType_Fixed). For all types, You have to set the values for [HorizontalErrorValue](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ErrorBarSeries.html#Syncfusion_Maui_Toolkit_Charts_ErrorBarSeries_HorizontalErrorValue) and [VerticalErrorValue](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ErrorBarSeries.html#Syncfusion_Maui_Toolkit_Charts_ErrorBarSeries_VerticalErrorValue) except [Custom](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ErrorBarType.html#Syncfusion_Maui_Toolkit_Charts_ErrorBarType_Custom). +The [Type](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ErrorBarSeries.html#Syncfusion_Maui_Toolkit_Charts_ErrorBarSeries_Type) property is used to define the error bar type value as [Fixed](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ErrorBarType.html#Syncfusion_Maui_Toolkit_Charts_ErrorBarType_Fixed), [Custom](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ErrorBarType.html#Syncfusion_Maui_Toolkit_Charts_ErrorBarType_Custom), [Percentage](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ErrorBarType.html#Syncfusion_Maui_Toolkit_Charts_ErrorBarType_Percentage), [StandardDeviation](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ErrorBarType.html#Syncfusion_Maui_Toolkit_Charts_ErrorBarType_StandardDeviation), or [StandardError](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ErrorBarType.html#Syncfusion_Maui_Toolkit_Charts_ErrorBarType_StandardError). The default value of this property is [Fixed](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ErrorBarType.html#Syncfusion_Maui_Toolkit_Charts_ErrorBarType_Fixed). For all types, you need to set the values for [HorizontalErrorValue](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ErrorBarSeries.html#Syncfusion_Maui_Toolkit_Charts_ErrorBarSeries_HorizontalErrorValue) and [VerticalErrorValue](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ErrorBarSeries.html#Syncfusion_Maui_Toolkit_Charts_ErrorBarSeries_VerticalErrorValue) except for [Custom](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ErrorBarType.html#Syncfusion_Maui_Toolkit_Charts_ErrorBarType_Custom). ### Fixed @@ -393,7 +391,7 @@ ErrorBarSeries errorBar = new ErrorBarSeries() ### Custom -If the Type is Custom, you have to bind the [HorizontalErrorPath](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ErrorBarSeries.html#Syncfusion_Maui_Charts_ErrorBarSeries_HorizontalErrorPath) and the [VerticalErrorPath](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ErrorBarSeries.html#Syncfusion_Maui_Charts_ErrorBarSeries_VerticalErrorPath) as shown in the following code sample. +If the Type is Custom, you have to bind the [HorizontalErrorPath](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ErrorBarSeries.html#Syncfusion_Maui_Charts_ErrorBarSeries_HorizontalErrorPath) and the [VerticalErrorPath](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ErrorBarSeries.html#Syncfusion_Maui_Charts_ErrorBarSeries_VerticalErrorPath) as shown in the following code sample: {% tabs %} @@ -435,7 +433,7 @@ ErrorBarSeries errorBar = new ErrorBarSeries() ### Line Style -You can define the LineStyle for the error bar lines using the [HorizontalLineStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ErrorBarSeries.html#Syncfusion_Maui_Toolkit_Charts_ErrorBarSeries_HorizontalLineStyle) and the [VerticalLineStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ErrorBarSeries.html#Syncfusion_Maui_Toolkit_Charts_ErrorBarSeries_VerticalLineStyle) properties as in the following code examples. +You can define the line style for the error bar lines using the [HorizontalLineStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ErrorBarSeries.html#Syncfusion_Maui_Toolkit_Charts_ErrorBarSeries_HorizontalLineStyle) and the [VerticalLineStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ErrorBarSeries.html#Syncfusion_Maui_Toolkit_Charts_ErrorBarSeries_VerticalLineStyle) properties as shown in the following code examples: {% tabs %} @@ -488,11 +486,11 @@ errorBar.VerticalLineStyle = new ErrorBarLineStyle() {% endtabs %} -![Horizontal Line Style in Error Bar Series](Chart-types-images/maui_errorbar_LineStyle.png) +![Line Style in Error Bar Series](Chart-types-images/maui_errorbar_LineStyle.png) ### Cap Line Style -You can define the CapLineStyle for the error bar lines using the [HorizontalCapLineStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ErrorBarSeries.html#Syncfusion_Maui_Toolkit_Charts_ErrorBarSeries_HorizontalCapLineStyle) and the [VerticalCapLineStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ErrorBarSeries.html#Syncfusion_Maui_Toolkit_Charts_ErrorBarSeries_VerticalCapLineStyle) properties as in the following code examples. +You can define the cap line style for the error bar lines using the [HorizontalCapLineStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ErrorBarSeries.html#Syncfusion_Maui_Toolkit_Charts_ErrorBarSeries_HorizontalCapLineStyle) and the [VerticalCapLineStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ErrorBarSeries.html#Syncfusion_Maui_Toolkit_Charts_ErrorBarSeries_VerticalCapLineStyle) properties as shown in the following code examples: {% tabs %} @@ -534,7 +532,7 @@ errorBar.HorizontalCapLineStyle = new ErrorBarCapLineStyle() }; // Define the style for the vertical cap lines of the error bars -errorBarSeries.VerticalCapLineStyle = new ErrorBarCapLineStyle() +errorBar.VerticalCapLineStyle = new ErrorBarCapLineStyle() { Stroke = new SolidColorBrush(Colors.Red), StrokeWidth = 2 @@ -544,4 +542,4 @@ errorBarSeries.VerticalCapLineStyle = new ErrorBarCapLineStyle() {% endtabs %} -![Horizontal Cap Line Style in Error Bar Series](Chart-types-images/maui_errorbar_CapLineStyle.png) \ No newline at end of file +![Cap Line Style in Error Bar Series](Chart-types-images/maui_errorbar_CapLineStyle.png) \ No newline at end of file diff --git a/maui-toolkit/Cartesian-Charts/Exporting.md b/maui-toolkit/Cartesian-Charts/Exporting.md index f0915a02..1323f98b 100644 --- a/maui-toolkit/Cartesian-Charts/Exporting.md +++ b/maui-toolkit/Cartesian-Charts/Exporting.md @@ -12,7 +12,7 @@ keywords: .net maui chart exporting, maui chart exporting, .net maui chart expor ## Export as an image -You can export the chart view as an image in the desired file format using the [SaveAsImage](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartBase.html#Syncfusion_Maui_Toolkit_Charts_ChartBase_SaveAsImage_System_String_) method of [SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html). The supported image formats are **JPEG and PNG**. By default, i.e., if you didn’t mention any image format with the filename, the chart view will be exported as an image in the PNG format. +You can export the chart view as an image in the desired file format using the [SaveAsImage](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartBase.html#Syncfusion_Maui_Toolkit_Charts_ChartBase_SaveAsImage_System_String_) method of [SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html). The supported image formats are **JPEG and PNG**. By default, if you don't specify any image format with the filename, the chart view will be exported as an image in the PNG format. N> The chart view can be exported as an image only when the chart view is added to the visual tree. @@ -30,14 +30,13 @@ this.Content = chart; // Dynamically save the chart as an image file named "ChartSample.jpeg" chart.SaveAsImage("ChartSample.jpeg"); - {% endhighlight %} {% endtabs %} -T> We can change the image formats in above code by changing its extension as .jpg, .png. +T> You can change the image format by changing the file extension to .jpg or .png. -The exported image will be saved in the different location across the platforms. +The exported image will be saved in different locations across platforms: **Windows Phone, Android and MAC** – The image will be saved inside the 'Pictures' directory of the file system. @@ -70,7 +69,7 @@ Add the following code snippet to the "Info" file: The [GetStreamAsync](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartBase.html#Syncfusion_Maui_Toolkit_Charts_ChartBase_GetStreamAsync_Syncfusion_Maui_Toolkit_ImageFileFormat_) method of [SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html) is used to asynchronously get the chart view as a stream in the desired ImageFileFormat. The output stream can be passed as an input to other components that accept streams, such as PDF, Excel, and Word. The supported image file formats are **JPEG and PNG**. -N> The charts stream can only be rendered when the chart view is added to the visual tree. +N> The chart's stream can only be rendered when the chart view is added to the visual tree. The following code snippet demonstrates the usage of this method: @@ -86,7 +85,7 @@ this.Content = chart; // Export the chart as a JPEG image stream asynchronously await chart.GetStreamAsync(ImageFileFormat.Jpeg); - {% endhighlight %} {% endtabs %} + diff --git a/maui-toolkit/Cartesian-Charts/FastScatter.md b/maui-toolkit/Cartesian-Charts/FastScatter.md index 7f3023c1..5894bb42 100644 --- a/maui-toolkit/Cartesian-Charts/FastScatter.md +++ b/maui-toolkit/Cartesian-Charts/FastScatter.md @@ -1,7 +1,7 @@ --- layout: post title: Fast Scatter Chart in .NET MAUI Chart control | Syncfusion -description: Learn here all about the fast scatter chart and its features in Syncfusion® .NET MAUI Chart (SfCartesianChart) control. +description: Learn here all about the fast scatter chart and its features in Syncfusion .NET MAUI Chart (SfCartesianChart) control. platform: maui-toolkit control: SfCartesianChart documentation: ug @@ -63,7 +63,7 @@ FastScatterSeries scatterSeries2 = new FastScatterSeries { ItemsSource = new ViewModel().Data2, XBindingPath = "XValue", - YBindingPath = "XValue", + YBindingPath = "YValue", // Fixed YBindingPath from "XValue" to "YValue" }; chart.Series.Add(scatterSeries1); @@ -74,4 +74,4 @@ this.Content = chart; {% endtabs %} -![FastScatter chart type in MAUI Chart](Chart-types-images/maui_fast_scatter_chart.png) +![FastScatter chart type in MAUI Chart](Chart-types-images/maui_fast_scatter_chart.png) \ No newline at end of file diff --git a/maui-toolkit/Cartesian-Charts/Fastline.md b/maui-toolkit/Cartesian-Charts/Fastline.md index 2a45a170..2548f288 100644 --- a/maui-toolkit/Cartesian-Charts/Fastline.md +++ b/maui-toolkit/Cartesian-Charts/Fastline.md @@ -12,7 +12,7 @@ Keywords: .net maui fast line chart, .net maui performance line chart, fast line ## Fast Line Chart -The [FastLineSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.FastLineSeries.html) is a special kind of line series that can render a collection with large number of datapoints. To render a fast line chart, create an instance of [FastLineSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.FastLineSeries.html), and add it to the [Series](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_Series) collection property of [SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html). +The [FastLineSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.FastLineSeries.html) is a special kind of line series that can render a collection with a large number of data points. To render a fast line chart, create an instance of [FastLineSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.FastLineSeries.html), and add it to the [Series](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_Series) collection property of [SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html). N> The Cartesian chart has [Series](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_Series) as its default content. @@ -78,7 +78,7 @@ The [StrokeDashArray](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Mau - + @@ -105,18 +105,16 @@ chart.YAxes.Add(secondaryAxis); DoubleCollection doubleCollection = new DoubleCollection(); doubleCollection.Add(5); doubleCollection.Add(2); -. . . + FastLineSeries series = new FastLineSeries() { ItemsSource = new ViewModel().Data, XBindingPath = "XValue", YBindingPath = "YValue", StrokeDashArray = doubleCollection // Apply the custom stroke dash pattern - }; chart.Series.Add(series); - this.Content = chart; {% endhighlight %} @@ -146,7 +144,7 @@ There may be some jagged lines at the edges. This can be reduced by using the [E {% highlight c# %} SfCartesianChart chart = new SfCartesianChart(); -. . . +// ... (other chart configuration) FastLineSeries series = new FastLineSeries() { ItemsSource = new ViewModel().Data, diff --git a/maui-toolkit/Cartesian-Charts/Get-the-data-point-collection-based-on-region.md b/maui-toolkit/Cartesian-Charts/Get-the-data-point-collection-based-on-region.md index cdada16b..a9a5a200 100644 --- a/maui-toolkit/Cartesian-Charts/Get-the-data-point-collection-based-on-region.md +++ b/maui-toolkit/Cartesian-Charts/Get-the-data-point-collection-based-on-region.md @@ -21,16 +21,16 @@ documentation: ug //Gets the collection of data that falls inside the given rectangle region. List dataPoints = Series.GetDataPoints(rectangle); -or +//or //Gets the collection of data from the given axis visible range. List dataPoints = Series.GetDataPoints(startX, endX, startY, endY); -{% endhighlight %} +{% endhighlight %} {% endtabs %} -N> You can get the visible plotting region of the series in the chart using [SeriesBounds](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartBase.html#Syncfusion_Maui_Toolkit_Charts_ChartBase_SeriesBounds) property in run time. +N> You can get the visible plotting region of the series in the chart using the [SeriesBounds](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartBase.html#Syncfusion_Maui_Toolkit_Charts_ChartBase_SeriesBounds) property in run time. ## See also diff --git a/maui-toolkit/Cartesian-Charts/Get-the-touch-position-in-chart.md b/maui-toolkit/Cartesian-Charts/Get-the-touch-position-in-chart.md index 95221cc2..3cc9ea4e 100644 --- a/maui-toolkit/Cartesian-Charts/Get-the-touch-position-in-chart.md +++ b/maui-toolkit/Cartesian-Charts/Get-the-touch-position-in-chart.md @@ -70,5 +70,4 @@ public class ChartInteractiveExt: ChartInteractiveBehavior {% endhighlight %} -{% endtabs %} - +{% endtabs %} \ No newline at end of file diff --git a/maui-toolkit/Cartesian-Charts/Getting-Started.md b/maui-toolkit/Cartesian-Charts/Getting-Started.md index eaa131c6..162b3668 100644 --- a/maui-toolkit/Cartesian-Charts/Getting-Started.md +++ b/maui-toolkit/Cartesian-Charts/Getting-Started.md @@ -19,24 +19,24 @@ This section explains how to populate the Cartesian chart with data, a title, da Before proceeding, ensure that the following are set up: -1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later is installed. +1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later. 2. Set up a .NET MAUI environment with Visual Studio 2022 (v17.8 or later). ## Step 1: Create a new .NET MAUI project 1. Go to **File > New > Project** and choose the **.NET MAUI App** template. -2. Name the project and choose a location. Then, click **Next.** -3. Select the .NET framework version and click **Create.** +2. Name the project and choose a location. Then, click **Next**. +3. Select the .NET framework version and click **Create**. -## Step 2: Install the Syncfusion® MAUI Toolkit Package +## Step 2: Install the Syncfusion® MAUI Toolkit Package -1. In **Solution Explorer,** right-click the project and choose **Manage NuGet Packages.** +1. In **Solution Explorer**, right-click the project and choose **Manage NuGet Packages**. 2. Search for [Syncfusion.Maui.Toolkit](https://www.nuget.org/packages/Syncfusion.Maui.Toolkit/) and install the latest version. 3. Ensure the necessary dependencies are installed correctly, and the project is restored. ## Step 3: Register the handler -In the **MauiProgram.cs** file, register the handler for Syncfusion® Toolkit. +In the **MauiProgram.cs** file, register the handler for Syncfusion® Toolkit. {% tabs %} {% highlight C# tabtitle="MauiProgram.cs" hl_lines="1 9" %} @@ -113,27 +113,27 @@ public partial class MainPage : ContentPage Before proceeding, ensure that the following are set up: -1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later is installed. +1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later. 2. Set up a .NET MAUI environment with Visual Studio Code. -3. Ensure that the .NET MAUI extension is installed and configured as described [here.](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-8.0&tabs=visual-studio-code) +3. Ensure that the .NET MAUI extension is installed and configured as described [here](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-8.0&tabs=visual-studio-code). ## Step 1: Create a new .NET MAUI project 1. Open the command palette by pressing `Ctrl+Shift+P` and type **.NET:New Project** and enter. 2. Choose the **.NET MAUI App** template. -3. Select the project location, type the project name and press **Enter.** -4. Then choose **Create project.** +3. Select the project location, type the project name and press **Enter**. +4. Then choose **Create project**. -## Step 2: Install the Syncfusion® MAUI Toolkit Package +## Step 2: Install the Syncfusion® MAUI Toolkit Package 1. Press Ctrl + ` (backtick) to open the integrated terminal in Visual Studio Code. 2. Ensure you're in the project root directory where your .csproj file is located. -3. Run the command `dotnet add package Syncfusion.Maui.Toolkit` to install the Syncfusion® .NET MAUI Toolkit NuGet package. +3. Run the command `dotnet add package Syncfusion.Maui.Toolkit` to install the Syncfusion® .NET MAUI Toolkit NuGet package. 4. To ensure all dependencies are installed, run `dotnet restore`. ## Step 3: Register the handler -In the **MauiProgram.cs** file, register the handler for Syncfusion® Toolkit. +In the **MauiProgram.cs** file, register the handler for Syncfusion® Toolkit. {% tabs %} {% highlight C# tabtitle="MauiProgram.cs" hl_lines="1 9" %} @@ -211,24 +211,24 @@ public partial class MainPage : ContentPage Before proceeding, ensure the following are set up: 1. Ensure you have the latest version of JetBrains Rider. -2. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later is installed. -3. Make sure the MAUI workloads are installed and configured as described [here.](https://www.jetbrains.com/help/rider/MAUI.html#before-you-start) +2. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later. +3. Make sure the MAUI workloads are installed and configured as described [here](https://www.jetbrains.com/help/rider/MAUI.html#before-you-start). ## Step 1: Create a new .NET MAUI Project -1. Go to **File > New Solution,** Select .NET (C#) and choose the .NET MAUI App template. +1. Go to **File > New Solution**, Select .NET (C#) and choose the .NET MAUI App template. 2. Enter the Project Name, Solution Name, and Location. 3. Select the .NET framework version and click Create. -## Step 2: Install the Syncfusion® MAUI Toolkit NuGet Package +## Step 2: Install the Syncfusion® MAUI Toolkit NuGet Package -1. In **Solution Explorer,** right-click the project and choose **Manage NuGet Packages.** +1. In **Solution Explorer**, right-click the project and choose **Manage NuGet Packages**. 2. Search for [Syncfusion.Maui.Toolkit](https://www.nuget.org/packages/Syncfusion.Maui.Toolkit/) and install the latest version. 3. Ensure the necessary dependencies are installed correctly, and the project is restored. If not, Open the Terminal in Rider and manually run: `dotnet restore` ## Step 3: Register the handler -In the **MauiProgram.cs** file, register the handler for Syncfusion® Toolkit. +In the **MauiProgram.cs** file, register the handler for Syncfusion® Toolkit. {% tabs %} {% highlight C# tabtitle="MauiProgram.cs" hl_lines="1 9" %} @@ -419,7 +419,7 @@ NumericalAxis secondaryAxis = new NumericalAxis(); // Add the secondary axis to the chart's YAxes collection chart.YAxes.Add(secondaryAxis); - this.Content = chart; +this.Content = chart; {% endhighlight %} @@ -502,7 +502,7 @@ this.Content = chart; ### Add a title -The title of the chart provide quick information to the user about the data being plotted in the chart. The [Title](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartBase.html#Syncfusion_Maui_Toolkit_Charts_ChartBase_Title) property is used to set title for the chart as follows. +The title of the chart provides quick information to the user about the data being plotted in the chart. The [Title](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartBase.html#Syncfusion_Maui_Toolkit_Charts_ChartBase_Title) property is used to set title for the chart as follows. {% tabs %} @@ -548,7 +548,7 @@ The [ShowDataLabels](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui {% highlight C# %} -SfCartesianChart chart = new SfCartesianChart() +SfCartesianChart chart = new SfCartesianChart(); . . . ColumnSeries series = new ColumnSeries(); series.ShowDataLabels = true; // Enable data labels to be displayed on the data points in the column series. @@ -579,7 +579,7 @@ The legend provides information about the data point displayed in the chart. The {% highlight C# %} SfCartesianChart chart = new SfCartesianChart(); -chart.Legend = new ChartLegend (); +chart.Legend = new ChartLegend(); this.Content = chart; {% endhighlight %} @@ -603,7 +603,7 @@ N> Additionally, set label for each series using the `Label` property of chart s {% highlight C# %} -ColumnSeries series = new ColumnSeries (); +ColumnSeries series = new ColumnSeries(); series.ItemsSource = (new PersonViewModel()).Data; series.XBindingPath = "Name"; series.YBindingPath = "Height"; @@ -743,7 +743,7 @@ namespace ChartGettingStarted DataLabelSettings = new CartesianDataLabelSettings() { LabelPlacement = DataLabelPlacement.Inner - }; + } }; //Adding Series to the Chart Series Collection diff --git a/maui-toolkit/Cartesian-Charts/Histogram.md b/maui-toolkit/Cartesian-Charts/Histogram.md index 487d7f70..ac20f6a8 100644 --- a/maui-toolkit/Cartesian-Charts/Histogram.md +++ b/maui-toolkit/Cartesian-Charts/Histogram.md @@ -1,18 +1,18 @@ --- layout: post title: Histogram Chart in .NET MAUI Chart Control | Syncfusion -description: Learn here all about the Histogram chart and its type in Syncfusion® .NET MAUI Chart (SfCartesianChart) control. +description: Learn here all about the Histogram chart and its type in Syncfusion .NET MAUI Chart (SfCartesianChart) control. platform: maui-toolkit control: SfCartesianChart documentation: ug -keywords: .net maui histogram chart, histogram chart customization .net maui, syncfusion maui histogram chart, cartesian histogram chart maui, .net maui chart histogram , .net maui frequency distribution chart. +keywords: .net maui histogram chart, histogram chart customization .net maui, syncfusion maui histogram chart, cartesian histogram chart maui, .net maui chart histogram, .net maui frequency distribution chart. --- # Histogram Chart in .NET MAUI Chart [Histogram chart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.HistogramSeries.html) is a graphical representation that organizes a group of data points into user-specified ranges. It is similar in appearance to a column chart. -Customize histogram intervals using the [HistogramInterval](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.HistogramSeries.html#Syncfusion_Maui_Toolkit_Charts_HistogramSeries_HistogramInterval) property and normal distribution curve can be collapsed using the [ShowNormalDistributionCurve](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.HistogramSeries.html#Syncfusion_Maui_Toolkit_Charts_HistogramSeries_ShowNormalDistributionCurve) property. +You can customize histogram intervals using the [HistogramInterval](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.HistogramSeries.html#Syncfusion_Maui_Toolkit_Charts_HistogramSeries_HistogramInterval) property, and the normal distribution curve can be toggled using the [ShowNormalDistributionCurve](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.HistogramSeries.html#Syncfusion_Maui_Toolkit_Charts_HistogramSeries_ShowNormalDistributionCurve) property. {% tabs %} @@ -36,7 +36,6 @@ Customize histogram intervals using the [HistogramInterval](https://help.syncfus - {% endhighlight %} {% highlight c# %} @@ -69,9 +68,9 @@ this.Content = chart; ![Histogram Chart in MAUI](chart-types-images/maui_Histogram_chart.png) -## Customization of distribution curve +## Customization of Distribution Curve -Customize the normal distribution curve by using the [CurveStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.HistogramSeries.html#Syncfusion_Maui_Toolkit_Charts_HistogramSeries_CurveStyle) property. +You can customize the normal distribution curve by using the [CurveStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.HistogramSeries.html#Syncfusion_Maui_Toolkit_Charts_HistogramSeries_CurveStyle) property. {% tabs %} @@ -109,8 +108,8 @@ HistogramSeries histogramSeries = new HistogramSeries CurveStyle = new ChartLineStyle() { Stroke = Color.Blue, - StrokeWidth = 2, - }; + StrokeWidth = 2 + } }; chart.Series.Add(histogramSeries); diff --git a/maui-toolkit/Cartesian-Charts/Legend.md b/maui-toolkit/Cartesian-Charts/Legend.md index a42b4201..5c1a5c3e 100644 --- a/maui-toolkit/Cartesian-Charts/Legend.md +++ b/maui-toolkit/Cartesian-Charts/Legend.md @@ -104,7 +104,7 @@ LineSeries series = new LineSeries() }; chart.Series.Add(series); -this.Content=chart; +this.Content = chart; {% endhighlight %} @@ -112,13 +112,13 @@ this.Content=chart; ## Customizing labels -The [`Label`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CartesianSeries.html#Syncfusion_Maui_Toolkit_Charts_CartesianSeries_Label) property of [`CartesianSeries`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CartesianSeries.html) is used to define the label for the corresponding series legend item. The appearance of the label can be customized using the [`LabelStyle`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html#Syncfusion_Maui_Toolkit_Charts_ChartLegend_LabelStyle) property. +The [Label](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CartesianSeries.html#Syncfusion_Maui_Toolkit_Charts_CartesianSeries_Label) property of [CartesianSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CartesianSeries.html) is used to define the label for the corresponding series legend item. The appearance of the label can be customized using the [LabelStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html#Syncfusion_Maui_Toolkit_Charts_ChartLegend_LabelStyle) property. -* [`TextColor`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegendLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLegendLabelStyle_TextColor) – Gets or sets the color of the label. -* [`FontFamily`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegendLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLegendLabelStyle_FontFamily) - Gets or sets the font family for the legend label. -* [`FontAttributes`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegendLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLegendLabelStyle_FontAttributes) - Gets or sets the font style for the legend label. -* [`FontSize`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegendLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLegendLabelStyle_FontSize) - Gets or sets the font size for the legend label. -* [`Margin`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegendLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLegendLabelStyle_Margin) - Gets or sets the margin size of labels. +* [TextColor](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegendLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLegendLabelStyle_TextColor) – Gets or sets the color of the label. +* [FontFamily](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegendLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLegendLabelStyle_FontFamily) - Gets or sets the font family for the legend label. +* [FontAttributes](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegendLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLegendLabelStyle_FontAttributes) - Gets or sets the font style for the legend label. +* [FontSize](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegendLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLegendLabelStyle_FontSize) - Gets or sets the font size for the legend label. +* [Margin](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegendLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLegendLabelStyle_Margin) - Gets or sets the margin size of labels. {% tabs %} @@ -144,14 +144,14 @@ chart.Legend = new ChartLegend(); // Define and initialize a new `ChartLegendLabelStyle` to customize the legend label appearance. ChartLegendLabelStyle labelStyle = new ChartLegendLabelStyle() { - TextColor = Color.Blue, + TextColor = Colors.Blue, Margin = new Thickness(5), FontSize = 18, FontAttributes = FontAttributes.Bold, FontFamily = "PlaywriteAR-Regular" }; -legend.LabelStyle = labelStyle; // Apply the label style configuration to the chart's legend. +chart.Legend.LabelStyle = labelStyle; // Apply the label style configuration to the chart's legend. this.Content = chart; {% endhighlight %} @@ -194,7 +194,7 @@ ColumnSeries columnSeries = new ColumnSeries() }; chart.Series.Add(columnSeries); -this.Content=chart; +this.Content = chart; {% endhighlight %} @@ -288,15 +288,13 @@ public class LegendExt : ChartLegend SfCartesianChart chart = new SfCartesianChart(); chart.Legend = new LegendExt(); // Set the chart's legend to use the custom LegendExt class - +this.Content = chart; {% endhighlight %} {% endtabs %} - ## Items layout The [ItemsLayout](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html#Syncfusion_Maui_Toolkit_Charts_ChartLegend_ItemsLayout) property is used to customize the arrangement and position of each legend item. The default value is `null`. This property accepts any layout type. - {% tabs %} {% highlight xaml %} @@ -327,9 +325,8 @@ FlexLayout layout = new FlexLayout(); layout.Wrap = FlexWrap.Wrap; layout.HorizontalOptions = LayoutOptions.Start; layout.Margin = 10; -layout.SetBinding(WidthRequestProperty, nameof(SfCartesianChart.WidthProperty)); +layout.SetBinding(WidthRequestProperty, new Binding("Width", source: chart)); legend.ItemsLayout = layout; - chart.Legend = legend; this.Content = chart; @@ -338,7 +335,7 @@ this.Content = chart; {% endtabs %} ## Item template -The [ChartLegend](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html) supports customizing the appearance of legend items using the [ItemTemplate](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html#Syncfusion_Maui_Toolkit_Charts_ChartLegend_ItemTemplate) property. The default value of ItemsTemplate is `null`. +The [ChartLegend](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html) supports customizing the appearance of legend items using the [ItemTemplate](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html#Syncfusion_Maui_Toolkit_Charts_ChartLegend_ItemTemplate) property. The default value of ItemTemplate is `null`. N> The BindingContext of the template is the corresponding underlying legend item provided in the `ChartLegendItem` class. @@ -350,14 +347,14 @@ N> The BindingContext of the template is the corresponding underlying legend ite - - - + + @@ -375,7 +372,7 @@ legend.ItemTemplate = chart.Resources["legendTemplate"] as DataTemplate; ... chart.Legend = legend; this.Content = chart; - + {% endhighlight %} {% endtabs %} @@ -386,22 +383,22 @@ this.Content = chart; **LegendItemCreated** -The [`LegendItemCreated`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html#Syncfusion_Maui_Toolkit_Charts_ChartLegend_LegendItemCreated) event is triggered when the chart legend item is created. The argument contains the [`LegendItem`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.LegendItemEventArgs.html#Syncfusion_Maui_Toolkit_LegendItemEventArgs_LegendItem) object. The following properties are present in [`LegendItem`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.LegendItemEventArgs.html#Syncfusion_Maui_Toolkit_LegendItemEventArgs_LegendItem). - -* [`Text`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_Text) – used to get or set the text of the label. -* [`TextColor`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_TextColor) – used to get or set the color of the label. -* [`FontFamily`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_FontFamily) - used to get or set the font family for the legend label. -* [`FontAttributes`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_FontAttributes) - used to get or set the font style for the legend label. -* [`FontSize`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_FontSize) - used to get or set the font size for the legend label. -* [`TextMargin`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_TextMargin) - used to get or set the margin size of labels. -* [`IconBrush`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_IconBrush) - used to change the color of the legend icon. -* [`IconType`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_IconType) - used to get or set the icon type for the legend icon. -* [`IconHeight`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_IconHeight) - used to get or set the icon height of the legend icon. -* [`IconWidth`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_IconWidth) - used to get or set the icon width of the legend icon. -* [`IsToggled`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_IsToggled) - used to get or set the toggle visibility of the legend. -* [`DisableBrush`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_DisableBrush) - used to get or set the color of the legend when toggled. -* [`Index`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_Index) - used to get index position of the legend. -* [`Item`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_Item) - used to get the corresponding series for the legend item. +The [LegendItemCreated](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html#Syncfusion_Maui_Toolkit_Charts_ChartLegend_LegendItemCreated) event is triggered when the chart legend item is created. The argument contains the [LegendItem](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.LegendItemEventArgs.html#Syncfusion_Maui_Toolkit_LegendItemEventArgs_LegendItem) object. The following properties are present in [LegendItem](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.LegendItemEventArgs.html#Syncfusion_Maui_Toolkit_LegendItemEventArgs_LegendItem). + +* [Text](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_Text) – used to get or set the text of the label. +* [TextColor](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_TextColor) – used to get or set the color of the label. +* [FontFamily](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_FontFamily) - used to get or set the font family for the legend label. +* [FontAttributes](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_FontAttributes) - used to get or set the font style for the legend label. +* [FontSize](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_FontSize) - used to get or set the font size for the legend label. +* [TextMargin](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_TextMargin) - used to get or set the margin size of labels. +* [IconBrush](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_IconBrush) - used to change the color of the legend icon. +* [IconType](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_IconType) - used to get or set the icon type for the legend icon. +* [IconHeight](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_IconHeight) - used to get or set the icon height of the legend icon. +* [IconWidth](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_IconWidth) - used to get or set the icon width of the legend icon. +* [IsToggled](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_IsToggled) - used to get or set the toggle visibility of the legend. +* [DisableBrush](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_M +* [Index](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_Index) - used to get index position of the legend. +* [Item](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_Item) - used to get the corresponding series for the legend item. ## Limitations * Do not add items explicitly. diff --git a/maui-toolkit/Cartesian-Charts/Line.md b/maui-toolkit/Cartesian-Charts/Line.md index 03520b44..42ec3493 100644 --- a/maui-toolkit/Cartesian-Charts/Line.md +++ b/maui-toolkit/Cartesian-Charts/Line.md @@ -1,7 +1,7 @@ --- layout: post title: Line Chart in .NET MAUI Chart control | Syncfusion -description: Learn here all about the line chart and its type in Syncfusion® .NET MAUI Chart (SfCartesianChart) control. +description: Learn here all about the line chart and its types in Syncfusion .NET MAUI Chart (SfCartesianChart) control. platform: maui-toolkit control: SfCartesianChart documentation: ug @@ -12,7 +12,7 @@ keywords: .net maui line chart, maui line chart, .net maui chart line type, line ## Line Chart -Line chart is used to represent the data trends at equal intervals by connecting points on a plot with straight lines. To render a line chart, create an instance of [LineSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.LineSeries.html), and add it to the [Series](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_Series) collection property of [SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html). +Line chart is used to represent data trends at equal intervals by connecting points on a plot with straight lines. To render a line chart, create an instance of [LineSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.LineSeries.html), and add it to the [Series](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_Series) collection property of [SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html). N> The Cartesian chart has [Series](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_Series) as its default content. @@ -60,7 +60,6 @@ LineSeries series2 = new LineSeries() ItemsSource = new ViewModel().Data, XBindingPath = "Demand", YBindingPath = "Year2011", - }; // Add the line series to the chart @@ -114,7 +113,7 @@ The [StrokeDashArray](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Mau {% highlight c# %} SfCartesianChart chart = new SfCartesianChart(); -. . . + // Create a DoubleCollection for the StrokeDashArray, which defines the pattern of dashes and gaps. DoubleCollection doubleCollection = new DoubleCollection(); doubleCollection.Add(5); @@ -131,7 +130,6 @@ LineSeries series1 = new LineSeries() XBindingPath = "Demand", YBindingPath = "Year2010", StrokeDashArray = doubleCollection // Apply the stroke dash pattern. - }; LineSeries series2 = new LineSeries() @@ -216,7 +214,7 @@ this.Content = chart; ### Spline rendering types -The [Type](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SplineSeries.html#Syncfusion_Maui_Toolkit_Charts_SplineSeries_Type) property allows to change the rendering type of spline curve in series. The default value of [Type](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SplineSeries.html#Syncfusion_Maui_Toolkit_Charts_SplineSeries_Type) is [Natural](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SplineType.html#Syncfusion_Maui_Toolkit_Charts_SplineType_Natural). +The [Type](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SplineSeries.html#Syncfusion_Maui_Toolkit_Charts_SplineSeries_Type) property allows you to change the rendering type of spline curve in series. The default value of [Type](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SplineSeries.html#Syncfusion_Maui_Toolkit_Charts_SplineSeries_Type) is [Natural](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SplineType.html#Syncfusion_Maui_Toolkit_Charts_SplineType_Natural). The following types are used in SplineSeries: @@ -318,7 +316,7 @@ LineSeries series2 = new LineSeries() chart.Series.Add(series1); chart.Series.Add(series2); -this.Content= chart; +this.Content = chart; {% endhighlight %} @@ -328,7 +326,7 @@ this.Content= chart; ### Marker customization -In order to change the series markers appearance, create an instance of the [MarkerSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.LineSeries.html#Syncfusion_Maui_Toolkit_Charts_LineSeries_MarkerSettings) property. The following properties are used to customize marker appearance. +In order to change the series markers appearance, create an instance of the [MarkerSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.LineSeries.html#Syncfusion_Maui_Toolkit_Charts_LineSeries_MarkerSettings) property. The following properties are used to customize marker appearance: * [Type](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartMarkerSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartMarkerSettings_Type), of type `ShapeType`, describes the shape of the series marker. The default value of this property is [ShapeType.Circle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ShapeType.html#Syncfusion_Maui_Toolkit_Charts_ShapeType_Circle). * [Stroke](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartMarkerSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartMarkerSettings_Stroke), of type `Brush`, indicates the brush used to paint the marker border. @@ -365,7 +363,7 @@ In order to change the series markers appearance, create an instance of the [Mar SfCartesianChart chart = new SfCartesianChart(); ... // Set up marker settings for the chart series with a diamond shape -ChartMarkerSettings chartMarker= new ChartMarkerSettings() +ChartMarkerSettings chartMarker = new ChartMarkerSettings() { Type = ShapeType.Diamond, Fill = Colors.Brown, diff --git a/maui-toolkit/Cartesian-Charts/Localization.md b/maui-toolkit/Cartesian-Charts/Localization.md index 950f8db7..d24ddcee 100644 --- a/maui-toolkit/Cartesian-Charts/Localization.md +++ b/maui-toolkit/Cartesian-Charts/Localization.md @@ -10,17 +10,18 @@ keywords: .net maui chart localization, sfCartesianchart localization in .net ma # Localization in .NET MAUI Chart (SfCartesianChart) -Localization is the process of translating the application resources into different language for the specific cultures. The `SfCartesianChart` can be localized by adding `resource` file. +Localization is the process of translating the application resources into different languages for specific cultures. The `SfCartesianChart` can be localized by adding a `resource` file. ## Setting CurrentUICulture to the application -Application culture can be changed by setting `CurrentUICulture.` in `App.xaml.cs` file. +Application culture can be changed by setting `CurrentUICulture` in the `App.xaml.cs` file. {% tabs %} {% highlight c# tabtitle="App.xaml.cs" hl_lines="1 2 9 15" %} using Syncfusion.Maui.Toolkit.Charts; using System.Resources; +using System.Globalization; public partial class App : Application { @@ -32,7 +33,7 @@ public partial class App : Application //SfCartesianChartResources.ResourceManager = new ResourceManager // ("CartesianChartSample.Resources.SfCartesianChart", Application.Current.GetType().Assembly); - var ResXPath= "CartesianChartSample.Resources.SfCartesianChart"; + var ResXPath = "CartesianChartSample.Resources.SfCartesianChart"; SfCartesianChartResources.ResourceManager = new ResourceManager(ResXPath, Application.Current.GetType().Assembly); MainPage = new MainPage(); } @@ -41,25 +42,25 @@ public partial class App : Application {% endhighlight %} {% endtabs %} -N> The required `resx` files with `Build Action` as `EmbeddedResource` (File name should contain culture code) into the `Resources` folder. +N> The required `resx` files with `Build Action` as `EmbeddedResource` (File name should contain culture code) should be added into the `Resources` folder. ## Localize application level -To localize the `Chart` based on `CurrentUICulture` using `resource` files, follow the below steps. +To localize the `Chart` based on `CurrentUICulture` using `resource` files, follow these steps: - 1. Right-click on the `Resources` folder, select `Add` and then `NewItem.` +1. Right-click on the `Resources` folder, select `Add` and then `New Item`. - 2. In Add New Item, select the Resource File option and name the filename as `SfCartesianChart..resx.` For example, give the name as `SfCartesianChart.fr-FR.resx` for French culture. +2. In Add New Item, select the Resource File option and name the filename as `SfCartesianChart..resx`. For example, give the name as `SfCartesianChart.fr-FR.resx` for French culture. - 3. The culture name indicates the name of the language and country. +3. The culture name indicates the name of the language and country. ![shows-the-name-of-resource-file-to-be-added-for-maui-chart](Localization_images/name_of_resource_file.png) - 4. Now, select `Add` option to add the resource file in **Resources** folder. +4. Now, select `Add` option to add the resource file in **Resources** folder. ![shows-the-added-resource-file-for-french-language-in-maui-chart](Localization_images/shows-the-added-resource-file-for-french-language-in-maui-chart.png) - 5. Add the Name/Value pair in Resource Designer of `SfCartesianChart.fr-FR.resx` file and change its corresponding value to corresponding culture. +5. Add the Name/Value pair in Resource Designer of `SfCartesianChart.fr-FR.resx` file and change its corresponding value to the appropriate culture. ![shows-the-added-resource-file-name-value-pair-in-the-resource-designer-in-maui-chart](Localization_images/shows-the-added-resource-file-name-value-pair-in-the-resource-designer-in-maui-chart.png) diff --git a/maui-toolkit/Cartesian-Charts/OHLC.md b/maui-toolkit/Cartesian-Charts/OHLC.md index d5901cd0..877e9603 100644 --- a/maui-toolkit/Cartesian-Charts/OHLC.md +++ b/maui-toolkit/Cartesian-Charts/OHLC.md @@ -1,7 +1,7 @@ --- layout: post title: OHLC Chart in .NET MAUI Chart control | Syncfusion -description: Learn here all about ohlc chart and its features in Syncfusion® .NET MAUI Chart (SfCartesianChart) control. +description: Learn here all about OHLC chart and its features in Syncfusion® .NET MAUI Chart (SfCartesianChart) control. platform: maui-toolkit control: SfCartesianChart documentation: ug @@ -10,11 +10,11 @@ keywords: .net maui ohlc chart, .net maui chart ohlc type, ohlc chart customizat # OHLC Chart in .NET MAUI Chart -OHLC (Open-High-Low-Close) charts are the type of financial charts used to represent the price movement of an asset over a specific period. OHLC charts consist of four data points: the opening price, the high price, the low price, and the closing price for each period. To render an OHLC chart, create an instance of [HiLoOpenCloseSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.HiLoOpenCloseSeries.html), and add it to the [Series](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_Series) collection property of the [SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html). +OHLC (Open-High-Low-Close) charts are financial charts used to represent the price movement of an asset over a specific period. OHLC charts consist of four data points: the opening price, the high price, the low price, and the closing price for each period. To render an OHLC chart, create an instance of [HiLoOpenCloseSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.HiLoOpenCloseSeries.html), and add it to the [Series](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_Series) collection property of the [SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html). N> The Cartesian chart has [Series](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_Series) as its default content. -A collection of five values is required to plot a point on an OHLC chart, including the X-value, open value, high value, low value, and close value. Use the following collection. +A collection of five values is required to plot a point on an OHLC chart, including the X-value, open value, high value, low value, and close value. Use the following collection: {% tabs %} @@ -64,7 +64,7 @@ chart.XAxes.Add(primaryAxis); NumericalAxis secondaryAxis = new NumericalAxis(); chart.YAxes.Add(secondaryAxis); -// Create a HiLoOpenCloseSeries for displaying financial data +// Create a HiLoOpenCloseSeries for displaying financial data HiLoOpenCloseSeries series = new HiLoOpenCloseSeries() { ItemsSource = new ViewModel().StockData, @@ -87,14 +87,13 @@ this.Content = chart; ## Bull and Bear Color -In the OHLC chart, the [BullishFill](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.FinancialSeriesBase.html#Syncfusion_Maui_Toolkit_Charts_FinancialSeriesBase_BullishFill) property is used to specify a fill color for the segments that indicates an increase in the stock price in the measured time interval, and the [BearishFill](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.FinancialSeriesBase.html#Syncfusion_Maui_Toolkit_Charts_FinancialSeriesBase_BearishFill) property is used to specify a fill color for the segments that indicates a decrease in the stock price in the measured time interval. +In the OHLC chart, the [BullishFill](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.FinancialSeriesBase.html#Syncfusion_Maui_Toolkit_Charts_FinancialSeriesBase_BullishFill) property is used to specify a fill color for the segments that indicate an increase in the stock price in the measured time interval, and the [BearishFill](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.FinancialSeriesBase.html#Syncfusion_Maui_Toolkit_Charts_FinancialSeriesBase_BearishFill) property is used to specify a fill color for the segments that indicate a decrease in the stock price in the measured time interval. {% tabs %} {% highlight xaml %} - @@ -111,7 +110,6 @@ In the OHLC chart, the [BullishFill](https://help.syncfusion.com/cr/maui-toolkit Close="Close" BullishFill="Blue" BearishFill="Orange"/> - {% endhighlight %} diff --git a/maui-toolkit/Cartesian-Charts/PlotBand.md b/maui-toolkit/Cartesian-Charts/PlotBand.md index 36f9b1ef..6af2820d 100644 --- a/maui-toolkit/Cartesian-Charts/PlotBand.md +++ b/maui-toolkit/Cartesian-Charts/PlotBand.md @@ -8,25 +8,25 @@ documentation: ug keywords: .net maui plot band, maui plot band, .net maui chart plot band type, plot band customization .net maui, syncfusion maui plot band, cartesian plot band maui, .net maui chart plot band visualization, .net maui shaded region chart, .net maui recurrence plot band. --- -# Plot bands in .NET MAUI Chart +# Plot Bands in .NET MAUI Chart -A plot band, also known as a stripline, allows for shading specific regions or ranges in the plot area background at regular or custom intervals. It also provides options to customize the size of these bands. Text can be added to plot band and indicate the significance of each particular region. +A plot band, also known as a stripline, allows for shading specific regions or ranges in the plot area background at regular or custom intervals. It also provides options to customize the size of these bands. Text can be added to plot bands to indicate the significance of each particular region. -Plot bands are classified into [NumericalPlotBand](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.NumericalPlotBand.html) and [DateTimePlotBand](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimePlotBand.html). Based on the axis, plot bands are drawn using these classifications. The following properties are used to configure the plot band: +Plot bands are classified into [NumericalPlotBand](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.NumericalPlotBand.html) and [DateTimePlotBand](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimePlotBand.html). Based on the axis type, plot bands are drawn using these classifications. The following properties are used to configure the plot band: -* [`Size`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartPlotBand.html#Syncfusion_Maui_Toolkit_Charts_ChartPlotBand_Size) - changes how long plot band should be expanded. This is applicable only when end is not specified. -* [`SizeType`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimePlotBand.html#Syncfusion_Maui_Toolkit_Charts_DateTimePlotBand_SizeType) - changes the date-time unit of the value specified in the `Size` property. The values can be year, month, day, hour, minute, second, and millisecond. -* [`Text`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartPlotBand.html#Syncfusion_Maui_Toolkit_Charts_ChartPlotBand_Text)- changes the text of the plot band. -* [`Fill`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartPlotBand.html#Syncfusion_Maui_Toolkit_Charts_ChartPlotBand_Fill) - changes the fill of the plot band. -* [`Stroke`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartPlotBand.html#Syncfusion_Maui_Toolkit_Charts_ChartPlotBand_Stroke) - changes the stroke color of the plot band. -* [`StrokeWidth`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartPlotBand.html#Syncfusion_Maui_Toolkit_Charts_ChartPlotBand_StrokeWidth) - changes the stroke width of the plot band. -* [`StrokeDashArray`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartPlotBand.html#Syncfusion_Maui_Toolkit_Charts_ChartPlotBand_StrokeDashArray) - changes the stoke in dash array. -* [`IsVisible`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartPlotBand.html#Syncfusion_Maui_Toolkit_Charts_ChartPlotBand_IsVisible) - changes the visibility of the plot band in chart axis. -* [`IsRepeatable`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartPlotBand.html#Syncfusion_Maui_Toolkit_Charts_ChartPlotBand_IsRepeatable)- specifies the plot band need to be repeated in specified interval. +* [`Size`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartPlotBand.html#Syncfusion_Maui_Toolkit_Charts_ChartPlotBand_Size) - Determines how far the plot band should expand. This is applicable only when the end value is not specified. +* [`SizeType`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimePlotBand.html#Syncfusion_Maui_Toolkit_Charts_DateTimePlotBand_SizeType) - Specifies the date-time unit of the value in the `Size` property. The values can be year, month, day, hour, minute, second, and millisecond. +* [`Text`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartPlotBand.html#Syncfusion_Maui_Toolkit_Charts_ChartPlotBand_Text) - Sets the text of the plot band. +* [`Fill`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartPlotBand.html#Syncfusion_Maui_Toolkit_Charts_ChartPlotBand_Fill) - Sets the fill color of the plot band. +* [`Stroke`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartPlotBand.html#Syncfusion_Maui_Toolkit_Charts_ChartPlotBand_Stroke) - Sets the stroke color of the plot band. +* [`StrokeWidth`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartPlotBand.html#Syncfusion_Maui_Toolkit_Charts_ChartPlotBand_StrokeWidth) - Sets the stroke width of the plot band. +* [`StrokeDashArray`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartPlotBand.html#Syncfusion_Maui_Toolkit_Charts_ChartPlotBand_StrokeDashArray) - Defines the stroke dash pattern. +* [`IsVisible`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartPlotBand.html#Syncfusion_Maui_Toolkit_Charts_ChartPlotBand_IsVisible) - Controls the visibility of the plot band in chart axis. +* [`IsRepeatable`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartPlotBand.html#Syncfusion_Maui_Toolkit_Charts_ChartPlotBand_IsRepeatable) - Specifies whether the plot band should be repeated at specified intervals. ## Numerical PlotBand -[NumericalPlotBands](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.NumericalPlotBand.html) are used to draw plot bands for [NumericalAxis](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.NumericalAxis.html) and [CategoryAxis](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CategoryAxis.html). To add a plot band, create an instance of [NumericalPlotBandCollection](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.NumericalPlotBandCollection.html) and specify numerical value for the [Start](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.NumericalPlotBand.html#Syncfusion_Maui_Toolkit_Charts_NumericalPlotBand_Start) and [End](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.NumericalPlotBand.html#Syncfusion_Maui_Toolkit_Charts_NumericalPlotBand_End) parameter. These parameters determine the beginning and end of the plot band. +[NumericalPlotBands](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.NumericalPlotBand.html) are used to draw plot bands for [NumericalAxis](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.NumericalAxis.html) and [CategoryAxis](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CategoryAxis.html). To add a plot band, create an instance of [NumericalPlotBandCollection](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.NumericalPlotBandCollection.html) and specify numerical values for the [Start](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.NumericalPlotBand.html#Syncfusion_Maui_Toolkit_Charts_NumericalPlotBand_Start) and [End](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.NumericalPlotBand.html#Syncfusion_Maui_Toolkit_Charts_NumericalPlotBand_End) parameters. These parameters determine the beginning and end of the plot band. {% tabs %} @@ -55,10 +55,8 @@ SfCartesianChart chart = new SfCartesianChart(); . . . NumericalAxis numericalAxis = new NumericalAxis(); -// Initialize a collection to hold NumericalPlotBands. NumericalPlotBandCollection numericalPlotBandCollection = new NumericalPlotBandCollection(); -// Create a new instance of NumericalPlotBand to define a highlighted area on the chart. NumericalPlotBand plotBand = new NumericalPlotBand() { Start = 24, @@ -66,9 +64,7 @@ NumericalPlotBand plotBand = new NumericalPlotBand() Fill = Colors.Orange }; -// Add the configured plot band to the plot band collection. numericalPlotBandCollection.Add(plotBand); -// Assign the defined plot bands to the numerical axis of the chart. numericalAxis.PlotBands = numericalPlotBandCollection; chart.YAxes.Add(numericalAxis); ... @@ -81,7 +77,7 @@ this.Content = chart; ## DateTime PlotBand -[DateTimePlotBands](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimePlotBand.html) are used to draw plot bands for [DateTimeAxis](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimeAxis.html). To add a plot band, create an instance of [DateTimePlotBandCollection](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimePlotBandCollection.html) and specifying the [Start](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimePlotBand.html#Syncfusion_Maui_Toolkit_Charts_DateTimePlotBand_Start) date and [End](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimePlotBand.html#Syncfusion_Maui_Toolkit_Charts_DateTimePlotBand_End) date. These parameters determine the beginning and end of the plot band. +[DateTimePlotBands](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimePlotBand.html) are used to draw plot bands for [DateTimeAxis](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimeAxis.html). To add a plot band, create an instance of [DateTimePlotBandCollection](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimePlotBandCollection.html) and specify the [Start](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimePlotBand.html#Syncfusion_Maui_Toolkit_Charts_DateTimePlotBand_Start) date and [End](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimePlotBand.html#Syncfusion_Maui_Toolkit_Charts_DateTimePlotBand_End) date. These parameters determine the beginning and end of the plot band. {% tabs %} @@ -114,19 +110,17 @@ SfCartesianChart chart = new SfCartesianChart(); . . . DateTimeAxis dateTimeAxis = new DateTimeAxis(); -// Create a collection to hold DateTime plot bands DateTimePlotBandCollection dateTimePlotBandCollection = new DateTimePlotBandCollection(); -// Define a plot band with a specific start and end date DateTimePlotBand plotBand = new DateTimePlotBand() { Start = new DateTime(2023, 04, 01), - End = new DateTime(2023,06,01), - Fill = Color.Orange + End = new DateTime(2023, 06, 01), + Fill = Colors.Orange }; -dateTimePlotBandCollection.Add(plotBand); // Add the plot band to the plot band collection -dateTimeAxis.PlotBands = dateTimePlotBandCollection; // Assign the plot bands to the DateTime axis +dateTimePlotBandCollection.Add(plotBand); +dateTimeAxis.PlotBands = dateTimePlotBandCollection; chart.XAxes.Add(dateTimeAxis); NumericalAxis secondaryAxis = new NumericalAxis(); @@ -139,12 +133,10 @@ this.Content = chart; ![Plot band with datetime axis in MAUI Cartesian chart](Plot_band_images/datetime_plotband.png) -## Recursive plot band - -The Plot band recurrence feature enables plot bands to be drawn repeatedly at regular intervals. This functionality is particularly useful when you need to mark events that occur recursively along the timeline of the chart. +## Recursive Plot Band * [`RepeatEvery`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartPlotBand.html#Syncfusion_Maui_Toolkit_Charts_ChartPlotBand_RepeatEvery) - Specifies the frequency at which the plot band is repeated. -* [`RepeatEveryType`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimePlotBand.html#Syncfusion_Maui_Toolkit_Charts_DateTimePlotBand_RepeatEveryType) - Specifies the date time unit for `DateTimePlotBand`. +* [`RepeatEveryType`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimePlotBand.html#Syncfusion_Maui_Toolkit_Charts_DateTimePlotBand_RepeatEveryType) - Specifies the date-time unit for `DateTimePlotBand`. * [`RepeatUntil`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimePlotBand.html#Syncfusion_Maui_Toolkit_Charts_DateTimePlotBand_RepeatUntil) - Specifies the end value at which the plot band stops repeating. {% tabs %} @@ -187,9 +179,9 @@ NumericalPlotBand plotBand = new NumericalPlotBand() { Start = 20, End = 22, - IsRepeatable = true, // Enable repeating the plot band - RepeatUntil = 32, // Repeat the plot band until this value - RepeatEvery = 4, // Interval at which the plot band repeats + IsRepeatable = true, + RepeatUntil = 32, + RepeatEvery = 4, Fill = Colors.LightGray }; @@ -204,11 +196,9 @@ this.Content = chart; ![Visualization of plot band recurrence](Plot_band_images/recurrence_plotband.png) -## Segmented plot band - -Typically, if you draw a plot band for a vertical axis, the height of the plot band is determined by the start and end properties. The end of the plot band is equivalent to the end of its associated horizontal axis, meaning the plot band is drawn horizontally across the entire stretch of its associated horizontal axis. Similarly, for a horizontal axis, the width is determined by the start and width properties. Vertically, it is drawn across the entire stretch of the associated vertical axis +## Segmented Plot Band -Suppose, you want to draw a plot band that should not stretch along its associated axis, you have to set [AssociatedAxisStart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartPlotBand.html#Syncfusion_Maui_Toolkit_Charts_ChartPlotBand_AssociatedAxisStart) and [AssociatedAxisEnd](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartPlotBand.html#Syncfusion_Maui_Toolkit_Charts_ChartPlotBand_AssociatedAxisEnd) properties. The values provided in these two properties correspond to its associated axis specified by [AssociatedAxisName](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartPlotBand.html#Syncfusion_Maui_Toolkit_Charts_ChartPlotBand_AssociatedAxisName) property. +If you want to draw a plot band that should not stretch along its associated axis, you can set the [AssociatedAxisStart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartPlotBand.html#Syncfusion_Maui_Toolkit_Charts_ChartPlotBand_AssociatedAxisStart) and [AssociatedAxisEnd](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartPlotBand.html#Syncfusion_Maui_Toolkit_Charts_ChartPlotBand_AssociatedAxisEnd) properties. The values provided in these two properties correspond to its associated axis specified by the [AssociatedAxisName](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartPlotBand.html#Syncfusion_Maui_Toolkit_Charts_ChartPlotBand_AssociatedAxisName) property. {% tabs %} @@ -232,7 +222,7 @@ Suppose, you want to draw a plot band that should not stretch along its associat @@ -259,12 +249,12 @@ CategoryAxis primaryAxis = new CategoryAxis(); chart.XAxes.Add(primaryAxis); NumericalAxis numericalAxis = new NumericalAxis(); -NumericalPlotBandCollection numericalPlotBandCollection = new NumericalPlotBandCollection(); +NumericalPlotBandCollection numericalPlotBandCollection = new NumericalPlotBandCollection(); NumericalPlotBand plotBand1 = new NumericalPlotBand() { Start = 20, End = 22, - AssociatedAxisEnd = 2, // Associated axis range end value + AssociatedAxisEnd = 2, Text = "Low", Fill = new SolidColorBrush(Color.FromArgb("#B300E190")) }; @@ -273,8 +263,8 @@ NumericalPlotBand plotBand2 = new NumericalPlotBand() { Start = 25, End = 27, - AssociatedAxisStart = 4.3, // Associated axis range start value - AssociatedAxisEnd = 6.8, // Associated axis range end value + AssociatedAxisStart = 4.3, + AssociatedAxisEnd = 6.8, Text = "Average", Fill = new SolidColorBrush(Color.FromArgb("#B3FCD404")) }; @@ -283,7 +273,7 @@ NumericalPlotBand plotBand3 = new NumericalPlotBand() { Start = 30, End = 32, - AssociatedAxisStart = 9, // Associated axis range start value + AssociatedAxisStart = 9, Text = "High", Fill = new SolidColorBrush(Color.FromArgb("#B3FF4E4E")) }; @@ -302,6 +292,7 @@ this.Content = chart; ![Visualize segmented plot band in .NET MAUI](Plot_band_images/segmented_plotband.png) ## Plot Line + When specifying the same value for both `Start` and `End`, a plot line will be drawn. {% tabs %} @@ -355,7 +346,7 @@ CategoryAxis primaryAxis = new CategoryAxis(); chart.XAxes.Add(primaryAxis); NumericalAxis numericalAxis = new NumericalAxis(); -NumericalPlotBandCollection numericalPlotBandCollection = new NumericalPlotBandCollection(); +NumericalPlotBandCollection numericalPlotBandCollection = new NumericalPlotBandCollection(); NumericalPlotBand plotBand1 = new NumericalPlotBand() { Start = 24, @@ -385,23 +376,21 @@ NumericalPlotBand plotBand3 = new NumericalPlotBand() Fill = new SolidColorBrush(Color.FromArgb("#FF4E4E")), Text = "High Temperature" }; - numericalPlotBandCollection.Add(plotBand1); numericalPlotBandCollection.Add(plotBand2); -numericalPlotBandCollection.Add(plotBand3); +numericalPlotBandCollection.Add(plotBand3); numericalAxis.PlotBands = numericalPlotBandCollection; chart.YAxes.Add(numericalAxis); ... this.Content = chart; {% endhighlight %} - {% endtabs %} ![Visualize plot line in .NET MAUI](Plot_band_images/plot_line.png) -## Text Customization +## Text Customization -[Text](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartPlotBand.html#Syncfusion_Maui_Toolkit_Charts_ChartPlotBand_Text) can be added to plot bands to indicate the significance of each particular region. The [LabelStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartPlotBand.html#Syncfusion_Maui_Toolkit_Charts_ChartPlotBand_LabelStyle) property provides options to customize plot band text.Following are the options available, +[Text](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartPlotBand.html#Syncfusion_Maui_Toolkit_Charts_ChartPlotBand_Text) can be added to plot bands to indicate the significance of each particular region. The [LabelStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartPlotBand.html#Syncfusion_Maui_Toolkit_Charts_ChartPlotBand_LabelStyle) property provides options to customize plot band text. Following are the options available: * `HorizontalTextAlignment` - Gets or sets the horizontal alignment of text. * `VerticalTextAlignment` - Gets or sets the vertical alignment of text. @@ -410,42 +399,36 @@ this.Content = chart; * `OffsetY` - Gets or sets the vertical padding for the plot band text. {% tabs %} - {% highlight xaml %} - - . . . + ... - + - - + + FontSize="12" + FontAttributes="Bold"/> - . . . + ... - {% endhighlight %} - {% highlight c# %} - SfCartesianChart chart = new SfCartesianChart(); -. . . +... CategoryAxis primaryAxis = new CategoryAxis(); chart.XAxes.Add(primaryAxis); @@ -454,8 +437,8 @@ NumericalPlotBandCollection numericalPlotBandCollection = new NumericalPlotBandC NumericalPlotBand plotBand = new NumericalPlotBand() { Start = 28, - Width = 10, - Fill = Color.Orange, + Size = 10, + Fill = Colors.Orange, Text = "Plot Band" }; @@ -469,10 +452,9 @@ ChartPlotBandLabelStyle labelStyle = new ChartPlotBandLabelStyle() plotBand.LabelStyle = labelStyle; // Apply the label style to the plot band numericalPlotBandCollection.Add(plotBand); -numericalAxis.PlotBands= numericalPlotBandCollection; +numericalAxis.PlotBands = numericalPlotBandCollection; chart.YAxes.Add(numericalAxis); ... this.Content = chart; {% endhighlight %} - {% endtabs %} \ No newline at end of file diff --git a/maui-toolkit/Cartesian-Charts/Range-Column.md b/maui-toolkit/Cartesian-Charts/Range-Column.md index c2ed22a5..17bd7d50 100644 --- a/maui-toolkit/Cartesian-Charts/Range-Column.md +++ b/maui-toolkit/Cartesian-Charts/Range-Column.md @@ -12,11 +12,11 @@ keywords: .net maui range column chart, maui range column chart, range column ch ## Range Column Chart -Range Column Chart is used to visualize data points with columns, with the height of each column representing the difference between the lowest and highest values of the data point. +Range Column Chart is used to visualize data points with columns, where the height of each column represents the difference between the lowest and highest values of the data point. To render a range column chart, create an instance of [RangeColumnSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RangeColumnSeries.html), and add it to the [Series](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_Series) collection property of [SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html). -Since the [RangeColumnSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RangeColumnSeries.html) requires two Y values for each point, your data should contain both the high and low values. These high and low values specify the maximum and minimum ranges of the point. +Since the [RangeColumnSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RangeColumnSeries.html) requires two Y values for each point, your data should contain both high and low values. These high and low values specify the maximum and minimum ranges of the point. N> The Cartesian chart has [Series](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_Series) as its default content. @@ -35,9 +35,9 @@ N> The Cartesian chart has [Series](https://help.syncfusion.com/cr/maui-toolkit/ + Low="LowValue"/> @@ -91,11 +91,11 @@ The [Width](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit. + Width="0.7"/> {% endhighlight %} @@ -127,4 +127,4 @@ this.Content = chart; {% endtabs %} -![Range column segment spacing in MAUI Chart](Chart-Types-images/maui_rangeColumn_space_width.png) +![Range column segment spacing in MAUI Chart](Chart-Types-images/maui_rangeColumn_space_width.png) \ No newline at end of file diff --git a/maui-toolkit/Cartesian-Charts/RangeArea.md b/maui-toolkit/Cartesian-Charts/RangeArea.md index 35d05f6b..0ad628a1 100644 --- a/maui-toolkit/Cartesian-Charts/RangeArea.md +++ b/maui-toolkit/Cartesian-Charts/RangeArea.md @@ -12,7 +12,7 @@ keywords: .net maui range area chart, maui range area chart, .net maui chart ran ## Range Area Chart -Range Area Chart is a type of data visualization useful for displaying the relationship between two variables over time. In this Series, the area between two lines is filled to indicate a range of values, such as a high and low price range or an upper and lower limit. +Range Area Chart is a type of data visualization useful for displaying the relationship between two variables over time. In this series, the area between two lines is filled to indicate a range of values, such as a high and low price range or an upper and lower limit. By displaying ranges of data, range area series can make it easier to compare multiple datasets at once. @@ -58,7 +58,7 @@ RangeAreaSeries series = new RangeAreaSeries() ItemsSource = new ViewModel().Data, XBindingPath = "XValue", High = "HighValue", - Low="LowValue", + Low = "LowValue", }; // Add the configured series to the chart @@ -104,7 +104,7 @@ RangeAreaSeries series = new RangeAreaSeries() }; chart.Series.Add(series); -this.Content= chart; +this.Content = chart; {% endhighlight %} @@ -112,7 +112,7 @@ this.Content= chart; ### Marker Customization -In order to change the series markers appearance, create an instance of the [MarkerSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RangeAreaSeries.html#Syncfusion_Maui_Toolkit_Charts_RangeAreaSeries_MarkerSettings) property. The following properties are used to customize marker appearance. +In order to change the series markers appearance, create an instance of the [MarkerSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RangeAreaSeries.html#Syncfusion_Maui_Toolkit_Charts_RangeAreaSeries_MarkerSettings) property. The following properties are used to customize marker appearance: * [Type](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartMarkerSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartMarkerSettings_Type), of type `ShapeType`, describes the shape of the series marker. The default value of this property is the [ShapeType.Circle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ShapeType.html#Syncfusion_Maui_Toolkit_Charts_ShapeType_Circle). * [Stroke](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartMarkerSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartMarkerSettings_Stroke), of type `Brush`, indicates the brush used to paint the marker border. @@ -131,7 +131,7 @@ In order to change the series markers appearance, create an instance of the [Mar XBindingPath="XValue" High="HighValue" Low="LowValue" - ShowMarkers = "True"> + ShowMarkers="True"> The Cartesian chart has [Series](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_Series) as its default content. @@ -72,11 +72,11 @@ this.Content = chart; ![Spline range area chart type in MAUI Chart](Chart-types-images/maui_spline_range_area_chart.png) -## Spline rendering types +## Spline Rendering Types -The [Type](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SplineRangeAreaSeries.html#Syncfusion_Maui_Toolkit_Charts_SplineRangeAreaSeries_Type) property allows to change the rendering type of spline curve in series. The default value of [Type](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SplineRangeAreaSeries.html#Syncfusion_Maui_Toolkit_Charts_SplineRangeAreaSeries_Type) is [Natural](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SplineType.html#Syncfusion_Maui_Toolkit_Charts_SplineType_Natural). +The [Type](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SplineRangeAreaSeries.html#Syncfusion_Maui_Toolkit_Charts_SplineRangeAreaSeries_Type) property allows you to change the rendering type of the spline curve in the series. The default value of [Type](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SplineRangeAreaSeries.html#Syncfusion_Maui_Toolkit_Charts_SplineRangeAreaSeries_Type) is [Natural](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SplineType.html#Syncfusion_Maui_Toolkit_Charts_SplineType_Natural). -The following types are used in [SplineRangeAreaSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SplineRangeAreaSeries.html): +The following types are available in [SplineRangeAreaSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SplineRangeAreaSeries.html): * `Natural` * `Monotonic` @@ -136,9 +136,9 @@ this.Content = chart; ![Spline types in MAUI Spline range area chart](Chart-types-images/maui_spline_range_area_types_chart.png) -## Enable Marker +## Enable Markers -A marker, also known as a symbol, is used to determine or highlight the position of the data point. To enable markers in the series, set the [ShowMarkers](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SplineRangeAreaSeries.html#Syncfusion_Maui_Toolkit_Charts_SplineRangeAreaSeries_ShowMarkers) property to true. +A marker, also known as a symbol, is used to indicate or highlight the position of a data point. To enable markers in the series, set the [ShowMarkers](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SplineRangeAreaSeries.html#Syncfusion_Maui_Toolkit_Charts_SplineRangeAreaSeries_ShowMarkers) property to true. {% tabs %} @@ -169,7 +169,7 @@ SplineRangeAreaSeries series = new SplineRangeAreaSeries() }; chart.Series.Add(series); -this.Content= chart; +this.Content = chart; {% endhighlight %} @@ -177,14 +177,14 @@ this.Content= chart; ### Marker Customization -In order to change the series markers appearance, create an instance of the [MarkerSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SplineRangeAreaSeries.html#Syncfusion_Maui_Toolkit_Charts_SplineRangeAreaSeries_MarkerSettings) property. The following properties are used to customize marker appearance. +To customize the appearance of series markers, create an instance of the [MarkerSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SplineRangeAreaSeries.html#Syncfusion_Maui_Toolkit_Charts_SplineRangeAreaSeries_MarkerSettings) property. The following properties are used to customize marker appearance: -* [Type](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartMarkerSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartMarkerSettings_Type), of type `ShapeType`, describes the shape of the series marker. The default value of this property is the [ShapeType.Circle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ShapeType.html#Syncfusion_Maui_Toolkit_Charts_ShapeType_Circle). -* [Stroke](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartMarkerSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartMarkerSettings_Stroke), of type `Brush`, indicates the brush used to paint the marker border. -* [StrokeWidth](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartMarkerSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartMarkerSettings_StrokeWidth), of type `double`, indicates the width of the marker border. -* [Fill](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartMarkerSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartMarkerSettings_Fill), of type `Brush`, indicates the color of the marker. -* [Width](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartMarkerSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartMarkerSettings_Width), of type `double`, indicates the width of the marker. -* [Height](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartMarkerSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartMarkerSettings_Height), of type `double`, indicates the height of the marker. +* [Type](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartMarkerSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartMarkerSettings_Type) - Defines the shape of the series marker. The default value is [ShapeType.Circle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ShapeType.html#Syncfusion_Maui_Toolkit_Charts_ShapeType_Circle). +* [Stroke](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartMarkerSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartMarkerSettings_Stroke) - Specifies the brush used to paint the marker border. +* [StrokeWidth](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartMarkerSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartMarkerSettings_StrokeWidth) - Specifies the width of the marker border. +* [Fill](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartMarkerSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartMarkerSettings_Fill) - Specifies the color of the marker. +* [Width](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartMarkerSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartMarkerSettings_Width) - Specifies the width of the marker. +* [Height](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartMarkerSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartMarkerSettings_Height) - Specifies the height of the marker. {% tabs %} @@ -215,7 +215,7 @@ In order to change the series markers appearance, create an instance of the [Mar SfCartesianChart chart = new SfCartesianChart(); ... // Configure marker settings for the chart series -ChartMarkerSettings chartMarker= new ChartMarkerSettings() +ChartMarkerSettings chartMarker = new ChartMarkerSettings() { Type = ShapeType.Diamond, Fill = Colors.Brown, diff --git a/maui-toolkit/Cartesian-Charts/StackedArea.md b/maui-toolkit/Cartesian-Charts/StackedArea.md index d3b31ec9..e4b93cbc 100644 --- a/maui-toolkit/Cartesian-Charts/StackedArea.md +++ b/maui-toolkit/Cartesian-Charts/StackedArea.md @@ -49,7 +49,6 @@ N> The Cartesian chart has a [Series](https://help.syncfusion.com/cr/maui-toolki YBindingPath="Value"/> - {% endhighlight %} {% highlight c# %} @@ -63,29 +62,30 @@ chart.YAxes.Add(secondaryAxis); ViewModel viewModel = new ViewModel(); // Create a StackingAreaSeries for the chart -StackingAreaSeries series1 = new StackingAreaSeries() +StackingAreaSeries series1 = new StackingAreaSeries() { - ItemsSource = viewModel.Data1 + ItemsSource = viewModel.Data1, XBindingPath = "Year", YBindingPath = "Value", }; StackingAreaSeries series2 = new StackingAreaSeries() { - ItemsSource = viewModel.Data2 + ItemsSource = viewModel.Data2, XBindingPath = "Year", YBindingPath = "Value", }; + StackingAreaSeries series3 = new StackingAreaSeries() { - ItemsSource = viewModel.Data3 + ItemsSource = viewModel.Data3, XBindingPath = "Year", YBindingPath = "Value", }; StackingAreaSeries series4 = new StackingAreaSeries() { - ItemsSource = viewModel.Data4 + ItemsSource = viewModel.Data4, XBindingPath = "Year", YBindingPath = "Value", }; @@ -134,7 +134,7 @@ StackingAreaSeries series = new StackingAreaSeries() }; chart.Series.Add(series); -this.Content= chart; +this.Content = chart; {% endhighlight %} @@ -142,7 +142,7 @@ this.Content= chart; ### Marker customization -In order to change the series markers appearance, create an instance of the [MarkerSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.StackingAreaSeries.html#Syncfusion_Maui_Toolkit_Charts_StackingAreaSeries_MarkerSettings) property. The following properties are used to customize marker appearance. +In order to change the series markers appearance, create an instance of the [MarkerSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.StackingAreaSeries.html#Syncfusion_Maui_Toolkit_Charts_StackingAreaSeries_MarkerSettings) property. The following properties are used to customize marker appearance: * [Type](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartMarkerSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartMarkerSettings_Type), of type `ShapeType`, describes the shape of the series marker. The default value of this property is the [ShapeType.Circle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ShapeType.html#Syncfusion_Maui_Toolkit_Charts_ShapeType_Circle). * [Stroke](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartMarkerSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartMarkerSettings_Stroke), of type `Brush`, indicates the brush used to paint the marker border. @@ -180,7 +180,7 @@ In order to change the series markers appearance, create an instance of the [Mar SfCartesianChart chart = new SfCartesianChart(); ... // Configure chart marker settings, defining appearance and style -ChartMarkerSettings chartMarker= new ChartMarkerSettings() +ChartMarkerSettings chartMarker = new ChartMarkerSettings() { Type = ShapeType.Diamond, Fill = Colors.LightBlue, diff --git a/maui-toolkit/Cartesian-Charts/StackedArea100.md b/maui-toolkit/Cartesian-Charts/StackedArea100.md index 91d2da46..d1ea2e20 100644 --- a/maui-toolkit/Cartesian-Charts/StackedArea100.md +++ b/maui-toolkit/Cartesian-Charts/StackedArea100.md @@ -50,7 +50,7 @@ N> The Cartesian chart has a [Series](https://help.syncfusion.com/cr/maui-toolki -{% endhighlight xaml %} +{% endhighlight %} {% highlight c# %} @@ -63,7 +63,7 @@ chart.YAxes.Add(secondaryAxis); ViewModel viewModel = new ViewModel(); // Create a StackingArea100Series for the chart -StackingArea100Series series1 = new StackingArea100Series() +StackingArea100Series series1 = new StackingArea100Series() { XBindingPath = "Year", YBindingPath = "Value", @@ -91,14 +91,14 @@ StackingArea100Series series4 = new StackingArea100Series() ItemsSource = viewModel.Data4 }; -// Add the all series to the chart +// Add all series to the chart chart.Series.Add(series1); chart.Series.Add(series2); chart.Series.Add(series3); chart.Series.Add(series4); this.Content = chart; -{% endhighlight C# %} +{% endhighlight %} {% endtabs %} @@ -141,9 +141,9 @@ this.Content = chart; {% endtabs %} -### Marker customization +### Marker Customization -In order to change the series markers appearance, create an instance of the [MarkerSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.StackingAreaSeries.html#Syncfusion_Maui_Toolkit_Charts_StackingAreaSeries_MarkerSettings) property. The following properties are used to customize marker appearance. +To change the series markers appearance, create an instance of the [MarkerSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.StackingAreaSeries.html#Syncfusion_Maui_Toolkit_Charts_StackingAreaSeries_MarkerSettings) property. The following properties are used to customize marker appearance: * [Type](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartMarkerSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartMarkerSettings_Type), of type `ShapeType`, describes the shape of the series marker. The default value of this property is the [ShapeType.Circle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ShapeType.html#Syncfusion_Maui_Toolkit_Charts_ShapeType_Circle). * [Stroke](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartMarkerSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartMarkerSettings_Stroke), of type `Brush`, indicates the brush used to paint the marker border. @@ -181,7 +181,7 @@ In order to change the series markers appearance, create an instance of the [Mar SfCartesianChart chart = new SfCartesianChart(); ... // Configure chart marker settings, defining appearance and style -ChartMarkerSettings chartMarker= new ChartMarkerSettings() +ChartMarkerSettings chartMarker = new ChartMarkerSettings() { Type = ShapeType.Diamond, Fill = Colors.LightBlue, diff --git a/maui-toolkit/Cartesian-Charts/StackedColumn.md b/maui-toolkit/Cartesian-Charts/StackedColumn.md index 20eeed64..47d4b53a 100644 --- a/maui-toolkit/Cartesian-Charts/StackedColumn.md +++ b/maui-toolkit/Cartesian-Charts/StackedColumn.md @@ -12,7 +12,7 @@ keywords: .net maui stacked column chart, maui stacked column chart, stacked col ## Stacked Column Chart -The stacked column chart represents data values in a stacked format, where the columns are stacked on each other to indicate the cumulative value of the data points. +The stacked column chart represents data values in a stacked format, where columns are stacked on top of each other to indicate the cumulative value of data points. To render a stacked column chart, create an instance of the [StackingColumnSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.StackingColumnSeries.html) and add it to the [Series](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_Series) collection property of the [SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html). @@ -40,7 +40,6 @@ N> The Cartesian chart has [Series](https://help.syncfusion.com/cr/maui-toolkit/ YBindingPath="Value"/> - {% endhighlight %} {% highlight c# %} @@ -52,12 +51,11 @@ NumericalAxis secondaryAxis = new NumericalAxis(); chart.YAxes.Add(secondaryAxis); // Create a StackingColumnSeries for the chart -StackingColumnSeries series1 = new StackingColumnSeries() +StackingColumnSeries series1 = new StackingColumnSeries() { ItemsSource = new ViewModel().Data1, XBindingPath = "Name", YBindingPath = "Value", - }; StackingColumnSeries series2 = new StackingColumnSeries() { @@ -78,8 +76,8 @@ this.Content = chart; ## Grouping Series -Each series in a stacked chart with several series may be difficult to compare. To solve that problem, grouping is used. -The [GroupingLabel](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.StackingSeriesBase.html#Syncfusion_Maui_Toolkit_Charts_StackingSeriesBase_GroupingLabel) property used to group the series, which allows users to assign a label to each stacked column series. This label identifies the specific group to which the stacked column series belongs and can be used to group similar series. +Comparing multiple series in a stacked chart can be difficult. Grouping solves this problem by organizing related series together. +The [GroupingLabel](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.StackingSeriesBase.html#Syncfusion_Maui_Toolkit_Charts_StackingSeriesBase_GroupingLabel) property is used to group series by assigning a label to each stacked column series. This label identifies the specific group to which the stacked column series belongs and can be used to group similar series. N> If the [GroupingLabel](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.StackingSeriesBase.html#Syncfusion_Maui_Toolkit_Charts_StackingSeriesBase_GroupingLabel) is not provided, the stacked column will consider all series as a single group. @@ -105,7 +103,6 @@ N> If the [GroupingLabel](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion GroupingLabel="GroupOne"/> - {% endhighlight %} {% highlight c# %} @@ -116,7 +113,7 @@ chart.XAxes.Add(primaryAxis); NumericalAxis secondaryAxis = new NumericalAxis(); chart.YAxes.Add(secondaryAxis); -StackingColumnSeries series1 = new StackingColumnSeries() +StackingColumnSeries series1 = new StackingColumnSeries() { ItemsSource = new ViewModel().Data1, XBindingPath = "Name", @@ -130,7 +127,7 @@ StackingColumnSeries series2 = new StackingColumnSeries() YBindingPath = "Value", GroupingLabel = "GroupTwo" // Assign series to "GroupTwo" }; -StackingColumnSeries series3 = new StackingColumnSeries() +StackingColumnSeries series3 = new StackingColumnSeries() { ItemsSource = new ViewModel().Data3, XBindingPath = "Name", @@ -148,10 +145,10 @@ this.Content = chart; {% endtabs %} -## Appearance customization +## Appearance Customization -* [Spacing](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.StackingColumnSeries.html#Syncfusion_Maui_Toolkit_Charts_StackingColumnSeries_Spacing) of the `Double` type is used to change the spacing between two segments. The default spacing value is 0, ranging from 0 to 1. -* [Width](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.StackingColumnSeries.html#Syncfusion_Maui_Toolkit_Charts_StackingColumnSeries_Width) of the `Double` type is used to change the width of the rectangle. The default value of the width is 0.8, and the value ranges from 0 to 1. -* [CornerRadius](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.StackingColumnSeries.html#Syncfusion_Maui_Toolkit_Charts_StackingColumnSeries_CornerRadius) of the type `CornerRadius`, indicates the rounded corner for the stacked column. -* [Stroke](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.StackingSeriesBase.html#Syncfusion_Maui_Toolkit_Charts_StackingSeriesBase_Stroke) of the type `Brush` indicates the brush used to paint the border of the stacked column. -* [StrokeWidth](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.XYDataSeries.html#Syncfusion_Maui_Toolkit_Charts_XYDataSeries_StrokeWidth) of the type `Double` indicates the width of the stacked segment. \ No newline at end of file +* [Spacing](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.StackingColumnSeries.html#Syncfusion_Maui_Toolkit_Charts_StackingColumnSeries_Spacing) - A `Double` property that changes the spacing between two segments. The default value is 0, with a range from 0 to 1. +* [Width](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.StackingColumnSeries.html#Syncfusion_Maui_Toolkit_Charts_StackingColumnSeries_Width) - A `Double` property that changes the width of the rectangle. The default value is 0.8, with a range from 0 to 1. +* [CornerRadius](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.StackingColumnSeries.html#Syncfusion_Maui_Toolkit_Charts_StackingColumnSeries_CornerRadius) - A `CornerRadius` property that defines the rounded corners for the stacked column. +* [Stroke](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.StackingSeriesBase.html#Syncfusion_Maui_Toolkit_Charts_StackingSeriesBase_Stroke) - A `Brush` property that defines the color used for the border of the stacked column. +* [StrokeWidth](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.XYDataSeries.html#Syncfusion_Maui_Toolkit_Charts_XYDataSeries_StrokeWidth) - A `Double` property that defines the width of the stacked segment border. \ No newline at end of file diff --git a/maui-toolkit/Cartesian-Charts/StackedColumn100.md b/maui-toolkit/Cartesian-Charts/StackedColumn100.md index d977162e..79f2e437 100644 --- a/maui-toolkit/Cartesian-Charts/StackedColumn100.md +++ b/maui-toolkit/Cartesian-Charts/StackedColumn100.md @@ -10,7 +10,7 @@ keywords: .net maui stacked column 100 chart, stacked column 100 chart customiza # StackedColumn100 Chart in .NET MAUI Chart -The Stacked column 100 % series chart is a type of Stacked chart that is used to display the proportion of different categories within a single column. The columns are stacked on top of each other, and a cumulative portion of each stacked element always comes to a total of 100%. +The Stacked Column 100% chart is a type of stacked chart that displays the proportion of different categories within a single column. The columns are stacked on top of each other, and the cumulative portion of each stacked element always totals 100%. ## StackedColumn100 Chart @@ -46,7 +46,7 @@ N> The cartesian chart has [Series](https://help.syncfusion.com/cr/maui-toolkit/ -{% endhighlight xaml %} +{% endhighlight %} {% highlight c# %} @@ -82,7 +82,7 @@ chart.Series.Add(series2); chart.Series.Add(series3); this.Content = chart; -{% endhighlight C# %} +{% endhighlight %} {% endtabs %} @@ -90,7 +90,7 @@ this.Content = chart; ## Grouping Series -We can group and stack the similar stacked column 100 series type using the [GroupingLabel](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.StackingSeriesBase.html#Syncfusion_Maui_Toolkit_Charts_StackingSeriesBase_GroupingLabel) property. +You can group and stack similar stacked column 100 series types using the [GroupingLabel](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.StackingSeriesBase.html#Syncfusion_Maui_Toolkit_Charts_StackingSeriesBase_GroupingLabel) property. {% tabs %} @@ -128,7 +128,7 @@ We can group and stack the similar stacked column 100 series type using the [Gro -{% endhighlight xaml %} +{% endhighlight %} {% highlight c# %} @@ -174,6 +174,6 @@ chart.Series.Add(series3); chart.Series.Add(series4); this.Content = chart; -{% endhighlight C# %} +{% endhighlight %} {% endtabs %} \ No newline at end of file diff --git a/maui-toolkit/Cartesian-Charts/StackedLine.md b/maui-toolkit/Cartesian-Charts/StackedLine.md index 33a6462e..eb2415b7 100644 --- a/maui-toolkit/Cartesian-Charts/StackedLine.md +++ b/maui-toolkit/Cartesian-Charts/StackedLine.md @@ -61,7 +61,7 @@ chart.YAxes.Add(secondaryAxis); ViewModel viewModel = new ViewModel(); // Create a StackingLineSeries for the chart -StackingLineSeries series1 = new StackingLineSeries() +StackingLineSeries series1 = new StackingLineSeries() { ItemsSource = viewModel.Data1, XBindingPath = "Month", @@ -74,6 +74,7 @@ StackingLineSeries series2 = new StackingLineSeries() XBindingPath = "Month", YBindingPath = "Value", }; + StackingLineSeries series3 = new StackingLineSeries() { ItemsSource = viewModel.Data3, @@ -100,7 +101,7 @@ this.Content = chart; {% endtabs %} -![Stacking Line Chart in .NET MAUI Cartesian Charts.](chart-types-images\net-maui-cartesian-charts-stacked-line-chart.png) +![Stacking Line Chart in .NET MAUI Cartesian Charts.](chart-types-images/net-maui-cartesian-charts-stacked-line-chart.png) ## Dashed Stacked Line @@ -163,8 +164,8 @@ ViewModel viewModel = new ViewModel(); DoubleCollection doubleCollection = new DoubleCollection(); doubleCollection.Add(5); doubleCollection.Add(2); -. . . -StackingLineSeries series1 = new StackingLineSeries() + +StackingLineSeries series1 = new StackingLineSeries() { ItemsSource = viewModel.Data1, XBindingPath = "Month", @@ -207,7 +208,7 @@ this.Content = chart; {% endtabs %} -![Dashed Stacked Line chart in MAUI](Chart-types-images/maui_dashed_stacked_line_chart.png) +![Dashed Stacked Line chart in MAUI](chart-types-images/maui_dashed_stacked_line_chart.png) ## Enable Marker @@ -248,7 +249,7 @@ SfCartesianChart chart = new SfCartesianChart(); ViewModel viewModel = new ViewModel(); . . . -StackingLineSeries series1 = new StackingLineSeries() +StackingLineSeries series1 = new StackingLineSeries() { ItemsSource = viewModel.Data1, XBindingPath = "Month", @@ -291,7 +292,7 @@ this.Content = chart; {% endtabs %} -![Stacked Line Marker support in MAUI Chart](Chart-types-images/stacked_line_marker_support.png) +![Stacked Line Marker support in MAUI Chart](chart-types-images/stacked_line_marker_support.png) ### Marker customization @@ -333,7 +334,7 @@ SfCartesianChart chart = new SfCartesianChart(); ViewModel viewModel = new ViewModel(); ... // Define settings for the chart markers -ChartMarkerSettings chartMarker= new ChartMarkerSettings() +ChartMarkerSettings chartMarker = new ChartMarkerSettings() { Type = ShapeType.Diamond, Fill = Colors.White, @@ -342,7 +343,7 @@ ChartMarkerSettings chartMarker= new ChartMarkerSettings() Width = 8, }; -StackingLineSeries series = new StackingLineSeries() +StackingLineSeries series = new StackingLineSeries() { ItemsSource = viewModel.Data, XBindingPath = "Month", diff --git a/maui-toolkit/Cartesian-Charts/StackedLine100.md b/maui-toolkit/Cartesian-Charts/StackedLine100.md index 8f32de67..7d003f16 100644 --- a/maui-toolkit/Cartesian-Charts/StackedLine100.md +++ b/maui-toolkit/Cartesian-Charts/StackedLine100.md @@ -53,7 +53,6 @@ N> The Cartesian chart has a [Series](https://help.syncfusion.com/cr/maui-toolki - {% endhighlight %} {% highlight c# %} @@ -67,7 +66,7 @@ N> The Cartesian chart has a [Series](https://help.syncfusion.com/cr/maui-toolki ViewModel viewModel = new ViewModel(); // Create a StackingLine100Series for the chart - StackingLine100Series series1 = new StackingLine100Series() + StackingLine100Series series1 = new StackingLine100Series() { ItemsSource = viewModel.Data1, XBindingPath = "Month", @@ -80,6 +79,7 @@ N> The Cartesian chart has a [Series](https://help.syncfusion.com/cr/maui-toolki XBindingPath = "Month", YBindingPath = "Value", }; + StackingLine100Series series3 = new StackingLine100Series() { ItemsSource = viewModel.Data3, @@ -89,7 +89,7 @@ N> The Cartesian chart has a [Series](https://help.syncfusion.com/cr/maui-toolki StackingLine100Series series4 = new StackingLine100Series() { - ItemsSource = viewModel.Data4 + ItemsSource = viewModel.Data4, XBindingPath = "Month", YBindingPath = "Value", }; @@ -169,8 +169,8 @@ The [StrokeDashArray](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Mau DoubleCollection doubleCollection = new DoubleCollection(); doubleCollection.Add(5); doubleCollection.Add(2); - . . . - StackingLine100Series series1 = new StackingLine100Series() + + StackingLine100Series series1 = new StackingLine100Series() { ItemsSource = viewModel.Data1, XBindingPath = "Month", @@ -255,7 +255,7 @@ A marker, also known as a symbol, is used to determine or highlight the position ViewModel viewModel = new ViewModel(); ... - StackingLine100Series series1 = new StackingLine100Series() + StackingLine100Series series1 = new StackingLine100Series() { ItemsSource = viewModel.Data1, XBindingPath = "Month", @@ -340,7 +340,7 @@ In order to change the series markers appearance, create an instance of the [Mar ViewModel viewModel = new ViewModel(); ... // Configure marker settings for the data points in the chart series. - ChartMarkerSettings chartMarker= new ChartMarkerSettings() + ChartMarkerSettings chartMarker = new ChartMarkerSettings() { Type = ShapeType.Diamond, Fill = Colors.White, @@ -349,12 +349,12 @@ In order to change the series markers appearance, create an instance of the [Mar Width = 8, }; - StackingLine100Series series = new StackingLine100Series() + StackingLine100Series series = new StackingLine100Series() { ItemsSource = viewModel.Data, XBindingPath = "Month", YBindingPath = "Value", - ShowMarkers= true, + ShowMarkers = true, MarkerSettings = chartMarker, // Apply the marker settings configured above. }; diff --git a/maui-toolkit/Cartesian-Charts/StepArea.md b/maui-toolkit/Cartesian-Charts/StepArea.md index b2bc544a..1904ba54 100644 --- a/maui-toolkit/Cartesian-Charts/StepArea.md +++ b/maui-toolkit/Cartesian-Charts/StepArea.md @@ -12,7 +12,7 @@ keywords: .net maui step area chart, maui step area chart, .net maui chart step ## Step Area Chart The step area chart displays data that changes over time or across different categories. -In a step area chart, the data points are connected by horizontal and vertical lines to create a series of steps. Each step represents a specific time interval or category. The area between the steps is then filled with a color or shading. To render an area chart, create an instance of [StepAreaSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.StepAreaSeries.html), and add it to the [Series](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_Series) collection property of the [SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html). +In a step area chart, the data points are connected by horizontal and vertical lines to create a series of steps. Each step represents a specific time interval or category. The area between the steps is then filled with a color or shading. To render a step area chart, create an instance of [StepAreaSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.StepAreaSeries.html), and add it to the [Series](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_Series) collection property of the [SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html). N> The Cartesian chart has [Series](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_Series) as its default content. @@ -66,7 +66,7 @@ this.Content = chart; ## Enable Marker -A marker, also known as a symbol, determines or highlights the data point’s position. To enable markers in the series, set the [ShowMarkers](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.AreaSeries.html#Syncfusion_Maui_Toolkit_Charts_AreaSeries_ShowMarkers) property to true. +A marker, also known as a symbol, determines or highlights the data point's position. To enable markers in the series, set the [ShowMarkers](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.AreaSeries.html#Syncfusion_Maui_Toolkit_Charts_AreaSeries_ShowMarkers) property to true. {% tabs %} @@ -92,11 +92,11 @@ StepAreaSeries series = new StepAreaSeries() ItemsSource = new ViewModel().Data, XBindingPath = "Month", YBindingPath = "Value", - ShowMarkers= true, // Enable markers to display data points clearly - }; + ShowMarkers = true, // Enable markers to display data points clearly +}; chart.Series.Add(series); -this.Content= chart; +this.Content = chart; {% endhighlight %} @@ -104,7 +104,7 @@ this.Content= chart; ### Marker customization -To change the series markers appearance, create an instance of the [MarkerSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.AreaSeries.html#Syncfusion_Maui_Toolkit_Charts_AreaSeries_MarkerSettings) property. The following properties are used to customize marker appearance. +To change the series markers appearance, create an instance of the [MarkerSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.AreaSeries.html#Syncfusion_Maui_Toolkit_Charts_AreaSeries_MarkerSettings) property. The following properties are used to customize marker appearance: * [Type](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartMarkerSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartMarkerSettings_Type), of type `ShapeType`, describes the shape of the series marker. The default value of this property is [ShapeType.Circle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ShapeType.html#Syncfusion_Maui_Toolkit_Charts_ShapeType_Circle). * [Stroke](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartMarkerSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartMarkerSettings_Stroke), of type `Brush`, indicates the brush used to paint the marker border. @@ -141,7 +141,7 @@ To change the series markers appearance, create an instance of the [MarkerSettin SfCartesianChart chart = new SfCartesianChart(); ... // Configure chart marker settings to customize the appearance of markers in the chart. -ChartMarkerSettings chartMarker= new ChartMarkerSettings() +ChartMarkerSettings chartMarker = new ChartMarkerSettings() { Type = ShapeType.Diamond, Fill = Colors.Brown, diff --git a/maui-toolkit/Cartesian-Charts/StepLine.md b/maui-toolkit/Cartesian-Charts/StepLine.md index 44fa7497..72f430c8 100644 --- a/maui-toolkit/Cartesian-Charts/StepLine.md +++ b/maui-toolkit/Cartesian-Charts/StepLine.md @@ -10,7 +10,7 @@ keywords: .net maui step line chart, maui step line chart, step line chart custo # Step Line Chart in .NET MAUI Chart -Step line chart is used to display the data showing changes in values over time by connecting points on plots with a combination of horizontal and vertical lines. And it's used when it is necessary to highlight the irregularity changes. It appears to be steps. +Step line chart is used to display data showing changes in values over time by connecting points on plots with a combination of horizontal and vertical lines. It's used when it is necessary to highlight irregular changes. The visualization appears as steps. ## Step Line Chart @@ -42,7 +42,7 @@ N> The Cartesian chart has [Series](https://help.syncfusion.com/cr/maui-toolkit/ -{% endhighlight xaml %} +{% endhighlight %} {% highlight c# %} @@ -72,7 +72,7 @@ chart.Series.Add(series1); chart.Series.Add(series2); this.Content = chart; -{% endhighlight C# %} +{% endhighlight %} {% endtabs %} @@ -80,7 +80,7 @@ this.Content = chart; ## Dashed Step Line Chart -The [StrokeDashArray](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.LineSeries.html#Syncfusion_Maui_Toolkit_Charts_LineSeries_StrokeDashArray) property of the [StepLineSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.StepLineSeries.html) is used to render the Step line series with dashes. An odd value is considered as rendering size, and an Even value is considered a gap. +The [StrokeDashArray](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.LineSeries.html#Syncfusion_Maui_Toolkit_Charts_LineSeries_StrokeDashArray) property of the [StepLineSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.StepLineSeries.html) is used to render the Step line series with dashes. An odd value is considered as rendering size, and an even value is considered a gap. {% tabs %} @@ -88,12 +88,12 @@ The [StrokeDashArray](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Mau - + 5 2 - + @@ -108,9 +108,9 @@ The [StrokeDashArray](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Mau XBindingPath="Date" YBindingPath="Value"/> - + -{% endhighlight xaml %} +{% endhighlight %} {% highlight C# %} @@ -121,23 +121,23 @@ chart.XAxes.Add(primaryAxis); NumericalAxis secondaryAxis = new NumericalAxis(); chart.YAxes.Add(secondaryAxis); -// Create a DoubleCollection for the StrokeDashArray, +// Create a DoubleCollection for the StrokeDashArray DoubleCollection doubleCollection = new DoubleCollection(); doubleCollection.Add(5); doubleCollection.Add(2); StepLineSeries steplineSeries = new StepLineSeries() { - ItemsSource = new ViewModel().Data; - XBindingPath = "Date"; - YBindingPath = "Value"; - StrokeDashArray = doubleCollection; // Apply custom dash pattern to the series stroke. -} + ItemsSource = new ViewModel().Data, + XBindingPath = "Date", + YBindingPath = "Value", + StrokeDashArray = doubleCollection // Apply custom dash pattern to the series stroke. +}; chart.Series.Add(steplineSeries); this.Content = chart; -{% endhighlight C# %} +{% endhighlight %} {% endtabs %} @@ -169,15 +169,15 @@ The [IsTransposed](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.T XBindingPath="Year" YBindingPath="Value"/> - + -{% endhighlight xaml %} +{% endhighlight %} {% highlight C# %} SfCartesianChart chart = new SfCartesianChart(); -chart.IsTransposed = True; // Set the chart to transpose the axes, swapping the X and Y axes +chart.IsTransposed = true; // Set the chart to transpose the axes, swapping the X and Y axes DatetimeAxis primaryAxis = new DatetimeAxis(); chart.XAxes.Add(primaryAxis); @@ -186,23 +186,23 @@ chart.YAxes.Add(secondaryAxis); StepLineSeries steplineSeries1 = new StepLineSeries() { - ItemsSource = new ViewModel().Data1; - XBindingPath = "Year"; - YBindingPath = "Value"; + ItemsSource = new ViewModel().Data1, + XBindingPath = "Year", + YBindingPath = "Value" }; StepLineSeries steplineSeries2 = new StepLineSeries() { - ItemsSource = new ViewModel().Data2; - XBindingPath = "Year"; - YBindingPath = "Value"; + ItemsSource = new ViewModel().Data2, + XBindingPath = "Year", + YBindingPath = "Value" }; chart.Series.Add(steplineSeries1); chart.Series.Add(steplineSeries2); this.Content = chart; -{% endhighlight C# %} +{% endhighlight %} {% endtabs %} diff --git a/maui-toolkit/Cartesian-Charts/Tooltip.md b/maui-toolkit/Cartesian-Charts/Tooltip.md index c14ed3cc..31bceeaf 100644 --- a/maui-toolkit/Cartesian-Charts/Tooltip.md +++ b/maui-toolkit/Cartesian-Charts/Tooltip.md @@ -1,7 +1,7 @@ --- layout: post title: Tooltip in .NET MAUI Chart control | Syncfusion -description: This section explains about how to enable tooltip and its customization in Syncfusion® .NET MAUI Chart (SfCartesianChart) control. +description: This section explains how to enable tooltip and its customization in Syncfusion® .NET MAUI Chart (SfCartesianChart) control. platform: maui-toolkit control: SfCartesianChart documentation: ug @@ -10,11 +10,11 @@ keywords: .net maui chart tooltip, maui chart tooltip, .net maui chart tooltip c # Tooltip in .NET MAUI Chart -Tooltip is used to display any information or metadata of the tapped segment. The Cartesian chart provides tooltip support for all series. +Tooltip is used to display information or metadata of the tapped segment. The Cartesian chart provides tooltip support for all series. ## Define Tooltip -To define the tooltip in the series, set the [EnableTooltip](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_EnableTooltip) property to true. The default value of [EnableTooltip](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_EnableTooltip) property is `false`. +To define the tooltip in a series, set the [EnableTooltip](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_EnableTooltip) property to true. The default value of the [EnableTooltip](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_EnableTooltip) property is `false`. {% tabs %} @@ -65,14 +65,14 @@ this.Content = chart; ![Tooltip support in MAUI chart](Tooltip_images/maui_chart_tooltip.png) -The [ChartTooltipBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html) is used to customize the tooltip. For customizing the tooltip, create an instance [ChartTooltipBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html) and set it to the [TooltipBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartBase.html#Syncfusion_Maui_Toolkit_Charts_ChartBase_TooltipBehavior) property of [SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html). The following properties are used to customize the tooltip: +The [ChartTooltipBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html) is used to customize the tooltip. For customizing the tooltip, create an instance of [ChartTooltipBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html) and set it to the [TooltipBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartBase.html#Syncfusion_Maui_Toolkit_Charts_ChartBase_TooltipBehavior) property of [SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html). The following properties are used to customize the tooltip: -* [Background](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTooltipBehavior_Background) - Gets or sets the background color to the tooltip label. +* [Background](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTooltipBehavior_Background) - Gets or sets the background color of the tooltip label. * [FontAttributes](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTooltipBehavior_FontAttributes) - Gets or sets the font style for the label. * [FontFamily](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTooltipBehavior_FontFamily) - Gets or sets the font family name for the label. * [FontSize](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTooltipBehavior_FontSize) - Gets or sets the font size for the label. -* [Duration](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTooltipBehavior_Duration) - Gets or sets the duration of the tooltip text in seconds. -* [Margin](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTooltipBehavior_Margin) - Gets or sets the margin of the label to customize the appearance of label. +* [Duration](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTooltipBehavior_Duration) - Gets or sets the duration of the tooltip text in milliseconds. +* [Margin](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTooltipBehavior_Margin) - Gets or sets the margin of the label to customize its appearance. * [TextColor](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTooltipBehavior_TextColor) - Used to set the color for the text of the label. @@ -99,7 +99,7 @@ this.Content = chart; ## Duration -The [Duration](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTooltipBehavior_Duration) property is used to specify the duration time in milliseconds for which tooltip will be displayed. +The [Duration](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTooltipBehavior_Duration) property is used to specify the duration in milliseconds for which the tooltip will be displayed. {% tabs %} @@ -166,7 +166,7 @@ The [SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Ma {% highlight xaml %} - + @@ -197,11 +197,13 @@ The [SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Ma - - @@ -226,7 +228,7 @@ ColumnSeries series2 = new ColumnSeries() { ItemsSource = new ViewModel().Data, XBindingPath = "Demand", - YBindingPath = "Year2010", + YBindingPath = "Year2011", EnableTooltip = true, TooltipTemplate = chart.Resources["tooltipTemplate"] as DataTemplate // Set a custom tooltip template from the chart's resources }; diff --git a/maui-toolkit/Cartesian-Charts/Trackball.md b/maui-toolkit/Cartesian-Charts/Trackball.md index 26ab657d..415948b6 100644 --- a/maui-toolkit/Cartesian-Charts/Trackball.md +++ b/maui-toolkit/Cartesian-Charts/Trackball.md @@ -1,7 +1,7 @@ --- layout: post title: Trackball in .NET MAUI Chart control | Syncfusion -description: This section explains about how to enable trackball and its customization in Syncfusion® .NET MAUI Chart (SfCartesianChart) control. +description: This section explains how to enable trackball and its customization in Syncfusion® .NET MAUI Chart (SfCartesianChart) control. platform: maui-toolkit control: SfCartesianChart documentation: ug @@ -10,15 +10,15 @@ keywords: .net maui chart trackball, maui chart trackball, .net maui trackball c # Trackball in .NET MAUI Chart -Trackball, which allows you to show the tooltip for the nearest data points when you interact with the chart area. On mobile, long press the chart to show the trackball, and drag the chart to change the trackball's location constantly. To display the trackball on the desktop, move the cursor over the chart area. +Trackball allows you to show tooltips for the nearest data points when you interact with the chart area. On mobile, long press the chart to show the trackball, and drag the chart to change the trackball's location continuously. To display the trackball on desktop, move the cursor over the chart area. ## Enable Trackball -To enable the trackball in the chart, create an instance of the [ChartTrackballBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTrackballBehavior.html) and set it to the [TrackballBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_TrackballBehavior) property. The following properties are used to show or hide the line and tooltip. +To enable the trackball in the chart, create an instance of the [ChartTrackballBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTrackballBehavior.html) and set it to the [TrackballBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_TrackballBehavior) property. The following properties are used to show or hide the line and tooltip: -* [ShowLabel](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTrackballBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTrackballBehavior_ShowLabel), of type `bool`, indicates the shows or hides the trackball label. The default value is `True`. -* [ShowMarkers](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTrackballBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTrackballBehavior_ShowMarkershttps://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTrackballBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTrackballBehavior_ShowMarkers), of type `bool`, indicates the shows or hides trackball markers. The default value is `True`. -* [ShowLine](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTrackballBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTrackballBehavior_ShowLine), of type `bool`, indicates the shows or hides the trackball line. The default value is `True`. +* [ShowLabel](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTrackballBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTrackballBehavior_ShowLabel), of type `bool`, indicates whether to show or hide the trackball label. The default value is `True`. +* [ShowMarkers](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTrackballBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTrackballBehavior_ShowMarkers), of type `bool`, indicates whether to show or hide trackball markers. The default value is `True`. +* [ShowLine](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTrackballBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTrackballBehavior_ShowLine), of type `bool`, indicates whether to show or hide the trackball line. The default value is `True`. {% tabs %} @@ -42,7 +42,7 @@ SfCartesianChart chart = new SfCartesianChart(); // Create a trackball behavior for the chart ChartTrackballBehavior trackball = new ChartTrackballBehavior(); // Set the trackball behavior to the chart -chart.TrackballBehavior= trackball; +chart.TrackballBehavior = trackball; this.Content = chart; @@ -52,7 +52,7 @@ this.Content = chart; ## Enable Label Display Mode -The [DisplayMode](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTrackballBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTrackballBehavior_DisplayMode) property specifies whether a label should be displayed for all data points along the trackball line or only the nearest data point label. The following choices are available for this property. +The [DisplayMode](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTrackballBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTrackballBehavior_DisplayMode) property specifies whether a label should be displayed for all data points along the trackball line or only the nearest data point label. The following choices are available for this property: * `FloatAllPoints` – Displays labels for all the data points along the vertical line. * `NearestPoint` – Displays a label for a single data point nearer to the touch point on the chart area. @@ -82,14 +82,14 @@ ChartTrackballBehavior trackball = new ChartTrackballBehavior() ShowLine = true, DisplayMode = LabelDisplayMode.NearestPoint // Set the display mode of the trackball label }; -chart.TrackballBehavior= trackball; +chart.TrackballBehavior = trackball; . . . this.Content = chart; {% endhighlight %} {% endtabs %} -## Activation mode +## Activation Mode The [ActivationMode](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTrackballBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTrackballBehavior_ActivationMode) property is used to restrict the visibility of trackball based on the touch actions. @@ -121,22 +121,22 @@ ChartTrackballBehavior trackball = new ChartTrackballBehavior() { ActivationMode = ChartTrackballActivationMode.LongPress // Set the activation mode of the trackball }; -chart.TrackballBehavior= trackball; +chart.TrackballBehavior = trackball; . . . this.Content = chart; {% endhighlight %} {% endtabs %} -N> The default value of [ActivationMode](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTrackballBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTrackballBehavior_ActivationMode) property is `ChartTrackballActivationMode.LongPress` for Android and iOS platform and default value for MacOS and Windows platform is `ChartTrackballActivationMode.TouchMove`. +N> The default value of [ActivationMode](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTrackballBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTrackballBehavior_ActivationMode) property is `ChartTrackballActivationMode.LongPress` for Android and iOS platforms and the default value for MacOS and Windows platforms is `ChartTrackballActivationMode.TouchMove`. -N> On Windows, LongPress gestures are supported only through touch input, not with a mouse. Consequently, when ActivationMode is set to LongPress, the trackball activates only via touch interaction, not with a mouse interaction. +N> On Windows, LongPress gestures are supported only through touch input, not with a mouse. Consequently, when ActivationMode is set to LongPress, the trackball activates only via touch interaction, not with mouse interaction. -## Appearance customization +## Appearance Customization -### Trackball Labels customization +### Trackball Labels Customization -The [LabelStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTrackballBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTrackballBehavior_LabelStyle) property provides to customize the trackball labels. These options are: +The [LabelStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTrackballBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTrackballBehavior_LabelStyle) property provides options to customize the trackball labels: * `Background`, of type `Brush`, used to change the label background color. * `Margin`, of type `Thickness`, used to change the margin of the label. @@ -156,13 +156,17 @@ The [LabelStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Too ... - - - + + + + + + + ... @@ -177,15 +181,15 @@ ChartTrackballBehavior trackball = new ChartTrackballBehavior(); // Define a label style for the trackball ChartLabelStyle labelStyle = new ChartLabelStyle() { - Background = Color.LightBlue, + Background = Colors.LightBlue, FontSize = 15, CornerRadius = 5, StrokeWidth = 2, - Stroke = Color.Gray + Stroke = Colors.Gray }; -trackballBehavior.LabelStyle = labelStyle; // Apply the custom label style to the trackball behavior -chart.TrackballBehavior= trackball; +trackball.LabelStyle = labelStyle; // Apply the custom label style to the trackball behavior +chart.TrackballBehavior = trackball; this.Content = chart; @@ -195,7 +199,7 @@ this.Content = chart; ### Trackball Line Customization - The [LineStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTrackballBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTrackballBehavior_LineStyle) property provides to customize the trackball line. These options are: +The [LineStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTrackballBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTrackballBehavior_LineStyle) property provides options to customize the trackball line: * `StrokeWidth`, of type `double`, used to change the stroke width of the line. * `Stroke`, of type `Brush`, used to change the stroke color of the line. @@ -207,10 +211,14 @@ this.Content = chart; ... - - - + + + + + + + ... @@ -228,8 +236,8 @@ ChartLineStyle lineStyle = new ChartLineStyle() Stroke = Colors.Gray, StrokeWidth = 4 }; -trackballBehavior.LineStyle = lineStyle; // Assign the configured line style to the trackball behavior -chart.TrackballBehavior= trackball; +trackball.LineStyle = lineStyle; // Assign the configured line style to the trackball behavior +chart.TrackballBehavior = trackball; this.Content = chart; @@ -239,7 +247,7 @@ this.Content = chart; ### Trackball Markers Customization -The [MarkerSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTrackballBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTrackballBehavior_MarkerSettings) property provides to customize the trackball markers. The trackball marker can be customized using the following properties. +The [MarkerSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTrackballBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTrackballBehavior_MarkerSettings) property provides options to customize the trackball markers: * `Type`, of type `ShapeType`, used to set the marker shape type. * `Stroke`, of type `Brush`, used to change the marker border color. @@ -256,9 +264,9 @@ The [MarkerSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui ... - - - + + + ... @@ -273,8 +281,9 @@ SfCartesianChart chart = new SfCartesianChart(); // Configure the settings for the marker that appears along with the trackball. var markerSettings = new ChartMarkerSettings() { - Height = 10, Width = 10, - Fill = new SolidColorBrush(Colors.Red), + Height = 10, + Width = 10, + Fill = Colors.Red, }; chart.TrackballBehavior = new ChartTrackballBehavior() { @@ -409,7 +418,7 @@ this.Content = chart; ![Trackball Label Template support in MAUI chart](Trackball_images/maui_chart_trackball_label_template.png) -## Trackball axis label template +## Trackball Axis Label Template To customize the appearance of axis labels on the trackball, you can use the [TrackballLabelTemplate](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_TrackballLabelTemplate) property of the [ChartAxis](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html). @@ -532,7 +541,9 @@ When the trackball moves across the axis, this feature highlights the related ax ... - + + + {% endhighlight %} @@ -543,9 +554,10 @@ SfCartesianChart chart = new SfCartesianChart(); . . . CategoryAxis chartAxis = new CategoryAxis() { - chartAxis.ShowTrackballLabel = false -} + ShowTrackballLabel = false +}; +chart.XAxes.Add(chartAxis); this.Content = chart; {% endhighlight %} @@ -561,7 +573,7 @@ this.Content = chart; ### TrackballCreated -The [`TrackballCreated`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_TrackballCreated) event occurs when the trackball moves from one data point to another. This argument contains an object of the ChartPointsInfo. The following properties are available in the `ChartPointInfo` class to customize the appearance of the trackball label based on a condition. +The [TrackballCreated](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_TrackballCreated) event occurs when the trackball moves from one data point to another. This argument contains an object of the ChartPointsInfo. The following properties are available in the `ChartPointInfo` class to customize the appearance of the trackball label based on a condition: * [Label](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.TrackballPointInfo.html#Syncfusion_Maui_Toolkit_Charts_TrackballPointInfo_Label) of type `string`: Used to change the text of the trackball label. * [LabelStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.TrackballPointInfo.html#Syncfusion_Maui_Toolkit_Charts_TrackballPointInfo_LabelStyle) of type `ChartLabelStyle`: Used to customize the appearance of the trackball label. diff --git a/maui-toolkit/Cartesian-Charts/Transform-axis-value-to-pixel-value-and-vice-versa.md b/maui-toolkit/Cartesian-Charts/Transform-axis-value-to-pixel-value-and-vice-versa.md index 226aed3f..84091d7f 100644 --- a/maui-toolkit/Cartesian-Charts/Transform-axis-value-to-pixel-value-and-vice-versa.md +++ b/maui-toolkit/Cartesian-Charts/Transform-axis-value-to-pixel-value-and-vice-versa.md @@ -12,14 +12,13 @@ keywords: .net maui chart transform axis value to pixel, maui chart axis value t [SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html) offers two utility methods to transform the pixel into a chart point and vice-versa. -* [`ValueToPoint(ChartAxis axis,double value)`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_ValueToPoint_Syncfusion_Maui_Toolkit_Charts_ChartAxis_System_Double_) - Converts the data point value to the screen point. -* [`PointToValue(ChartAxis axis,double x, double y)`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_PointToValue_Syncfusion_Maui_Toolkit_Charts_ChartAxis_System_Double_System_Double_) - Converts the screen point to the chart value. +* [`ValueToPoint(ChartAxis axis, double value)`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_ValueToPoint_Syncfusion_Maui_Toolkit_Charts_ChartAxis_System_Double_) - Converts the data point value to the screen point. +* [`PointToValue(ChartAxis axis, double x, double y)`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_PointToValue_Syncfusion_Maui_Toolkit_Charts_ChartAxis_System_Double_System_Double_) - Converts the screen point to the chart value. {% tabs %} {% highlight C# %} - if (chart is SfCartesianChart cartesianChart) { //Convert screen point to chart point. @@ -29,9 +28,8 @@ if (chart is SfCartesianChart cartesianChart) //Convert chart point to screen point. var xPoint = cartesianChart.ValueToPoint(cartesianChart.XAxes[0], xValue); var yPoint = cartesianChart.ValueToPoint(cartesianChart.YAxes[0], yValue); - } -{% endhighlight %} +{% endhighlight %} -{% endtabs %} +{% endtabs %} \ No newline at end of file diff --git a/maui-toolkit/Cartesian-Charts/Waterfall-Chart.md b/maui-toolkit/Cartesian-Charts/Waterfall-Chart.md index c063d81d..e348dfe0 100644 --- a/maui-toolkit/Cartesian-Charts/Waterfall-Chart.md +++ b/maui-toolkit/Cartesian-Charts/Waterfall-Chart.md @@ -12,13 +12,13 @@ Keywords: .net maui waterfall chart, .net maui bridge chart, waterfall chart cus ## Waterfall Chart -[WaterfallSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.WaterfallSeries.html) clarifies the cumulative effect of a set of provided positive and negative values. The series is represented by a rectangle and a connector between the rectangles. To render a waterfall chart, create an instance of [WaterfallSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.WaterfallSeries.html), and add it to the [Series](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_Series) collection property of the [SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html) +[WaterfallSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.WaterfallSeries.html) clarifies the cumulative effect of a set of provided positive and negative values. The series is represented by rectangles with connectors between them. To render a waterfall chart, create an instance of [WaterfallSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.WaterfallSeries.html) and add it to the [Series](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_Series) collection property of the [SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html). -* [SummaryBindingPath](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.WaterfallSeries.html#Syncfusion_Maui_Toolkit_Charts_WaterfallSeries_SummaryBindingPath) of the string type is used to get or set the path value on the source subject to serve summary values to the series. -* [SummaryPointsBrush](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.WaterfallSeries.html#Syncfusion_Maui_Toolkit_Charts_WaterfallSeries_SummaryPointsBrush) of brush type is used to change the fill of the summary segment of the series. . -* [NegativePointsBrush](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.WaterfallSeries.html#Syncfusion_Maui_Toolkit_Charts_WaterfallSeries_NegativePointsBrush) of brush type is used to change the fill of the negative segment of the series. -* [AllowAutoSum](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.WaterfallSeries.html#Syncfusion_Maui_Toolkit_Charts_WaterfallSeries_AllowAutoSum) of bool type is used to change the summary segment calculation. By default, the property is true. When disabling this property, it renders the segment by using the y value of provided ItemsSource collection. -* [ShowConnectorLine](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.WaterfallSeries.html#Syncfusion_Maui_Toolkit_Charts_WaterfallSeries_ShowConnectorLine) of bool type is used to enable or disable the connector line. By default, the property value is `true`. +* [SummaryBindingPath](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.WaterfallSeries.html#Syncfusion_Maui_Toolkit_Charts_WaterfallSeries_SummaryBindingPath) - A string property used to set the path value on the source object to identify summary values for the series. +* [SummaryPointsBrush](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.WaterfallSeries.html#Syncfusion_Maui_Toolkit_Charts_WaterfallSeries_SummaryPointsBrush) - A brush property used to change the fill color of summary segments in the series. +* [NegativePointsBrush](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.WaterfallSeries.html#Syncfusion_Maui_Toolkit_Charts_WaterfallSeries_NegativePointsBrush) - A brush property used to change the fill color of negative segments in the series. +* [AllowAutoSum](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.WaterfallSeries.html#Syncfusion_Maui_Toolkit_Charts_WaterfallSeries_AllowAutoSum) - A boolean property that controls summary segment calculation. By default, this property is true. When set to false, it renders segments using the Y values from the provided ItemsSource collection. +* [ShowConnectorLine](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.WaterfallSeries.html#Syncfusion_Maui_Toolkit_Charts_WaterfallSeries_ShowConnectorLine) - A boolean property used to enable or disable connector lines. The default value is `true`. {% tabs %} @@ -80,10 +80,10 @@ this.Content = chart; ![Waterfall Chart in MAUI Chart](Chart-types-images/maui_waterfall_Basic.png) -## Connector line customization +## Connector Line Customization -The connector line can be customized by applying the [ConnectorLineStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.WaterfallSeries.html#Syncfusion_Maui_Toolkit_Charts_WaterfallSeries_ConnectorLineStyle) property of the series. -The following code example illustrates how to apply style for connector line. +The connector lines can be customized using the [ConnectorLineStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.WaterfallSeries.html#Syncfusion_Maui_Toolkit_Charts_WaterfallSeries_ConnectorLineStyle) property of the series. +The following code example demonstrates how to apply a style to connector lines: {% tabs %} @@ -103,7 +103,7 @@ The following code example illustrates how to apply style for connector line. {% highlight c# %} -// Define the style for the connector lines in the waterfall chart. +// Define the style for the connector lines in the waterfall chart ChartLineStyle lineStyle = new ChartLineStyle() { Stroke = new SolidColorBrush(Colors.DarkViolet), @@ -115,11 +115,11 @@ WaterfallSeries series = new WaterfallSeries() ItemsSource = new viewModel().Sales, XBindingPath = "Department", YBindingPath = "Value", - ConnectorLineStyle = lineStyle, // Apply the previously defined line style to the connector lines in the series. + ConnectorLineStyle = lineStyle, // Apply the defined line style to the connector lines }; {% endhighlight %} {% endtabs %} -![Connector line customization in Waterfall Chart](Chart-types-images/maui_waterfall_LineStyle.png) +![Connector line customization in Waterfall Chart](Chart-types-images/maui_waterfall_LineStyle.png) \ No newline at end of file diff --git a/maui-toolkit/Cartesian-Charts/Zooming-and-panning.md b/maui-toolkit/Cartesian-Charts/Zooming-and-panning.md index 88c94f96..c7429ec0 100644 --- a/maui-toolkit/Cartesian-Charts/Zooming-and-panning.md +++ b/maui-toolkit/Cartesian-Charts/Zooming-and-panning.md @@ -10,13 +10,13 @@ keywords: .net maui chart zooming and panning, .net maui zooming and panning cus # Zooming and Panning in .NET MAUI Chart -[SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html) allows you to zoom the chart area with the help of the zoom feature. This behavior is mostly used to view the data point in the specific area, when there are large number of data points inside the chart. +[SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html) allows you to zoom the chart area with the help of the zoom feature. This behavior is mostly used to view data points in a specific area, especially when there are a large number of data points inside the chart. -Zooming and panning provides you to take a close-up look of the data point plotted in the series +Zooming and panning provides you with a close-up look at the data points plotted in the series. ## Enable Zooming -To enable the zooming and panning in the chart, create an instance of [ChartZoomPanBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartZoomPanBehavior.html) and set it to the [ZoomPanBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_ZoomPanBehavior) property of [SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html). +To enable zooming and panning in the chart, create an instance of [ChartZoomPanBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartZoomPanBehavior.html) and set it to the [ZoomPanBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_ZoomPanBehavior) property of [SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html). {% tabs %} @@ -50,7 +50,7 @@ Zooming the plot area can be achieved by pinch zooming, and also using the prope ### Pinch Zooming -Pinch zooming is enable by using the [EnablePinchZooming](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartZoomPanBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartZoomPanBehavior_EnablePinchZooming) property to `true` as shown in the below code snippet. +Pinch zooming is enabled by setting the [EnablePinchZooming](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartZoomPanBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartZoomPanBehavior_EnablePinchZooming) property to `true` as shown in the following code snippet: {% tabs %} @@ -83,7 +83,7 @@ this.Content = chart; ### Directional Zooming -The directional Zooming feature enhances your zooming experience by allowing you to zoom in and out in a specific direction. This feature is enabled by setting the [EnableDirectionalZooming](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartZoomPanBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartZoomPanBehavior_EnableDirectionalZooming) property to `true` as shown in the following code sample. The default value of this property is false. +The directional zooming feature enhances your zooming experience by allowing you to zoom in and out in a specific direction. This feature is enabled by setting the [EnableDirectionalZooming](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartZoomPanBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartZoomPanBehavior_EnableDirectionalZooming) property to `true` as shown in the following code sample. The default value of this property is `false`. {% tabs %} @@ -116,9 +116,9 @@ this.Content = chart; {% endtabs %} -T> [EnablePinchZooming](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartZoomPanBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartZoomPanBehavior_EnablePinchZooming) should be set as `true`, because directional Zooming relies on the pinch gesture direction. +T> [EnablePinchZooming](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartZoomPanBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartZoomPanBehavior_EnablePinchZooming) should be set as `true`, because directional zooming relies on the pinch gesture direction. -N> The directional Zooming Feature is not supported in the macOS platform. +N> The directional zooming feature is not supported on the macOS platform. ### Zooming by setting ZoomFactor and ZoomPosition @@ -158,9 +158,9 @@ this.Content = chart; ## Zooming Mode -The zooming can be done both horizontally and vertically. The zooming direction is defined by using the [ZoomMode](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartZoomPanBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartZoomPanBehavior_ZoomMode) property. +Zooming can be done both horizontally and vertically. The zooming direction is defined by using the [ZoomMode](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartZoomPanBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartZoomPanBehavior_ZoomMode) property. -Following code example illustrates how to restrict the chart to be zoomed only along horizontal axis. +The following code example illustrates how to restrict the chart to be zoomed only along the horizontal axis: {% tabs %} @@ -181,7 +181,7 @@ SfCartesianChart chart = new SfCartesianChart(); ... ChartZoomPanBehavior zooming = new ChartZoomPanBehavior() { - ZoomMode = ZoomMode.X //Set the zooming mode, allowing zoom operations only along the axis. + ZoomMode = ZoomMode.X //Set the zooming mode, allowing zoom operations only along the X axis. }; chart.ZoomPanBehavior = zooming; @@ -191,7 +191,7 @@ this.Content = chart; {% endtabs %} -Following code example illustrates how to restrict the chart to be zoomed only along vertical axis. +The following code example illustrates how to restrict the chart to be zoomed only along the vertical axis: {% tabs %} @@ -223,7 +223,7 @@ this.Content = chart; ## Maximum Zoom Level -The [MaximumZoomLevel](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartZoomPanBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartZoomPanBehavior_MaximumZoomLevel) property is used to determine the maximum limit for zooming within the chart. Once the zooming operation reaches its limit, further zooming actions are not carried out. The [MaximumZoomLevel](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartZoomPanBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartZoomPanBehavior_MaximumZoomLevel) property default value is `double.NaN`. +The [MaximumZoomLevel](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartZoomPanBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartZoomPanBehavior_MaximumZoomLevel) property is used to determine the maximum limit for zooming within the chart. Once the zooming operation reaches its limit, further zooming actions are not carried out. The default value of [MaximumZoomLevel](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartZoomPanBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartZoomPanBehavior_MaximumZoomLevel) is `double.NaN`. {% tabs %} @@ -256,7 +256,7 @@ this.Content = chart; ## Enable Panning -Panning feature allows moving the visible area of the chart when it is zoomed in. To enable panning, you have to set [EnablePanning](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartZoomPanBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartZoomPanBehavior_EnablePanning) property to `true`. +Panning feature allows moving the visible area of the chart when it is zoomed in. To enable panning, set the [EnablePanning](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartZoomPanBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartZoomPanBehavior_EnablePanning) property to `true`. {% tabs %} @@ -286,9 +286,9 @@ this.Content = chart; {% endtabs %} -## Selection zooming +## Selection Zooming -Selection zooming feature allows users to interactively choose a particular area of the chart and zoom in. By specifying the [EnableSelectionZooming](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartZoomPanBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartZoomPanBehavior_EnableSelectionZooming) property to `true` as shown in the following code sample, you can double tap and drag to select a range on the chart to be zoomed in. The default value of this property is false. +Selection zooming feature allows users to interactively choose a particular area of the chart and zoom in. By setting the [EnableSelectionZooming](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartZoomPanBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartZoomPanBehavior_EnableSelectionZooming) property to `true` as shown in the following code sample, you can double tap and drag to select a range on the chart to be zoomed in. The default value of this property is `false`. N> To perform selection zooming on a desktop, hold the left mouse button, double-click, and drag. For mobile, hold your finger, double-click, and drag to create a selection rectangle. @@ -322,20 +322,18 @@ this.Content = chart; ![Selection zooming support in MAUI Chart](Zooming-and-panning_images/maui_selection_zooming.gif) -### Selection rectangle customization +### Selection Rectangle Customization You can customize the selection rectangle using the following properties: * [SelectionRectStrokeWidth](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartZoomPanBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartZoomPanBehavior_SelectionRectStrokeWidth) – Get or set the stroke width for selection rectangle. - * [SelectionRectStroke](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartZoomPanBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartZoomPanBehavior_SelectionRectStroke) - Get or set the stroke color for selection rectangle. - * [SelectionRectStrokeDashArray](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartZoomPanBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartZoomPanBehavior_SelectionRectStrokeDashArray) - Get or set the stroke dashes for selection rectangle. - * [SelectionRectFill](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartZoomPanBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartZoomPanBehavior_SelectionRectFill) - Get or set the fill color for the selection rectangle. -### Show trackball axis label -The selection zooming trackball axis label is enabled by setting the [ShowTrackballLabel](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_ShowTrackballLabel) property to `true`. The default value of the [ShowTrackballLabel](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_ShowTrackballLabel) is `false`. The [TrackballLabelStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_TrackballLabelStyle) property provides to customize the trackball axis labels. These options are: +### Show Trackball Axis Label + +The selection zooming trackball axis label is enabled by setting the [ShowTrackballLabel](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_ShowTrackballLabel) property to `true`. The default value of the [ShowTrackballLabel](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_ShowTrackballLabel) is `false`. The [TrackballLabelStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_TrackballLabelStyle) property provides options to customize the trackball axis labels: * [Background](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLabelStyle_Background), of type `Brush`, describes the background color of the labels. * [CornerRadius](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLabelStyle_CornerRadius), of type `CornerRadius`, describes the corner radius of the label's border. @@ -350,7 +348,7 @@ The selection zooming trackball axis label is enabled by setting the [ShowTrackb N> If the axis labels in the selection zooming trackball are cropped or hidden, you should use the [LabelExtent](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_LabelExtent) property to extend the space between the axis labels and the axis title accordingly. -The following code sample illustrates how enable to axis trackball label while selection zooming. +The following code sample illustrates how to enable axis trackball labels while selection zooming: {% tabs %} @@ -462,7 +460,7 @@ The [SelectionZoomStart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion. The [SelectionZoomDelta](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_SelectionZoomDelta) event is activated during the process of selecting a region for zooming, and it is a cancelable event. * [ZoomRect](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSelectionZoomEventArgs.html#Syncfusion_Maui_Toolkit_Charts_ChartSelectionZoomEventArgs_ZoomRect) - Contains the bounds of the currently selected region. -* [Cancel](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSelectionZoomDeltaEventArgs.html#Syncfusion_Maui_Toolkit_Charts_ChartSelectionZoomDeltaEventArgs_Cancel) - Used to set the value indicating whether the box selection zooming process should be cancelled. +* [Cancel](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSelectionZoomDeltaEventArgs.html#Syncfusion_Maui_Toolkit_Charts_ChartSelectionZoomDeltaEventArgs_Cancel) - Used to set the value indicating whether the box selection zooming process should be canceled. ### SelectionZoomEnd @@ -476,7 +474,7 @@ The [Scroll](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit * [Axis](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartScrollEventArgs.html#Syncfusion_Maui_Toolkit_Charts_ChartScrollEventArgs_Axis) - The event will be triggered for all the axes within the chart. * [ZoomPosition](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartScrollEventArgs.html#Syncfusion_Maui_Toolkit_Charts_ChartScrollEventArgs_ZoomPosition) - Gets the current zoom position of the axis. -* [Cancel](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartScrollEventArgs.html#Syncfusion_Maui_Toolkit_Charts_ChartScrollEventArgs_Cancel) - Used to indicate whether the scrolling should be cancelled. +* [Cancel](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartScrollEventArgs.html#Syncfusion_Maui_Toolkit_Charts_ChartScrollEventArgs_Cancel) - Used to indicate whether the scrolling should be canceled. ### ResetZoom From 2fdc86ca289f477c30e89ebc6534629b8e5e4fee Mon Sep 17 00:00:00 2001 From: Harsha Date: Thu, 22 May 2025 16:40:34 +0530 Subject: [PATCH 3/3] added trade mark symbol --- .../Cartesian-Charts/Axis/Overview.md | 2 +- maui-toolkit/Cartesian-Charts/FastScatter.md | 4 ++-- maui-toolkit/Cartesian-Charts/Fastline.md | 2 +- maui-toolkit/Cartesian-Charts/Histogram.md | 2 +- maui-toolkit/Cartesian-Charts/Legend.md | 2 +- maui-toolkit/Cartesian-Charts/Line.md | 2 +- maui-toolkit/Cartesian-Charts/PlotBand.md | 22 +++++++++++-------- maui-toolkit/Cartesian-Charts/Scatter.md | 2 +- 8 files changed, 21 insertions(+), 17 deletions(-) diff --git a/maui-toolkit/Cartesian-Charts/Axis/Overview.md b/maui-toolkit/Cartesian-Charts/Axis/Overview.md index 8dcdf8c1..51c3a49c 100644 --- a/maui-toolkit/Cartesian-Charts/Axis/Overview.md +++ b/maui-toolkit/Cartesian-Charts/Axis/Overview.md @@ -1,7 +1,7 @@ --- layout: post title: About Axis in .NET MAUI Chart control | Syncfusion -description: Learn here all about chart axis and its key features of Syncfusion .NET MAUI Chart (SfCartesianChart) control. +description: Learn here all about chart axis and its key features of Syncfusion® .NET MAUI Chart (SfCartesianChart) control. platform: maui-toolkit control: SfCartesianChart documentation: ug diff --git a/maui-toolkit/Cartesian-Charts/FastScatter.md b/maui-toolkit/Cartesian-Charts/FastScatter.md index 5894bb42..36724089 100644 --- a/maui-toolkit/Cartesian-Charts/FastScatter.md +++ b/maui-toolkit/Cartesian-Charts/FastScatter.md @@ -1,7 +1,7 @@ --- layout: post title: Fast Scatter Chart in .NET MAUI Chart control | Syncfusion -description: Learn here all about the fast scatter chart and its features in Syncfusion .NET MAUI Chart (SfCartesianChart) control. +description: Learn here all about the fast scatter chart and its features in Syncfusion® .NET MAUI Chart (SfCartesianChart) control. platform: maui-toolkit control: SfCartesianChart documentation: ug @@ -63,7 +63,7 @@ FastScatterSeries scatterSeries2 = new FastScatterSeries { ItemsSource = new ViewModel().Data2, XBindingPath = "XValue", - YBindingPath = "YValue", // Fixed YBindingPath from "XValue" to "YValue" + YBindingPath = "YValue", }; chart.Series.Add(scatterSeries1); diff --git a/maui-toolkit/Cartesian-Charts/Fastline.md b/maui-toolkit/Cartesian-Charts/Fastline.md index 2548f288..68269a9e 100644 --- a/maui-toolkit/Cartesian-Charts/Fastline.md +++ b/maui-toolkit/Cartesian-Charts/Fastline.md @@ -144,7 +144,7 @@ There may be some jagged lines at the edges. This can be reduced by using the [E {% highlight c# %} SfCartesianChart chart = new SfCartesianChart(); -// ... (other chart configuration) +. . . FastLineSeries series = new FastLineSeries() { ItemsSource = new ViewModel().Data, diff --git a/maui-toolkit/Cartesian-Charts/Histogram.md b/maui-toolkit/Cartesian-Charts/Histogram.md index ac20f6a8..c42a6cdf 100644 --- a/maui-toolkit/Cartesian-Charts/Histogram.md +++ b/maui-toolkit/Cartesian-Charts/Histogram.md @@ -1,7 +1,7 @@ --- layout: post title: Histogram Chart in .NET MAUI Chart Control | Syncfusion -description: Learn here all about the Histogram chart and its type in Syncfusion .NET MAUI Chart (SfCartesianChart) control. +description: Learn here all about the Histogram chart and its type in Syncfusion® .NET MAUI Chart (SfCartesianChart) control. platform: maui-toolkit control: SfCartesianChart documentation: ug diff --git a/maui-toolkit/Cartesian-Charts/Legend.md b/maui-toolkit/Cartesian-Charts/Legend.md index 5c1a5c3e..0110eb1a 100644 --- a/maui-toolkit/Cartesian-Charts/Legend.md +++ b/maui-toolkit/Cartesian-Charts/Legend.md @@ -396,7 +396,7 @@ The [LegendItemCreated](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.M * [IconHeight](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_IconHeight) - used to get or set the icon height of the legend icon. * [IconWidth](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_IconWidth) - used to get or set the icon width of the legend icon. * [IsToggled](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_IsToggled) - used to get or set the toggle visibility of the legend. -* [DisableBrush](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_M +* [DisableBrush](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_DisableBrush) - used to get or set the color of the legend when toggled. * [Index](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_Index) - used to get index position of the legend. * [Item](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_Item) - used to get the corresponding series for the legend item. diff --git a/maui-toolkit/Cartesian-Charts/Line.md b/maui-toolkit/Cartesian-Charts/Line.md index 42ec3493..c3177294 100644 --- a/maui-toolkit/Cartesian-Charts/Line.md +++ b/maui-toolkit/Cartesian-Charts/Line.md @@ -1,7 +1,7 @@ --- layout: post title: Line Chart in .NET MAUI Chart control | Syncfusion -description: Learn here all about the line chart and its types in Syncfusion .NET MAUI Chart (SfCartesianChart) control. +description: Learn here all about the line chart and its types in Syncfusion® .NET MAUI Chart (SfCartesianChart) control. platform: maui-toolkit control: SfCartesianChart documentation: ug diff --git a/maui-toolkit/Cartesian-Charts/PlotBand.md b/maui-toolkit/Cartesian-Charts/PlotBand.md index 6af2820d..f06021e9 100644 --- a/maui-toolkit/Cartesian-Charts/PlotBand.md +++ b/maui-toolkit/Cartesian-Charts/PlotBand.md @@ -135,6 +135,8 @@ this.Content = chart; ## Recursive Plot Band +The Plot Band Recurrence feature allows plot bands to be drawn repeatedly at regular intervals within a chart. This functionality is especially beneficial when you need to highlight events that occur repeatedly over the timeline of a chart. + * [`RepeatEvery`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartPlotBand.html#Syncfusion_Maui_Toolkit_Charts_ChartPlotBand_RepeatEvery) - Specifies the frequency at which the plot band is repeated. * [`RepeatEveryType`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimePlotBand.html#Syncfusion_Maui_Toolkit_Charts_DateTimePlotBand_RepeatEveryType) - Specifies the date-time unit for `DateTimePlotBand`. * [`RepeatUntil`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimePlotBand.html#Syncfusion_Maui_Toolkit_Charts_DateTimePlotBand_RepeatUntil) - Specifies the end value at which the plot band stops repeating. @@ -198,6 +200,8 @@ this.Content = chart; ## Segmented Plot Band +When you draw a plot band for a vertical axis, the height of the plot band is determined by its `start` and `end` properties. The plot band extends horizontally across the entire length of its associated horizontal axis. Similarly, when drawing a plot band for a horizontal axis, the width is dictated by its `start` and `width` properties. Vertically, a plot band on a horizontal axis extends across the entire length of the associated vertical axis. + If you want to draw a plot band that should not stretch along its associated axis, you can set the [AssociatedAxisStart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartPlotBand.html#Syncfusion_Maui_Toolkit_Charts_ChartPlotBand_AssociatedAxisStart) and [AssociatedAxisEnd](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartPlotBand.html#Syncfusion_Maui_Toolkit_Charts_ChartPlotBand_AssociatedAxisEnd) properties. The values provided in these two properties correspond to its associated axis specified by the [AssociatedAxisName](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartPlotBand.html#Syncfusion_Maui_Toolkit_Charts_ChartPlotBand_AssociatedAxisName) property. {% tabs %} @@ -401,7 +405,7 @@ this.Content = chart; {% tabs %} {% highlight xaml %} - ... + . . . @@ -410,25 +414,25 @@ this.Content = chart; + Size="10" + Fill="Orange" + Text="Plot Band"> + FontSize="12" + FontAttributes="Bold"/> - ... + . . . {% endhighlight %} {% highlight c# %} SfCartesianChart chart = new SfCartesianChart(); -... +. . . CategoryAxis primaryAxis = new CategoryAxis(); chart.XAxes.Add(primaryAxis); @@ -454,7 +458,7 @@ plotBand.LabelStyle = labelStyle; // Apply the label style to the plot band numericalPlotBandCollection.Add(plotBand); numericalAxis.PlotBands = numericalPlotBandCollection; chart.YAxes.Add(numericalAxis); -... +. . . this.Content = chart; {% endhighlight %} {% endtabs %} \ No newline at end of file diff --git a/maui-toolkit/Cartesian-Charts/Scatter.md b/maui-toolkit/Cartesian-Charts/Scatter.md index 71c6b027..ba64c91a 100644 --- a/maui-toolkit/Cartesian-Charts/Scatter.md +++ b/maui-toolkit/Cartesian-Charts/Scatter.md @@ -1,7 +1,7 @@ --- layout: post title: Scatter Chart in .NET MAUI Chart control | Syncfusion -description: Learn here all about the scatter chart and its features in Syncfusion .NET MAUI Chart (SfCartesianChart) control. +description: Learn here all about the scatter chart and its features in Syncfusion® .NET MAUI Chart (SfCartesianChart) control. platform: maui-toolkit control: SfCartesianChart documentation: ug