WF-990480-Enhanceed Readability and SEO for WinForms Chart Axis UG Pages

WindowsForms/chart/Axis/Axis-Lines.md

@@ -0,0 +1,109 @@
+---
+layout: post
+title: Chart Axis Lines in Windows Forms Chart control | Syncfusion
+description: Learn about Axis Lines support in Syncfusion Essential Studio® Windows Forms Chart control and more details.
+platform: windowsforms
+control: Chart
+documentation: ug
+---
+
+# Chart Axis Lines in Windows Forms Chart
+
+## Axis Line Type
+
+The axis line can be customized using the `LineType` property of the axis. The `LineType` property supports the following customization options: `ForeColor`, `DashStyle`, `Width`, and `BackColor`.
+
+### ForeColor
+
+The foreground color of the axis line can be set using the `ForeColor` property.
+
+{% tabs %}
+
+{% highlight c# %}
+
+chart.PrimaryXAxis.LineType.ForeColor = Color.Blue;
+
+{% endhighlight %}
+
+{% highlight vb %}
+
+chart.PrimaryXAxis.LineType.ForeColor = Color.Blue
+
+{% endhighlight %}
+{% endtabs %}
+
+![Chart Axes](Chart-Axes_images/Chart-Axes_img48.png)
+
+### Width
+
+The thickness of the axis line can be set using the `Width` property.
+
+{% tabs %}
+
+{% highlight c# %}
+
+chart.PrimaryXAxis.LineType.Width = 3;
+
+{% endhighlight %}
+
+{% highlight vb %}
+
+chart.PrimaryXAxis.LineType.Width = 3
+
+{% endhighlight %}
+{% endtabs %}
+
+![Chart Axes](Chart-Axes_images/Chart-Axes_img49.jpeg)
+
+### DashStyle
+
+The dash style of the axis line can be set using the `DashStyle` property. The following six styles are supported:
+
+* Solid
+* Dash
+* Dot
+* DashDot
+* DashDotDot
+* Custom
+
+{% tabs %}
+
+{% highlight c# %}
+
+chart.PrimaryXAxis.LineType.DashStyle = System.Drawing.Drawing2D.DashStyle.DashDotDot;
+
+{% endhighlight %}
+
+{% highlight vb %}
+
+chart.PrimaryXAxis.LineType.DashStyle = System.Drawing.Drawing2D.DashStyle.DashDotDot
+
+{% endhighlight %}
+{% endtabs %}
+
+![Chart Axes](Chart-Axes_images/Chart-Axes_img50.jpeg)
+
+### BackColor
+
+When the `HatchFill` or `LinearGradient` pen type is used, an additional background color is required for the axis line. Both `ForeColor` and `BackColor` can be used together for these pen types.
+
+{% tabs %}
+
+{% highlight c# %}
+
+chart.PrimaryXAxis.LineType.BackColor = Color.Green;
+chart.PrimaryXAxis.LineType.ForeColor = Color.Red;
+chart.PrimaryXAxis.LineType.PenType = System.Drawing.Drawing2D.PenType.LinearGradient;
+
+{% endhighlight %}
+
+{% highlight vb %}
+
+chart.PrimaryXAxis.LineType.BackColor = Color.Green
+chart.PrimaryXAxis.LineType.ForeColor = Color.Red
+chart.PrimaryXAxis.LineType.PenType = System.Drawing.Drawing2D.PenType.LinearGradient
+
+{% endhighlight %}
+{% endtabs %}
+
+![Chart Axes](Chart-Axes_images/Chart-Axes_img54.jpeg)

WindowsForms/chart/Axis/Axis-Padding.md

@@ -0,0 +1,48 @@
+---
+layout: post
+title: Chart Axes in Windows Forms Chart control | Syncfusion
+description: Learn about Chart Axes support in Syncfusion Essential Studio® Windows Forms Chart control and more details.
+platform: windowsforms
+control: Chart
+documentation: ug
+---
+
+# Axis Padding in Windows Forms Chart
+
+## PointOffset — Space between axis and first point
+
+Leave extra space between the axis and the first plotted point to improve readability and avoid clipped markers at the chart border.
+
+**Key Property:**
+- {{'[PointOffset](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_PointOffset)'| markdownify }} — Specifies the offset as a fraction of an interval (for example, `0.1` leaves 10% of an interval)
+
+### Sample
+
+{% tabs %}
+
+{% highlight c# %}
+// Set a small offset (10% of an interval)
+chart.PrimaryXAxis.PointOffset = 0.1;
+
+// Leave one full interval of padding
+chart.PrimaryXAxis.PointOffset = 1;
+{% endhighlight %}
+
+{% highlight vb %}
+'Set a small offset (10% of an interval)
+chart.PrimaryXAxis.PointOffset = 0.1
+
+'Leave one full interval of padding
+chart.PrimaryXAxis.PointOffset = 1
+{% endhighlight %}
+
+{% endtabs %}
+
+### Notes
+- Use small values (e.g., `0.05`–`0.2`) for subtle spacing; use integer values (e.g., `1`) to leave whole intervals.
+
+### Example Output
+
+The following screenshot illustrates the chart when `PointOffset` is set to `1` (one interval of padding).
+
+![Chart Axes](Chart-Axes_images/Chart-Axes_img45.png)

WindowsForms/chart/Axis/Axis-Range-Padding.md

@@ -0,0 +1,53 @@
+---
+layout: post
+title: Chart Axes in Windows Forms Chart control | Syncfusion
+description: Learn about Chart Axes support in Syncfusion Essential Studio® Windows Forms Chart control and more details.
+platform: windowsforms
+control: Chart
+documentation: ug
+---
+
+# Axis Range Padding in Windows Forms Chart
+
+## RangePaddingType — Padding at axis extremes
+
+Control padding at the minimum and maximum ends of an axis range to ensure data points are not drawn flush against chart boundaries. Range padding can be disabled or automatically calculated to include an extra interval at both ends.
+
+**Key Property:**
+- {{'[RangePaddingType](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_RangePaddingType)'| markdownify }} — Determines how range padding is applied (see options below)
+
+### Options
+- `None` — No automatic padding; axis range follows data extents directly
+- `Calculate` — Adds one interval to the min and max of the axis range so data is inset from the chart edges
+
+### Samples
+
+{% tabs %}
+
+{% highlight c# %}
+// Disable automatic range padding
+chart.PrimaryXAxis.RangePaddingType = ChartAxisRangePaddingType.None;
+
+// Enable calculated padding (adds one interval to min and max)
+chart.PrimaryXAxis.RangePaddingType = ChartAxisRangePaddingType.Calculate;
+{% endhighlight %}
+
+{% highlight vb %}
+'Disable automatic range padding
+chart.PrimaryXAxis.RangePaddingType = ChartAxisRangePaddingType.None
+
+'Enable calculated padding (adds one interval to min and max)
+chart.PrimaryXAxis.RangePaddingType = ChartAxisRangePaddingType.Calculate
+{% endhighlight %}
+
+{% endtabs %}
+
+### Example Outputs
+
+- The following screenshot shows the axis with `RangePaddingType = None`.
+
+![Chart Axes](Chart-Axes_images/Chart-Axes_img46.png)
+
+- The following screenshot shows the axis with `RangePaddingType = Calculate` (interval added to extremes).
+
+![Chart Axes](Chart-Axes_images/Chart-Axes_img47.png)

WindowsForms/chart/Axis/Grid-Lines.md

@@ -0,0 +1,115 @@
+---
+layout: post
+title: Chart Grid Lines in Windows Forms Chart control | Syncfusion
+description: Learn about Chart Grid Lines support in Syncfusion Essential Studio Windows Forms Chart control and more details.
+platform: windowsforms
+control: Chart
+documentation: ug
+---
+
+# Chart Grid Lines in Windows Forms Chart
+
+## Chart Grid Lines
+
+Grid lines are horizontal and vertical lines drawn across the chart area to help users read data values against the axis intervals. The grid lines in the chart can be customized using the following properties.
+
+<table>
+<tr>
+<th>
+ChartAxis Property</th><th>
+Description</th></tr>
+<tr>
+<td>
+
+{{'[DrawGrid](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_DrawGrid)'| markdownify }}
+</td><td>
+Specifies whether to draw the grid lines for the axis.</td></tr>
+<tr>
+<td>
+{{'[GridLineType.ForeColor](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.LineInfo.html#Syncfusion_Windows_Forms_Chart_LineInfo_ForeColor)'| markdownify }}
+</td><td>
+Sets the foreground color of the grid line.</td></tr>
+<tr>
+<td>
+{{'[GridLineType.BackColor](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.LineInfo.html#Syncfusion_Windows_Forms_Chart_LineInfo_BackColor)'| markdownify }}
+</td><td>
+Sets the background color of the grid line.</td></tr>
+<tr>
+<td>
+{{'[GridLineType.DashStyle](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.LineInfo.html#Syncfusion_Windows_Forms_Chart_LineInfo_DashStyle)'| markdownify }}
+</td><td>
+Sets the dash style used to draw the grid line.</td></tr>
+<tr>
+<td>
+{{'[GridLineType.PenType](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.LineInfo.html#Syncfusion_Windows_Forms_Chart_LineInfo_PenType)'| markdownify }}
+</td><td>
+Sets the pen type used to draw the grid line.</td></tr>
+<tr>
+<td>
+{{'[GridLineType.Width](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.LineInfo.html#Syncfusion_Windows_Forms_Chart_LineInfo_Width)'| markdownify }}
+</td><td>
+Sets the thickness of the grid line.</td></tr>
+</table>
+
+![Chart Axes](Chart-Axes_images/Chart-Axes_img31.jpeg)
+
+The following code snippet illustrates how to enable and customize grid lines on both axes.
+
+{% tabs %}
+
+{% highlight c# %}
+
+//Customizing x-axis grid lines.
+
+this.chartControl1.PrimaryXAxis.DrawGrid = true;
+
+this.chartControl1.PrimaryXAxis.GridLineType.BackColor = System.Drawing.Color.Transparent;
+
+this.chartControl1.PrimaryXAxis.GridLineType.DashStyle = System.Drawing.Drawing2D.DashStyle.DashDotDot;
+
+this.chartControl1.PrimaryXAxis.GridLineType.ForeColor = System.Drawing.Color.DarkBlue;
+
+this.chartControl1.PrimaryXAxis.GridLineType.Width = 2F;
+
+//Customizing y-axis grid lines.
+
+this.chartControl1.PrimaryYAxis.DrawGrid = true;
+
+this.chartControl1.PrimaryYAxis.GridLineType.BackColor = System.Drawing.Color.OliveDrab;
+
+this.chartControl1.PrimaryYAxis.GridLineType.ForeColor = System.Drawing.Color.DarkOrange;
+
+this.chartControl1.PrimaryYAxis.GridLineType.PenType = System.Drawing.Drawing2D.PenType.LinearGradient;
+
+this.chartControl1.PrimaryYAxis.GridLineType.Width = 2F;
+
+{% endhighlight %}
+
+{% highlight vb %}
+
+'Customizing x-axis grid lines.
+
+Me.chartControl1.PrimaryXAxis.DrawGrid = True
+
+Me.chartControl1.PrimaryXAxis.GridLineType.BackColor = System.Drawing.Color.Transparent
+
+Me.chartControl1.PrimaryXAxis.GridLineType.DashStyle = System.Drawing.Drawing2D.DashStyle.DashDotDot
+
+Me.chartControl1.PrimaryXAxis.GridLineType.ForeColor = System.Drawing.Color.DarkBlue
+
+Me.chartControl1.PrimaryXAxis.GridLineType.Width = 2F
+
+'Customizing y-axis grid lines.
+
+Me.chartControl1.PrimaryYAxis.DrawGrid = True
+
+Me.chartControl1.PrimaryYAxis.GridLineType.BackColor = System.Drawing.Color.OliveDrab
+
+Me.chartControl1.PrimaryYAxis.GridLineType.ForeColor = System.Drawing.Color.DarkOrange
+
+Me.chartControl1.PrimaryYAxis.GridLineType.PenType = System.Drawing.Drawing2D.PenType.LinearGradient
+
+Me.chartControl1.PrimaryYAxis.GridLineType.Width = 2F
+
+{% endhighlight %}
+{% endtabs %}

WindowsForms/chart/Axis/Multiple-Axes.md

@@ -0,0 +1,9 @@
+---
+layout: post
+title: Multiple Axes in Windows Forms Chart control | Syncfusion
+description: Learn about Multiple Axes support in Syncfusion Essential Studio Windows Forms Chart control and more details.
+platform: windowsforms
+control: Chart
+documentation: ug
+---
+

WindowsForms/chart/Axis/Overview.md

@@ -0,0 +1,46 @@
+---
+layout: post
+title: Chart Axes in Windows Forms Chart control | Syncfusion
+description: Learn about Chart Axes support in Syncfusion Essential Studio® Windows Forms Chart control and more details.
+platform: windowsforms
+control: Chart
+documentation: ug
+---
+
+# Chart Axes in Windows Forms Chart
+
+An axis in Essential® Chart is represented by the [ChartAxis](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html) class. All axes are stored in the [WinForms Chart](https://www.syncfusion.com/winforms-ui-controls/chart) control's **Axes** collection.
+
+By default, the **Axes** collection includes two primary axes:
+
+- **[PrimaryXAxis](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartControl.html#Syncfusion_Windows_Forms_Chart_ChartControl_PrimaryXAxis)** – Rendered horizontally, typically at the bottom of the chart.
+- **[PrimaryYAxis](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartControl.html#Syncfusion_Windows_Forms_Chart_ChartControl_PrimaryYAxis)** – Rendered vertically, typically on the left side of the chart.
+
+N> In a Bar chart, the positions of the X and Y axes are reversed — the X-axis appears vertically and the Y-axis appears horizontally.
+
+These primary axes can be accessed directly through the `PrimaryXAxis` and `PrimaryYAxis` properties of the Chart control.
+
+## Supported Axis Value Types
+
+Each axis in the WinForms Chart control supports the following value types. You can set the value type for an axis using [Axes.ValueType](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_ValueType) property.
+
+| Value Type | Description |
+|---|---|
+| **Category** | Displays text-based labels instead of numeric values. Typically used for the X-axis to represent discrete categories. |
+| **Double** | The default value type. Displays standard numeric (floating-point) values. |
+| **DateTime** | Displays date and time values along the axis, with support for various interval types such as days, months, and years. |
+| **Logarithmic** | Displays data on a logarithmic scale. Useful for datasets with a wide range of values. Requires setting the `LogBase` property. |
+| **Custom** | Allows custom label rendering using user-defined values. |
+
+## Key Features
+
+- **Multiple axis types** – Supports Category, Double, DateTime, Logarithmic, and Custom axis value types to accommodate a wide range of data formats.
+- **Axis customization** – Customize the axis line style, tick marks (major and minor), grid lines, and label appearance including font, color, rotation, and format.
+- **Custom range and intervals** – Define custom minimum, maximum, and interval values for precise control over axis scale, or let the built-in range engine calculate them automatically.
+- **Custom origin** – Set a custom origin point for any axis to control where the axis baseline begins.
+- **Range padding** – Configure padding between the data points and the axis boundaries for better visual spacing.
+- **Multiple axes** – Add secondary X and Y axes to display multiple series with independent scales within the same chart area.
+- **Opposed and inverted axes** – Render axes on the opposite side of their default position, or invert the axis direction for specialized chart layouts.
+- **Strip lines** – Add horizontal or vertical bands to highlight specific regions or ranges within the chart area.
+- **Grouping labels** – Group a range of adjacent axis labels under a single custom label for better readability.
+- **Axis title** – Set and style a title for each axis with options for font, color, rotation angle, and drawing mode (wrap or ellipsis).