From 97d447b5e8c7140387e338f7d1773257985a8bb6 Mon Sep 17 00:00:00 2001 From: Priyadharshini-Sf4862 Date: Thu, 5 Mar 2026 13:09:50 +0530 Subject: [PATCH 1/3] Overview page added --- WindowsForms/chart/Axis/Overview.md | 46 + WindowsForms/chart/Chart-Axes.md | 2933 --------------------------- 2 files changed, 46 insertions(+), 2933 deletions(-) create mode 100644 WindowsForms/chart/Axis/Overview.md delete mode 100644 WindowsForms/chart/Chart-Axes.md diff --git a/WindowsForms/chart/Axis/Overview.md b/WindowsForms/chart/Axis/Overview.md new file mode 100644 index 000000000..b4b4c974e --- /dev/null +++ b/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). \ No newline at end of file diff --git a/WindowsForms/chart/Chart-Axes.md b/WindowsForms/chart/Chart-Axes.md deleted file mode 100644 index 701d4f1bf..000000000 --- a/WindowsForms/chart/Chart-Axes.md +++ /dev/null @@ -1,2933 +0,0 @@ ---- -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. The axes are stored in the [WinForms Chart](https://www.syncfusion.com/winforms-ui-controls/chart) control's Axes collection. - -By default, this collection contains two primary axes. These two axes can also be accessed through the [PrimaryXAxis](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartControl.html#Syncfusion_Windows_Forms_Chart_ChartControl_PrimaryXAxis) and [PrimaryYAxis](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartControl.html#Syncfusion_Windows_Forms_Chart_ChartControl_PrimaryYAxis). - -The [PrimaryXAxis](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartControl.html#Syncfusion_Windows_Forms_Chart_ChartControl_PrimaryXAxis) is usually rendered at the bottom, horizontally, while the [PrimaryYAxis](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartControl.html#Syncfusion_Windows_Forms_Chart_ChartControl_PrimaryYAxis) is usually rendered at the left, vertically. There might be exceptions to this rule as in the case of a Bar chart where the above x and y axis positions are reversed. - -The title for an axis is set through the [Title](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_Title) property, and the [TitleAlignment](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_TitleAlignment) property lets you align the same. - -Axes features are discussed under the following topics: - -## Categorical Axis - -Categorical axis displays text instead of number as labels i.e. labels are not linear in categorical axis. To use the categorical axis, you can set the **ValueType** property of the **PrimaryXAxis** to **Category**. Default value of **ValueType** property is **Double**. - -N> Categorical axis is supported only for x-axis. - -You can set x-axis to display categorical values using the following code - -{% tabs %} -{% highlight c# %} - -//Set axis type as Category -this.chartControl1.PrimaryXAxis.ValueType = ChartValueType.Category; - -{% endhighlight %} - -{% highlight vb %} - -'Set axis type as Category -Me.chartControl1.PrimaryXAxis.ValueType = ChartValueType.Category - -{% endhighlight %} -{% endtabs %} - -**Chart displaying categorical values in x-axis** - -![Chart Axes](Chart-Axes_images/Chart-Axes_img39.png) - -## Indexed X Values - -By default points in a series are plotted against their x and y values. However in some cases the x values are meaningless, they simply represent categories, and you do not want to plot the points against such x values. Such an x-axis that ignores the x-values and simply uses the positional value of a point in a series is said to be indexed. - -In the figure below, the first chart shows a line chart that is not-indexed while the second chart shows a line chart whose x-axis is indexed. - -![Chart Axes](Chart-Axes_images/Chart-Axes_img1.jpeg) - -![Chart Axes](Chart-Axes_images/Chart-Axes_img2.jpeg) - -N> Indexing is supported only on the x-axis in Essential® Chart. - -You can enable x-axis indexing or categorizing through the [Indexed](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartControl.html#Syncfusion_Windows_Forms_Chart_ChartControl_Indexed) property of the [ChartControl](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartControl.html) as shown below. This property automatically affects all the x-axes in the chart. - -{% tabs %} -{% highlight c# %} - -this.chartControl1.Indexed = true; - -{% endhighlight %} - -{% highlight vb %} - -Me.chartControl1.Indexed = True - -{% endhighlight %} -{% endtabs %} - -You can also optionally customize the labels of the points in such an indexed series as explained in [Chart Labels Customization](#customizing-label-text). - -## Inverted Axis - -Essential® Chart provides support for inverting the values in an axis. Data on an inverted axis is plotted in the opposite direction - top to bottom for y-axis and right to left for x-axis. To enable this behavior, set the [ChartAxis.Inversed](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_Inversed) to true. - - - - - - -
-Chart Axis Property -Description
- -{{'[Inversed](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_Inversed)'| markdownify }} - -Indicates whether the axis should be reversed.
- -{% tabs %} - -{% highlight c# %} - -// This inverts the specified chart axis. - -this.chartControl1.PrimaryXAxis.Inversed = true; - -this.chartControl1.PrimaryYAxis.Inversed = true; - -{% endhighlight %} - -{% highlight vb %} - -' This inverts the specified chart axis. - -Me.chartControl1.PrimaryXAxis.Inversed = True - -Me.chartControl1.PrimaryYAxis.Inversed = True - -{% endhighlight %} -{% endtabs %} - -The following image shows a chart whose x and y axes have been reversed. - -![Chart Axes](Chart-Axes_images/Chart-Axes_img4.jpeg) - -## Opposed Axis - -For every chart type, there is an implied x-axis and y-axis position and by default all the x-axes and y-axes will be rendered in that corresponding position. You can override this default behavior by setting the [OpposedPosition](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_OpposedPosition) property to true for an axis which will cause it to be rendered in a side opposite to that of the implied position. - -{% tabs %} - -{% highlight c# %} - -// Will cause the X axis to be rendered on top instead of the default bottom position - -this.chartControl1.PrimaryXAxis.OpposedPosition = true; - -// Will cause the Y axis to be rendered on the right instead of the default left position - -this.chartControl1.PrimaryYAxis.OpposedPosition = true; - -{% endhighlight %} - -{% highlight vb %} - -' Will cause the X axis to be rendered on top instead of the default bottom position - -Me.chartControl1.PrimaryXAxis.OpposedPosition = True - -' Will cause the Y axis to be rendered on the right instead of the default left position - -Me.chartControl1.PrimaryYAxis.OpposedPosition = True - -{% endhighlight %} -{% endtabs %} - -The above code snippet will place both the x and y-axes in the position opposite to their default implied position. - -![Chart Axes](Chart-Axes_images/Chart-Axes_img5.jpeg) - -You can similarly set this property on any custom ChartAxis that you might add to the chart. - -The [OpposedPosition](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_OpposedPosition) along with [Inversed](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_Inversed) setting could be useful for implementing charts for right-to-left cultures. - -## Multiple Axes - -Often you will have to plot multiple series on a single chart, each in it's own x or y axis. You will then need to add an x or y axis to the chart in addition to the already existing [PrimaryXAxis](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartControl.html#Syncfusion_Windows_Forms_Chart_ChartControl_PrimaryXAxis) and [PrimaryYAxis](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartControl.html#Syncfusion_Windows_Forms_Chart_ChartControl_PrimaryYAxis). You can do this by instantiating a [ChartAxis](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html) and adding it to the Axes collection. Then specify the newly created axis as the x or y axis of a particular series. - -The following are the steps to include a new axis to the chart. - -{% tabs %} - -{% highlight c# %} - -// Create a new instance of the chart axis. - -private ChartAxis secXAxis = new ChartAxis(); - -// Add the secondary axis to the chart axis collection. - -this.chartControl1.Axes.Add(this.secXAxis); - -// Specify this axis to be the axis for an existing series - -this.chartControl1.Series[1].XAxis = this.secXAxis; - -{% endhighlight %} - -{% highlight vb %} - -' Create a new instance of the chart axis. - -Private secXAxis As ChartAxis = New ChartAxis() - -' Add the secondary axis to the chart axis collection. - -Me.chartControl1.Axes.Add(Me.secXAxis) - -' Specify this axis to be the axis for an existing series - -Me.chartControl1.Series(1).XAxis = Me.secXAxis - -{% endhighlight %} -{% endtabs %} - -![Chart Axes](Chart-Axes_images/Chart-Axes_img6.jpeg) - -And for multiple y axis, you can set the orientation for axis. - -The following are the steps to include a new y axis to the chart. - -{% tabs %} - -{% highlight c# %} - -// Create a new instance of the chart axis. - -private ChartAxis secYAxis = new ChartAxis(); - -// Change orientation to the axis - -secYAxis.Orientation = ChartOrientation.Vertical; - -// Add the secondary axis to the chart axis collection. - -this.chartControl1.Axes.Add(this.secYAxis); - -// Specify this axis to be the axis for an existing series - -this.chartControl1.Series[1].YAxis = this.secYAxis; - -{% endhighlight %} - -{% highlight vb %} - -' Create a new instance of the chart axis. - -Private secYAxis As ChartAxis = New ChartAxis() - -'Change orientation to the axis - -Me.secYAxis.Orientation = ChartOrientation.Vertical - -' Add the secondary axis to the chart axis collection. - -Me.chartControl1.Axes.Add(Me.secYAxis) - -' Specify this axis to be the axis for an existing series - -Me.chartControl1.Series(1).YAxis = Me.secYAxis - -{% endhighlight %} -{% endtabs %} - -![Chart Axes](Chart-Axes_images/Chart-Axes_img6_1.jpg) - -### Opposed Position - -By default, this additional axis will be rendered right next to the corresponding primary axis as seen above. This might be undesirable and you would instead want it to be rendered at the opposite side of the primary axis. This is done by setting the [OpposedPosition](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_OpposedPosition) property to true. - -![Chart Axes](Chart-Axes_images/Chart-Axes_img7.jpeg) - -### Stacked or SideBySide Position - -By default, the secondary axes are rendered stacked over, or parallel, to the corresponding primary axis. And also sometimes it is rendered in a position opposite to the primary axis as shown in the above screenshots. This is because the [XAxisLayoutMode](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartArea.html#Syncfusion_Windows_Forms_Chart_ChartArea_XAxesLayoutMode) and [YAxisLayoutMode](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartArea.html#Syncfusion_Windows_Forms_Chart_ChartArea_YAxesLayoutMode) properties are set to Stacking by default. - -However, you might want the secondary axis to be rendered in-line, side-by-side to the primary axis. You can do by setting the [XAxisLayoutMode](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartArea.html#Syncfusion_Windows_Forms_Chart_ChartArea_XAxesLayoutMode) and [YAxisLayoutMode](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartArea.html#Syncfusion_Windows_Forms_Chart_ChartArea_YAxesLayoutMode) properties to SideBySide. - -Here is a code sample. - -{% tabs %} - -{% highlight c# %} - -this.ChartControl1.ChartArea.XAxesLayoutMode = ChartAxesLayoutMode.SideBySide; - -{% endhighlight %} - -{% highlight vb %} - -Me.ChartControl1.ChartArea.XAxesLayoutMode = ChartAxesLayoutMode.SideBySide; - -{% endhighlight %} -{% endtabs %} - -![Chart Axes](Chart-Axes_images/Chart-Axes_img8.jpeg) - -### ChartAxesLayouts - -You can now combine the stacking and side-by-side chart axes layouts when multiple Axes are used, as shown in the below image. Using this feature, it is possible to position the three Y axis, as one on right side and the second one on the same side and third one on the opposite side. - -![Chart Axes](Chart-Axes_images/Chart-Axes_img9.jpeg) - -{% tabs %} - -{% highlight c# %} - -//Created chart axes: - -ChartAxis axis = this.chartControl1.PrimaryYAxis; - -ChartAxis axis0 = new ChartAxis(ChartOrientation.Vertical); - -ChartAxis axis1 = new ChartAxis(ChartOrientation.Vertical); - -//Added chart axes into the chart: - -chartControl1.Axes.Add(axis0); - -chartControl1.Axes.Add(axis1); - -//Created chart axis layout using ChartAxisLayout class:(New class) - -ChartAxisLayout layout1 = new ChartAxisLayout(); - -//Added the axes to this layout including the primary axis: - -layout1.Axes.Add(axis); - -layout1.Axes.Add(axis0); - -layout1.Axes.Add(axis1); - -//Added the layout into ChartArea. - -chartControl1.ChartArea.YLayouts.Add(layout1); - -{% endhighlight %} - -{% highlight vb %} - -'Created chart axes: - -Dim axis As ChartAxis = Me.chartControl1.PrimaryYAxis - -Dim axis0 As New ChartAxis(ChartOrientation.Vertical) - -Dim axis1 As New ChartAxis(ChartOrientation.Vertical) - -'Added chart axes into the chart: - -chartControl1.Axes.Add(axis0) - -chartControl1.Axes.Add(axis1) - -'Created chart axis layout using ChartAxisLayout class:(New class) - -Dim layout1 As New ChartAxisLayout() - -'Added the axes to this layout including the primary axis: - -layout1.Axes.Add(axis) - -layout1.Axes.Add(axis0) - -layout1.Axes.Add(axis1) - -'Added the layout into ChartArea. - -chartControl1.ChartArea.YLayouts.Add(layout1) - -{% endhighlight %} -{% endtabs %} - -N> All the axes with the same orientation must be added to [ChartAxisLayout](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxisLayout.html) (PrimaryAxis as well) as illustrated in the above code snippet. - -## Axis Value Type - -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. You can set any of the following value types of which the default is double. - -* double -* datetime -* logarithmic - -If you set the ValueType to **Logarithmic**, then you need to specify the log base for the axis using [Axes.LogBase](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_LogBase) property. The default value of **LogBase is 10**. - -{% tabs %} - -{% highlight c# %} - -this.chartControl1.PrimaryXAxis.ValueType = ChartValueType.Logarithmic; - -this.chartControl1.PrimaryXAxis.LogBase = 3; - -{% endhighlight %} -{% endtabs %} - -## Axis Range and Intervals - -### Automatic Range Calculation - -The range and intervals for an axis are automatically calculated by the built-in **nice range calculation engine**, by default. This engine takes a raw data series and comes up with a nice human readable range of numbers in which to represent them. For example, if the data series contains points in the range 1.2 - 3.7, the engine would come up with a scale of 0 - 5 for the axis with 10 intervals of 0.5 each. - -This default behavior is controlled by the [ChartAxis.RangeType](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_RangeType) property which is set to Auto by default. - -### Specifying Custom Ranges - -Sometimes the automatic range generation might not be good enough for you, in which case you can specify a custom range on the axis. You should start by setting the [ChartAxis.RangeType](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_RangeType) property to set. Then use one of the following properties to specify a custom range. - -**Properties** - - - - - - - - -
-ChartAxis Property -Applies to RangeType -Applies to ValueType -Description
- -{{'[Range](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_Range)'| markdownify }} - -Set -Double -Specifies the minimum, maximum and interval for the axis. Use this if the data points are of double type.
-{{'[DateTimeRange](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_DateTimeRange)'| markdownify }} - -Set -DateTime -Specifies the start and end dates and interval time for the axis. Use this if the data points are of datetime type.
- -Here is some sample code that shows how this is done. - -{% tabs %} - -{% highlight c# %} - -// Customize the X axis range and interval which has points of type DateTime - -this.chartControl1.PrimaryXAxis.RangeType = ChartAxisRangeType.Set; - -this.chartControl1.PrimaryXAxis.ValueType = ChartValueType.DateTime; - -this.chartControl1.PrimaryXAxis.DateTimeRange = new ChartDateTimeRange(baseDate.AddMonths(-1), baseDate.AddMonths(6), 1, ChartDateTimeIntervalType.Months); - -// Customize the Y axis range and interval which has points of type double - -this.chartControl1.PrimaryYAxis.RangeType = ChartAxisRangeType.Set; - -this.chartControl1.PrimaryYAxis.Range = new MinMaxInfo(1, 20, 2); - -// Customize the Y axis range and interval which has points of type double - -this.chartControl1.PrimaryXAxis.RangeType = ChartAxisRangeType.Set; - -this.chartControl1.PrimaryXAxis.Range = new MinMaxInfo(0, 6, 1); - -{% endhighlight %} - -{% highlight vb %} - -' Customize the X axis range and interval which has points of type DateTime - -Me.chartControl1.PrimaryXAxis.RangeType = ChartAxisRangeType.Set - -Me.chartControl1.PrimaryXAxis.ValueType = ChartValueType.DateTime - -Me.chartControl1.PrimaryXAxis.DateTimeRange = New ChartDateTimeRange(baseDate.AddMonths(-1), baseDate.AddMonths(6), 1, ChartDateTimeIntervalType.Months) - -' Customize the Y axis range and interval which has points of type double - -Me.chartControl1.PrimaryYAxis.RangeType = ChartAxisRangeType.Set - -Me.chartControl1.PrimaryYAxis.Range = New MinMaxInfo(1, 20, 2) - -' Customize the x axis range and interval which has points of type double - -Me.chartControl1.PrimaryXAxis.RangeType = ChartAxisRangeType.Set - -Me.chartControl1.PrimaryXAxis.Range = New MinMaxInfo(0, 6, 1) - -{% endhighlight %} -{% endtabs %} - -You can however tweak the ranges and intervals that get generated through these properties. - -### Changing Intervals - -Use these properties to customize the intervals that get generated: - -**Properties** - - - - - - - - -
-ChartAxis Property -Applies to RangeType -Applies to ValueType -Description
- -{{'[DesiredIntervals](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_DesiredIntervals)'| markdownify }} - -Auto -Double, DateTime -A request for the nice-range calculation engine to come up with a nice range with so many intervals. The engine will only use this setting as a guidance. Default value is 6.
-{{'[IntervalType](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_IntervalType)'| markdownify }} - -Auto -DateTime -Specifies whether the interval that gets calculated should be in Years, Months, Weeks, Days, Hours, Minutes, Seconds or Milliseconds. This setting is used only if the ValueType of the axis is set to DateTime. Default value is Auto.
- -### Changing Origin - -Use these properties to customize the origin of the axes: - - - - - - - - - - - - - - - - - - - - - - - - -
-ChartAxis Property -Applies to RangeType -Applies to ValueType -Description
- -{{'[PreferZero](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_PreferZero)'| markdownify }} - -Auto -Double -Indicates whether one boundary of the calculated range should be tweaked to zero. Such tweaking will happen only if zero is within a reasonable distance from the calculated boundary. To ensure that one boundary is always zero, use the ForceZero setting instead. Default value is true.
-{{'[ForceZero](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_ForceZero)'| markdownify }} - -Auto -Double -Indicates whether one boundary of the calculated range should always be tweaked to zero. Default value is true.
-{{'[CustomOrigin](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_CustomOrigin)'| markdownify }} - -Auto and Set -Double, DateTime -Lets you use the properties Origin and OriginDate below. Default value is false.
-{{'[Origin](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_Origin)'| markdownify }} - -Auto and Set -Double -Lets you specify a custom origin (double value) for the axis. Use this property when the data points are of double type. The interval and range will then be calculated automatically. Remember to set CustomOrigin to true. Default value is 0.0.
-{{'[OriginDate](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_OriginDate)'| markdownify }} - -Auto and Set -DateTime -Lets you specify a custom origin (double value) for the axis. Use this property when the data points are of double type. The interval and range will then be calculated automatically. Remember to set CustomOrigin to true. Default value is DateTime.MinValue.
-{{'[Offset](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_Offset)'| markdownify }} - -Auto and Set -Double and DateTime -Specifies the offset that should be applied to the automatically calculated start of the range.
-{{'[DateTimeOffset](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_DateTimeOffset)'| markdownify }} - -Auto -DateTime -Specifies the offset that should be applied to the automatically calculated start of the range.
-{{'[Offset](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_Offset)'| markdownify }} - -Set -DateTime -Use this instead of Offset if you want to specify the OffsetType (see below).
-{{'[DateTimeInterval.OffsetType](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartDateTimeInterval.html#Syncfusion_Windows_Forms_Chart_ChartDateTimeInterval_OffsetType)'| markdownify }} - -Set -DateTime -Specifies the type of offset specified above. Could be Auto, Years, Months, Weeks, Days, Hours, Minutes, Seconds or Milliseconds.
-{{'[RangePaddingType](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_RangePaddingType)'| markdownify }} - -Auto -Double and DateTime -Specifies if there should be any padding applied between the points and the axes, before and after the datapoints.
- -## Axis Dimensions - -The axis starting point, length and the whole rectangle (comprising the axis and it's labels) can be customized using the following properties. - - - - - - - - - - - - - - -
-ChartAxis Property -Description
- -{{'[Location](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_Location)'| markdownify }} - -Specifies the starting location of the axis. LocationType property should be equal to Set to set the Location property.
-{{'[LocationType](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_LocationType)'| markdownify }} - -
  • Set - To be able to use the above Location property.
  • Auto - Axis position will be automatically calculated to prevent overlap with the labels. (Default value)
  • AntiLabelCut - Axis thickness is calculated and the corresponding axis will be placed automatically, to prevent cutting of the labels by the sides of the control. Doing this preserves one co-ordinate of the axis location (X coordinate for horizontal axis and y coordinate for vertical axis).
-
-{{'[AutoSize](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_AutoSize)'| markdownify }} -		 -Specifies whether length of an axis is calculated automatically or specified via the Size property.
-{{'[Size](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_Size)'| markdownify }} - -Lets you specify the length of the axis. Uses the x value for x-axis and y-value for y-axis. Increasing or decreasing the default length will cause the intervals to expand or shrink correspondingly. The AutoSize should be set to false for this property to be used.
-{{'[Rect](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_Rect)'| markdownify }} - -Specifies the rectangle that includes the axis and it's labels. This provides great flexibility in letting you customize the position and size of the axes.
- -### Illustrating Custom Axis Location - -![Chart Axes](Chart-Axes_images/Chart-Axes_img11.jpeg) - -{% tabs %} - -{% highlight c# %} - -this.chartControl1.PrimaryYAxis.LocationType = Syncfusion.Windows.Forms.Chart.ChartAxisLocationType.Set; - -this.chartControl1.PrimaryYAxis.Location = new PointF(15, 200); - -{% endhighlight %} - -{% highlight vb %} - -Me.ChartControl1.PrimaryYAxis.LocationType = Syncfusion.Windows.Forms.Chart.ChartAxisLocationType.Set - -Me.ChartControl1.PrimaryYAxis.Location = New PointF(15, 200) - -{% endhighlight %} -{% endtabs %} - -### Illustrating Custom Axis Size - -![Chart Axes](Chart-Axes_images/Chart-Axes_img12.jpeg) - -![Chart Axes](Chart-Axes_images/Chart-Axes_img13.jpeg) - -{% tabs %} - -{% highlight c# %} - -this.chartControl1.PrimaryXAxis.AutoSize = false; - -this.chartControl1.PrimaryXAxis.Size = new Size(50, 20); - -{% endhighlight %} - -{% highlight vb %} - -Me.ChartControl1.PrimaryXAxis.AutoSize = False - -Me.ChartControl1.PrimaryXAxis.Size = New Size(50, 20) - -{% endhighlight %} -{% endtabs %} - -## Axis Labels - -This section talks about the customization of axis labels in the following topics. - -### Axis Label Text Formatting, Appearance and Positioning - -By default, the label texts are automatically determined based on the axis data points and the generated intervals. - -If you want to hide the axis label, you can set the [IsVisible](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_IsVisible) property to `false` in chart [PrimaryXAxis](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartControl.html#Syncfusion_Windows_Forms_Chart_ChartControl_PrimaryXAxis) and [PrimaryYAxis](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartControl.html#Syncfusion_Windows_Forms_Chart_ChartControl_PrimaryYAxis). - -You can better the format, look and positioning of the labels using the properties listed below. - - - - - - - - - - - - - - - - - - - - -
-ChartAxis Property -Description
- -{{'[Format](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_Format)'| markdownify }} - -If the data points are double values then use this property to specify the format in which to render the double value. The specified format will be used in the Double.ToString method to arrive at the formatted string. Search MSDN documentation for Standard Numeric Format Strings for more information on the format strings.
-{{'[DateTimeFormat](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_DateTimeFormat)'| markdownify }} - -If the data points are DateTime values, then use this property to specify the format in which to render the date. The specified format will be used in the DateTime.ToString() method to arrive at the formatted string. Search MSDN documentation for Date and Time Format Strings for more information on the format strings.
-{{'[ForeColor](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_ForeColor)'| markdownify }} - -Affects the labels and other text colors that gets rendered in the axis.
-{{'[Font](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_Font)'| markdownify }} - -Specifies the font to use for label and other texts that get rendered in the axis. By default it is set to Trebuchet, 9, regular.
-{{'[ScaleLabels](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_ScaleLabels)'| markdownify }} - -Setting this to true will automatically resize the text if the chart size is expanded by the user.
-{{'[LabelAlignment](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_LabelAlignment)'| markdownify }} - -Specifies if the label should be rendered Near, Far or Center within the available area. Default is Center.
-{{'[LabelRotate](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_LabelRotate)'| markdownify }} - -Specifies whether or not labels should be rotated. Use the LabelRotateAngle to specify the angle.
-{{'[LabelRotateAngle](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_LabelRotateAngle)'| markdownify }} - -If LabelRotate is true, this property specifies the angle of rotation.
- -![Chart Axes](Chart-Axes_images/Chart-Axes_img14.jpeg) - -{% tabs %} - -{% highlight c# %} - -//Settings datetime format to X axis - -this.chartControl1.PrimaryXAxis.DateTimeFormat = "MMM"; - -//Settings format to Y axis - -this.chartControl1.PrimaryYAxis.ValueType = ChartValueType.Double; - -this.chartControl1.PrimaryYAxis.Format = "C"; - -//setting ForeColor and Font to axes labels - -this.chartControl1.PrimaryXAxis.ForeColor = System.Drawing.Color.Navy; - -this.chartControl1.PrimaryXAxis.Font = new System.Drawing.Font("Arial", 9F, System.Drawing.FontStyle.Bold); - -this.chartControl1.PrimaryYAxis.ForeColor = System.Drawing.Color.Navy; - -this.chartControl1.PrimaryYAxis.Font = new System.Drawing.Font("Arial", 9F, System.Drawing.FontStyle.Bold); - -//Label property settings for X-Axis - -this.chartControl1.PrimaryXAxis.LabelAlignment = System.Drawing.StringAlignment.Center; - -this.chartControl1.PrimaryXAxis.LabelRotate = true; - -this.chartControl1.PrimaryXAxis.LabelRotateAngle = 45; - -//Label property settings for Y-Axis - -this.chartControl1.PrimaryYAxis.LabelAlignment = System.Drawing.StringAlignment.Far; - -{% endhighlight %} - -{% highlight vb %} - -'Settings datetime format to X axis - -Me.chartControl1.PrimaryXAxis.DateTimeFormat = "MMM" - -Settings format to Y axis - -Me.chartControl1.PrimaryYAxis.ValueType = ChartValueType.Double - -Me.chartControl1.PrimaryYAxis.Format = "D" - -'Setting ForeColor and Font to axes labels - -Me.chartControl1.PrimaryXAxis.ForeColor = System.Drawing.Color.Navy - -Me.chartControl1.PrimaryXAxis.Font = new System.Drawing.Font("Arial", 9F, System.Drawing.FontStyle.Bold) - -Me.chartControl1.PrimaryYAxis.ForeColor = System.Drawing.Color.Navy - -Me.chartControl1.PrimaryYAxis.Font = new System.Drawing.Font("Arial", 9F, System.Drawing.FontStyle.Bold) - -'Label property settings for X-Axis - -Me.chartControl1.PrimaryXAxis.LabelAlignment = System.Drawing.StringAlignment.Center - -Me.chartControl1.PrimaryXAxis.LabelRotate = true - -Me.chartControl1.PrimaryXAxis.LabelRotateAngle = 45 - -'Label property settings for Y-Axis - -Me.chartControl1.PrimaryYAxis.LabelAlignment = System.Drawing.StringAlignment.Far - -{% endhighlight %} -{% endtabs %} - -### Customizing Label Text - -The formatting options above will usually satisfy the label text requirements. However, there are many other scenarios where this might not be sufficient. Here are some ways to customize the text rendered in the label. - -Customizing the label text for the automatically generated intervals. - - - - - - -
-ChartAxis Event -Description
- -{{'[FormatAxis](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_FormatLabel)'| markdownify }} - -The event that gets raised for each label before getting rendered. This is a good place to customize the label text.
- -The following [ChartFormatAxisLabelEventArgs](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartFormatAxisLabelEventArgs.html) properties provide information specific to this event. - - - - - - - - - - - - - - - - - - -
-ChartFormatAxisLabel Property -Description
- -{{'[AxisOrientation](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartFormatAxisLabelEventArgs.html#Syncfusion_Windows_Forms_Chart_ChartFormatAxisLabelEventArgs_AxisOrientation)'| markdownify }} - -Returns the orientation of the axis for which the label is being generated.
-{{'[Handled](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartFormatAxisLabelEventArgs.html#Syncfusion_Windows_Forms_Chart_ChartFormatAxisLabelEventArgs_Handled)'| markdownify }} - -Indicates whether this event was handled and no further processing is required from the chart.
-{{'[IsAxisPrimary](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartFormatAxisLabelEventArgs.html#Syncfusion_Windows_Forms_Chart_ChartFormatAxisLabelEventArgs_IsAxisPrimary)'| markdownify }} - -Indicates whether the axis for which the label is being generated is a primary axis.
-{{'[Label](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartFormatAxisLabelEventArgs.html#Syncfusion_Windows_Forms_Chart_ChartFormatAxisLabelEventArgs_Label)'| markdownify }} - -Gets / sets the label that is to be rendered.
-{{'[Value](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartFormatAxisLabelEventArgs.html#Syncfusion_Windows_Forms_Chart_ChartFormatAxisLabelEventArgs_Value)'| markdownify }} - -Returns the value associated with the position of the label.
-{{'[ValueAsDate](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartFormatAxisLabelEventArgs.html#Syncfusion_Windows_Forms_Chart_ChartFormatAxisLabelEventArgs_ValueAsDate)'| markdownify }} - -Returns the value associated with the position of the label as DateTime.
-{{'[Tooltip](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartFormatAxisLabelEventArgs.html#Syncfusion_Windows_Forms_Chart_ChartFormatAxisLabelEventArgs_ToolTip)'| markdownify }} - -Specifies the content of the tooltip.
- -{% tabs %} - -{% highlight c# %} - -private void chartControl1_ChartFormatAxisLabel(object sender, ChartFormatAxisLabelEventArgs e) - -{ - - if (e.AxisOrientation == ChartOrientation.Horizontal) - - { - - if (e.ValueAsDate.Month == 1) - - e.Label = "1st Month"; - - else if (e.ValueAsDate.Month == 2) - - e.Label = "2nd Month"; - - else if (e.ValueAsDate.Month == 3) - - e.Label = "3rd Month"; - - else if (e.ValueAsDate.Month == 4) - - e.Label = "4th Month"; - - else if (e.ValueAsDate.Month == 5) - - e.Label = "5th Month"; - - else if (e.ValueAsDate.Month == 6) - - e.Label = "6th Month"; - - e.Handled = true; - - } - -} - -{% endhighlight %} - -{% highlight vb %} - -Private Sub chartControl1_ChartFormatAxisLabel(ByVal sender As Object, ByVal e As ChartFormatAxisLabelEventArgs) - - If e.AxisOrientation = ChartOrientation.Horizontal Then - - If e.ValueAsDate.Month = 1 Then - - e.Label = "1st Month" - - ElseIf e.ValueAsDate.Month = 2 Then - - e.Label = "2nd Month" - - ElseIf e.ValueAsDate.Month = 3 Then - - e.Label = "3rd Month" - - ElseIf e.ValueAsDate.Month = 4 Then - - e.Label = "4th Month" - - ElseIf e.ValueAsDate.Month = 5 Then - - e.Label = "5th Month" - - ElseIf e.ValueAsDate.Month = 6 Then - - e.Label = "6th Month" - - End If - - e.Handled = True - - End If - -End Sub - -{% endhighlight %} -{% endtabs %} - -![Chart Axes](Chart-Axes_images/Chart-Axes_img15.jpeg) - -Specify a set of custom labels thereby dictating the intervals as well - -1.Using Custom Text - -**Custom Text** - - - - - - - - -
- ChartAxis Property - Description
- - {{'[TickLabelsDrawingMode](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_TickLabelsDrawingMode)'| markdownify }} - -
  • AutomaticMode - Labels will be determined by the engine.
  • UserMode - Labels from the Labels collection will be used.
  • BothUserAndAutomaticMode - Both labels from the automatic mode and user mode will be rendered.
  • None - Labels will not be rendered.
- {{'[Labels](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_Labels)'| markdownify }} - - A custom collection that lets you fully customize the labels that gets generated. The TickLabelsDrawingMode should be set to UserMode or BothUserAndAutomaticMode.
- -{% tabs %} - -{% highlight c# %} - -//Setting drawing mode - -this.chartControl1.PrimaryXAxis.TickLabelsDrawingMode = ChartAxisTickLabelDrawingMode.UserMode; - -//Adding new labels - -this.chartControl1.PrimaryXAxis.Labels.Add(new ChartAxisLabel("Q1 Mid Point", Color.OrangeRed, new Font("Arial", 8F, System.Drawing.FontStyle.Bold), new DateTime(2007, 2, 15), "", "", ChartValueType.Custom)); - -this.chartControl1.PrimaryXAxis.Labels.Add(new ChartAxisLabel("Q2 Mid Point", Color.OrangeRed, new Font("Arial", 8F, System.Drawing.FontStyle.Bold), new DateTime(2007, 5, 15), "", "", ChartValueType.Custom)); - -{% endhighlight %} - -{% highlight vb %} - -'Setting drawing mode - -Me.chartControl1.PrimaryXAxis.TickLabelsDrawingMode = ChartAxisTickLabelDrawingMode.UserMode - -'Adding new labels - -Me.chartControl1.PrimaryXAxis.Labels.Add(New ChartAxisLabel("Q1 Mid Point", Color.OrangeRed, New Font("Arial", 8F, System.Drawing.FontStyle.Bold), New DateTime(2007, 2, 15), "", "", ChartValueType.Custom)) - -Me.chartControl1.PrimaryXAxis.Labels.Add(New ChartAxisLabel("Q2 Mid Point", Color.OrangeRed, New Font("Arial", 8F, System.Drawing.FontStyle.Bold), New DateTime(2007, 5, 15), "", "", ChartValueType.Custom)) - -{% endhighlight %} - -{% endtabs %} - -![Chart Axes](Chart-Axes_images/Chart-Axes_img16.jpeg) - -2.Using Formatted Text - -{% tabs %} - -{% highlight c# %} - -//Setting drawing mode - -this.chartControl1.PrimaryXAxis.TickLabelsDrawingMode = ChartAxisTickLabelDrawingMode.UserMode; - -'Adding new labels - -this.chartControl1.PrimaryXAxis.Labels.Add(new ChartAxisLabel("", Color.Maroon, new Font("Arial", 9F, System.Drawing.FontStyle.Bold), new DateTime(2007, 2, 15), "", "M", ChartValueType.DateTime)); - -this.chartControl1.PrimaryXAxis.Labels.Add(new ChartAxisLabel("", Color.Maroon, new Font("Arial", 9F, System.Drawing.FontStyle.Bold), new DateTime(2007, 05, 15), "", "M", ChartValueType.DateTime)); - -{% endhighlight %} - -{% highlight vb %} - -'Setting drawing mode - -Me.chartControl1.PrimaryXAxis.TickLabelsDrawingMode = ChartAxisTickLabelDrawingMode.UserMode - -'Clearing all the default labels - -this.chartControl1.PrimaryXAxis.Labels.Clear() - -'Adding new labels - -Me.chartControl1.PrimaryXAxis.Labels.Add(New ChartAxisLabel("", Color.Maroon, New Font("Arial", 9F, System.Drawing.FontStyle.Bold), New DateTime(2007, 2, 15), "", "M", ChartValueType.DateTime)) - -Me.chartControl1.PrimaryXAxis.Labels.Add(New ChartAxisLabel("", Color.Maroon, New Font("Arial", 9F, System.Drawing.FontStyle.Bold), New DateTime(2007, 05, 15), "", "M", ChartValueType.DateTime)) - -{% endhighlight %} - -{% endtabs %} - -![Chart Axes](Chart-Axes_images/Chart-Axes_img17.jpeg) - -### Intersecting Labels - -Sometimes the chart dimensions could cause the labels to intersect. By default, the chart will render those texts one over the other. But, it also has some built-in capabilities to workaround this overlap and lets you dictate the technique to follow. Refer to the properties below. - -**Intersecting Labels** - - - - - - - - - - -
-ChartAxis Property -Description
- -{{'[LabelIntersectAction](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_LabelIntersectAction)'| markdownify }} - -Specifies the action to take when labels texts intersect.
  • MultipleRows - Will render the labels in multiple rows.
  • None - Do nothing (default value)
  • Rotate - Rotates text so as to avoid overlap
  • Wrap - wraps text.
-
-{{'[EdgeLabelsDrawingMode](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_EdgeLabelsDrawingMode)'| markdownify }} -		 -Affects the labels that get rendered at the edges of the axis. Possible values:
  • Center - Centers the label at the interval. Default setting.
  • Shift - Shifts the labels so that it's within the interval boundaries
  • ClippingProtection - Uses some intelligent logic to avoid clipping.
-
-{{'[HidePartialLabels](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_HidePartialLabels)'| markdownify }} -		 -When this property is set to true and when label overlap occurs, the chart will selectively hide certain labels (usually the min and max labels to begin with) to keep the rest of labels readable. Default value is false.
- -{% tabs %} - -{% highlight c# %} - -this.ChartWebControl1.PrimaryXAxis.HidePartialLabels = true; - -this.ChartWebControl1.PrimaryXAxis.LabelIntersectAction = ChartLabelIntersectAction.Rotate; - -{% endhighlight %} - -{% highlight vb %} - -Me.ChartWebControl1.PrimaryXAxis.HidePartialLabels = True - -Me.ChartWebControl1.PrimaryXAxis.LabelIntersectAction = ChartLabelIntersectAction.Rotate - -{% endhighlight %} -{% endtabs %} - -![Chart Axes](Chart-Axes_images/Chart-Axes_img18.png) - -## Grouping Labels - -Another interesting feature that is available is to be able to group a set of adjoining labels and mark them with a new label. For example, grouping the first three months of the year and marking them as Q1 and so on. The following properties will let you do that. - - - - - - - - -
-ChartAxis Property -Description
- -{{'[GroupingLabels](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_GroupingLabels)'| markdownify }} - -Lets you group a range of default labels and provide them a custom name/label.
- -{{'[DrawTickLabelGrid](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_DrawTickLabelGrid)'| markdownify }} - -Puts the labels within a grid. Though commonly used when in grouping mode, this feature can be used even otherwise.
- -{% tabs %} - -{% highlight c# %} - -ChartAxisGroupingLabel Q1 = new ChartAxisGroupingLabel(new DoubleRange(1, 3), "Q1"); - -Q1.BorderStyle = ChartAxisGroupingLabelBorderStyle.Rectangle; - -Q1.Font = new Font("Arial", 10F, FontStyle.Bold); - -this.chartControl1.PrimaryXAxis.GroupingLabels.Add(Q1); - -ChartAxisGroupingLabel Q2 = new ChartAxisGroupingLabel(new DoubleRange(4, 6), "Q2"); - -Q2.BorderStyle = ChartAxisGroupingLabelBorderStyle.Rectangle; - -Q2.Font = new Font("Arial", 10F, FontStyle.Bold); - -this.chartControl1.PrimaryXAxis.GroupingLabels.Add(Q2); - -this.chartControl1.PrimaryXAxis.DrawTickLabelGrid = true; - -{% endhighlight %} - -{% highlight vb %} - -Dim Q1 As New ChartAxisGroupingLabel(New DoubleRange(1, 3), "Q1") - -Q1.BorderStyle = ChartAxisGroupingLabelBorderStyle.Rectangle - -Q1.Font = New Font("Arial", 10.0F, FontStyle.Bold) - -Me.chartControl1.PrimaryXAxis.GroupingLabels.Add(Q1) - -Dim Q2 As New ChartAxisGroupingLabel(New DoubleRange(4, 6), "Q2") - -Q2.BorderStyle = ChartAxisGroupingLabelBorderStyle.Rectangle - -Q2.Font = New Font("Arial", 10.0F, FontStyle.Bold) - -Me.chartControl1.PrimaryXAxis.GroupingLabels.Add(Q2) - -Me.chartControl1.PrimaryXAxis.DrawTickLabelGrid = True - -{% endhighlight %} -{% endtabs %} - -![Chart Axes](Chart-Axes_images/Chart-Axes_img19.jpeg) - -### Tooltip Support for ChartAxisLabels - -Essential® Chart provides tooltip support for [ChartAxisLabel](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxisLabel.html). By default [ChartAxisLabel](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxisLabel.html) will be displayed as tooltip. You can also customize the tooltip to show any content you want. - -#### Use Case Scenarios - -If a [ChartAxisLabel](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxisLabel.html) is too long and truncated, the tooltip for the label will show the full text. You can also show additional information about the [ChartAxisLabel](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxisLabel.html). - -##### Adding Tooltip for ChartAxisLabel - -To add a tooltip for chart, set the [ShowToolTips](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartControl.html#Syncfusion_Windows_Forms_Chart_ChartControl_ShowToolTips) property to true. By default [ChartAxisLabel](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxisLabel.html) content will be taken as tooltip content. You can also customize the tooltip content using the [FormatLabel](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_FormatLabel) event. - -The following code illustrates how to add a customized tooltip for [ChartAxisLabel](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxisLabel.html): - -{% tabs %} - -{% highlight c# %} - -this.chartControl1.ChartFormatAxisLabel += new ChartFormatAxisLabelEventHandler(chartControl1_ChartFormatAxisLabel); - -ChartSeries series = new ChartSeries("Series"); - -series.Points.Add(0,120); - -series.Points.Add(1,220); - -series.Points.Add(2, 150); - -series.Points.Add(3, 240); - -this.chartControl1.Series.Add(series); - -//Set label text - -arrLabel.Add("India"); - -arrLabel.Add("Pakistan"); - -arrLabel.Add("China"); - -arrLabel.Add("Japan"); - -//Set tooltip content - -arrTooltip.Add("IND"); - -arrTooltip.Add("PAK"); - -arrTooltip.Add("CHN"); - -arrTooltip.Add("JPN"); - -this.chartControl1.ShowToolTips = true; - -this.chartControl1.Series3D = true; - -this.chartControl1.PrimaryYAxis.Title = "Product sold (Millions)"; - -this.chartControl1.PrimaryXAxis.Title = "Country"; - -this.chartControl1.Title.Text = "Product Sales"; - -void chartControl1_ChartFormatAxisLabel(object sender, ChartFormatAxisLabelEventArgs e) - -{ - - int index = (int)e.Value; - - if (e.AxisOrientation == ChartOrientation.Horizontal) - - { - - if (index >= 0 && index < arrLabel.Count) - - { - - e.Label = arrLabel[index].ToString(); - - //Specify arrTooltip content as chartAxisLabel Tooltip - - e.ToolTip = arrTooltip[index].ToString(); - - } - - } - - e.Handled = true; - - } - -{% endhighlight %} - -{% highlight vb %} - -AddHandler chartControl1.ChartFormatAxisLabel, AddressOf chartControl1_ChartFormatAxisLabel - -Dim series As ChartSeries = New ChartSeries("Series") - -series.Points.Add(0,120) - -series.Points.Add(1,220) - -series.Points.Add(2, 150) - -series.Points.Add(3, 240) - -Me.chartControl1.Series.Add(series) - -' Set label text - -arrLabel.Add("India") - -arrLabel.Add("Pakistan") - -arrLabel.Add("China") - -arrLabel.Add("Japan") - -' Set tooltip content - -arrTooltip.Add("IND") - -arrTooltip.Add("PAK") - -arrTooltip.Add("CHN") - -arrTooltip.Add("JPN") - -Me.chartControl1.ShowToolTips = True - -Me.chartControl1.Series3D = True - -Me.chartControl1.PrimaryYAxis.Title = "Product sold (Millions)" - -Me.chartControl1.PrimaryXAxis.Title = "Country" - -Me.chartControl1.Title.Text = "Product Sales" - -Private Sub chartControl1_ChartFormatAxisLabel(ByVal sender As Object, ByVal e As ChartFormatAxisLabelEventArgs) - -Dim index As Integer = CInt(Fix(e.Value)) - -If e.AxisOrientation = ChartOrientation.Horizontal Then - -If index >= 0 AndAlso index < arrLabel.Count Then - -e.Label = arrLabel(index).ToString() - -' Specify arrTooltip content as chartAxisLabel Tooltip - -e.ToolTip = arrTooltip(index).ToString() - -End If - -End If - -e.Handled = True - -End Sub - -{% endhighlight %} -{% endtabs %} - -![Chart Axes](Chart-Axes_images/Chart-Axes_img20.png) - -{% seealso %} - -[Customizing Label Text](https://help.syncfusion.com/windowsforms/chart/chart-axes#customizing-label-text) and [ToolTip](https://help.syncfusion.com/windowsforms/chart/chart-series#tooltip) - -{% endseealso %} - -## Axis Title - -Essential® Chart provides properties to set custom titles for the axes. Set the title text for an axis using [Title](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_Title) property. Customize this text using [TitleColor](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_TitleColor) and [TitleFont](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_TitleFont) properties. - - - - - - - - - - -
-Chart Axis Property -Description
- -{{'[TitleColor](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_TitleColor)'| markdownify }} - -Sets the color for the title text of the axis.
-{{'[TitleFont](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_TitleFont)'| markdownify }} - -Sets the font style for the title text.
-{{'[TitleRotationAngle](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_TitleRotationAngle)'| markdownify }} - -Sets angle to rotate the title text.
- -{% tabs %} - -{% highlight c# %} - -//Sets custom title for x- axis. - -this.chartControl1.PrimaryXAxis.Title = "x-axis"; - -this.chartControl1.PrimaryXAxis.TitleColor = Color.Red; - -this.chartControl1.PrimaryXAxis.TitleFont = new Font("Arial", 10); - -//Set custom title for y-axis in the similar method. - -{% endhighlight %} - -{% highlight vb %} - -'Sets custom title for x- axis. - -Me.chartControl1.PrimaryXAxis.Title = "x-axis" - -Me.chartControl1.PrimaryXAxis.TitleColor = Color.Red - -Me.chartControl1.PrimaryXAxis.TitleFont = New Font("Arial", 10) - -'Set custom title for y-axis in the similar method. - -{% endhighlight %} -{% endtabs %} - -### Rotating Axis Title - -You can now rotate the titles of axes to 0, 90, 180, and 270 degrees using the [TitleRotationAngle](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_TitleRotationAngle) property of [ChartAxis](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html). - -{% tabs %} - -{% highlight c# %} - -//Rotating x-axis title by 270 degrees -this.chartControl1.PrimaryXAxis.TitleRotationAngle = AxisTitleRotationAngle.Rotate270; - -//Rotating y-axis title by 0 degree -this.chartControl1.PrimaryYAxis.TitleRotationAngle = AxisTitleRotationAngle.Rotate0; - -{% endhighlight %} - -{% highlight vb %} - -'Rotating x-axis title by 270 degrees -Me.chartControl1.PrimaryXAxis.TitleRotationAngle = AxisTitleRotationAngle.Rotate270 - -'Rotating y-axis title by 0 degree -Me.chartControl1.PrimaryYAxis.TitleRotationAngle = AxisTitleRotationAngle.Rotate0 - -{% endhighlight %} -{% endtabs %} - -The following screenshot shows how to rotate x-axis title by 270 degrees without rotating y-axis title -![Chart Axes](Chart-Axes_images/Chart-Axes_img41_2.png) - -### Multiline Chart Axes Title - -You can now wrap the axes titles and display them as multiline text. Set multiline title text in [Axis.Title](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_Title) property through designer as follows. Press ENTER key to begin a new line. Press CTRL+ENTER to set the text entered. - -![Chart Axes](Chart-Axes_images/Chart-Axes_img21.jpeg) - -The below screenshot illustrates a chart with multiline axes titles. - -![Chart Axes](Chart-Axes_images/Chart-Axes_img22.jpeg) - -### Drawing Mode of Title Text - -You can now display partial axis title with an ellipsis at the end of text, whose text length exceeds the axis length. There is also an option to wrap the title text, in addition to the multiline axes title feature, which is discussed above. The [Axes.TitleDrawMode](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_TitleDrawMode) property is used to control this behavior. - - - - - - -
-Chart Axis Property -Description
- -{{'[TitleDrawMode](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_TitleDrawMode)'| markdownify }} - -Sets the drawing mode of the axis title. It can be Ellipse, Wrap or None. By default it is set to None.
- -{% tabs %} - -{% highlight c# %} - -//Setting drawing mode of y-axis title - -this.chartControl1.PrimaryXAxis.TitleDrawMode = ChartTitleDrawMode.Ellipsis; - -//Setting drawing mode of secondary y-axis title - -this.secYAxis.TitleDrawMode = ChartTitleDrawMode.Wrap; - -{% endhighlight %} - -{% highlight vb %} - -'Setting drawing mode of y-axis title - -Me.chartControl1.PrimaryXAxis.TitleDrawMode = ChartTitleDrawMode.Ellipsis - -'Setting drawing mode of secondary y-axis title - -Me.secYAxis.TitleDrawMode = ChartTitleDrawMode.Wrap - -{% endhighlight %} -{% endtabs %} - -![Chart Axes](Chart-Axes_images/Chart-Axes_img23.png) - -## Axis Ticks - -### Major Ticks - -Major Ticks are rendered automatically at the intersection of an axis with the interval grid lines. Here are some properties that will let you customize the look and feel, and behavior of the ticks. - - - - - - - - - - - - -
-ChartAxis Property -Description
- -{{'[TickSize](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_TickSize)'| markdownify }} - -Specifies the width and height of the tick rectangle. This is also a good way to hide the ticks. Default is {1, 1}.
-{{'[TickColor](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_TickColor)'| markdownify }} - -Color of the tick mark. Default is System.ControlText.
- -{{'[TickLabelGridPadding](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_TickLabelGridPadding)'| markdownify }} - -The padding between the tick mark in the axis and the label. Default is 5.
-{{'[TickDrawingOperationMode](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_TickLabelsDrawingMode)'| markdownify }} - -Defines the number of ticks to render while zooming.
  • NumberOfIntervalsFixed - When you zoom, the number of visible intervals will be constant. So, as you zoom in, the total number of intervals will increase.
  • IntervalFixed - The number of intervals will be constant. So, as you zoom in, fewer intervals will be visible at a time.
- -![Chart Axes](Chart-Axes_images/Chart-Axes_img24.jpeg) - -{% tabs %} - -{% highlight c# %} - -this.chartControl1.PrimaryXAxis.TickSize = new Size(3,3); - -this.chartControl1.PrimaryXAxis.TickColor = Color.DarkOrange; - -this.chartControl1.PrimaryXAxis.TickLabelGridPadding = 8F; - -{% endhighlight %} - -{% highlight vb %} - -Me.chartControl1.PrimaryXAxis.TickSize = new Size(3,3) - -Me.chartControl1.PrimaryXAxis.TickColor = Color.DarkOrange - -Me.chartControl1.PrimaryXAxis.TickLabelGridPadding = 8F - -{% endhighlight %} -{% endtabs %} - -### Minor Ticks - -Minor ticks are tick marks in between major ticks. These are not rendered by default. Use the properties below to enable and define the frequency of such minor tick marks. - - - - - - - - -
-ChartAxis Property -Description
- -{{'[SmallTicksPerInterval](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_SmallTicksPerInterval)'| markdownify }} - -Specifies if and how many minor ticks, which are tick marks drawn on the axis between intervals, should be drawn.
-{{'[SmallTickSize](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_SmallTickSize)'| markdownify }} - -Specifies the size of the tick rectangle.
- -![Chart Axes](Chart-Axes_images/Chart-Axes_img25.jpeg) - -{% tabs %} - -{% highlight c# %} - -this.chartControl1.PrimaryXAxis.SmallTickSize = new System.Drawing.Size(2, 2); - -this.chartControl1.PrimaryXAxis.SmallTicksPerInterval = 1; - -{% endhighlight %} - -{% highlight vb %} - -this.chartControl1.PrimaryXAxis.SmallTickSize = new System.Drawing.Size(2, 2) - -this.chartControl1.PrimaryXAxis.SmallTicksPerInterval = 1 - -{% endhighlight %} -{% endtabs %} - -## 3-D Related - -Here are some properties that affect the rendering of an axis when in 3-D mode, which is set using the [Series3D](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartControl.html#Syncfusion_Windows_Forms_Chart_ChartControl_Series3D) property. - -**3-D Related** - - - - - - - - - - - - - - - - - - -
-Chart Control Property -Description
- -{{'[Series3D](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartControl.html#Syncfusion_Windows_Forms_Chart_ChartControl_Series3D)'| markdownify }} - -Specifies if the chart should be rendered in 3-D mode.
-{{'[RealMode3D](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartControl.html#Syncfusion_Windows_Forms_Chart_ChartControl_RealMode3D)'| markdownify }} - -Specifies if the chart should be rendered in a 3-D plane.
-{{'[Depth](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartControl.html#Syncfusion_Windows_Forms_Chart_ChartControl_Depth)'| markdownify }} - -Specifies the depth of the axes in the z coordinate. Default value is 50f.
-{{'[Tilt](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartControl.html#Syncfusion_Windows_Forms_Chart_ChartControl_Tilt)'| markdownify }} - -Specifies the tilt angle relative to the y-axis. Default value is 30f.
-{{'[Rotation](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartControl.html#Syncfusion_Windows_Forms_Chart_ChartControl_Rotation)'| markdownify }} - -Specifies the angle of rotation relative to the x-axis. Default value is 30f.
-{{'[ColumnDrawMode](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartControl.html#Syncfusion_Windows_Forms_Chart_ChartControl_ColumnDrawMode)'| markdownify }} - -Specifies the mode of column drawing when in 3-D.
  • PlaneMode - Columns from different series are drawn with the same depth.
  • InDepthMode - Columns from different series are drawn with different depths.
-
-{{'[EnableMouseRotation](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartControl.html#Syncfusion_Windows_Forms_Chart_ChartControl_EnableMouseRotation)'| markdownify }} -		 -Enables rotation of the chart at runtime using middle/right mouse button.
- -### 3D Mode Sample - -{% tabs %} - -{% highlight c# %} - -this.chartControl1.Series3D = true; - -this.chartControl1.Depth = 55F; - -this.chartControl1.Tilt = 55F; - -this.chartControl1.Rotation = 60; - -{% endhighlight %} - -{% highlight vb %} - -Me.chartControl1.Series3D = True - -Me.chartControl1.Depth = 55F - -Me.chartControl1.Tilt = 55F - -Me.chartControl1.Rotation = 60 - -{% endhighlight %} -{% endtabs %} - -![Chart Axes](Chart-Axes_images/Chart-Axes_img26.jpeg) - -### Real 3D Mode sample - -{% tabs %} - -{% highlight c# %} - -this.chartControl1.ChartArea.Series3D = true; - -this.chartControl1.Tilt = 0; - -this.chartControl1.Depth = 150; - -this.chartControl1.Rotation = 10; - -this.chartControl1.RealMode3D = true; - -{% endhighlight %} - -{% highlight vb %} - -Me.chartControl1.ChartArea.Series3D = True - -Me.chartControl1.Tilt = 0 - -Me.chartControl1.Depth = 150 - -Me.chartControl1.Rotation = 10 - -Me.chartControl1.RealMode3D = True - -{% endhighlight %} -{% endtabs %} - -![Chart Axes](Chart-Axes_images/Chart-Axes_img27.jpeg) - -### Rotating Chart - -The end-users can be allowed to rotate the chart at run-time by using the mouse (middle or right mouse button) by setting the [EnableMouseRotation](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartControl.html#Syncfusion_Windows_Forms_Chart_ChartControl_EnableMouseRotation) property to true. - -N> Rotation will not be possible with the LEFT-MOUSE button by enabling this property. - -{% tabs %} - -{% highlight c# %} - -this.chartControl1.RealMode3D = true; - -this.chartControl1.EnableMouseRotation = true; - -{% endhighlight %} - -{% highlight vb %} - -Me.chartControl1.RealMode3D = True - -Me.chartControl1.EnableMouseRotation = True - -{% endhighlight %} -{% endtabs %} - -![Chart Axes](Chart-Axes_images/Chart-Axes_img29.jpeg) - -### Rendering Chart in 3-D Style - -The interior walls of 3-D charts are enhanced with color effects to improve the chart appearance for many 3-D chart types such as column, column range, bar, area, spline area, step area, candle, and histogram. The chart can be rendered in 3-D style using the [Style3D](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartControl.html#Syncfusion_Windows_Forms_Chart_ChartControl_Style3D) property. The following table explains this property. - - - - - - -
-Property -Description
- -{{'[Style3D](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartControl.html#Syncfusion_Windows_Forms_Chart_ChartControl_Style3D)'| markdownify }} - -Specifies whether the chart should be rendered in 3-D style.
- -The following code example shows how to enable rendering the chart in 3-D style. - -{% tabs %} - -{% highlight c# %} - -this.chartControl1.Style3D = true; - -{% endhighlight %} - -{% highlight vb %} - -Me.chartControl1.Style3D=True - -{% endhighlight %} -{% endtabs %} - -![Chart Axes](Chart-Axes_images/Chart-Axes_img30.png) - -## Chart Grid Lines - -The grid lines in the chart that delineates the intervals in the axes can be customized using the following properties. - -**Chart grid lines** - - - - - - - - - - - - - - - - -
-Chart Control Property -Description
- -{{'[DrawGrid](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_DrawGrid)'| markdownify }} - -Specifies whether or not to draw the grid lines.
-{{'[GridLineType.ForeColor](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.LineInfo.html#Syncfusion_Windows_Forms_Chart_LineInfo_ForeColor)'| markdownify }} - -The fore color of the line.
-{{'[GridLineType.BackColor](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.LineInfo.html#Syncfusion_Windows_Forms_Chart_LineInfo_BackColor)'| markdownify }} - -The back color of the line.
-{{'[GridLineType.DashStyle](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.LineInfo.html#Syncfusion_Windows_Forms_Chart_LineInfo_DashStyle)'| markdownify }} - -The DashStyle to use for drawing the line.
-{{'[GridLineType.PenType](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.LineInfo.html#Syncfusion_Windows_Forms_Chart_LineInfo_PenType)'| markdownify }} - -The PenType to use for drawing the line.
-{{'[GridLineType.Width](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.LineInfo.html#Syncfusion_Windows_Forms_Chart_LineInfo_Width)'| markdownify }} - -The thickness of the lines.
- -![Chart Axes](Chart-Axes_images/Chart-Axes_img31.jpeg) - -The following code snippet illustrates how to show the gridlines on both axes and how to customize them. - -{% tabs %} - -{% highlight c# %} - -//Customizing X-Axis Gridlines - -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 Gridlines - -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 Gridlines - -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 Gridlines - -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 %} - -## Chart StripLines - -Strip-lines are bands that are drawn at the background of the chart. They can be used to highlight areas of interest. They can be either vertical or horizontal and may be specified with a variety of options to precisely control where they are placed and how they are repeated. The strip-lines are stored in the [ChartAxis.StripLines](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_StripLines) collection, which holds objects of class [ChartStripLine](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartStripLine.html). - -A strip-line is configurable by setting its start, end, period and width in the same value type as the axis that holds it. The interior of the strip-lines support gradients, images and different text positions and orientations. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-ChartStripline Property -Description
- -{{'[BackgroundImage](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartStripLine.html#Syncfusion_Windows_Forms_Chart_ChartStripLine_BackImage)'| markdownify }} - -Sets the background image for the stripline.
-{{'[DateOffset](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartStripLine.html#Syncfusion_Windows_Forms_Chart_ChartStripLine_DateOffset)'| markdownify }} - -Gets / sets the offset of the stripline if the chart's PrimaryX-axis is of type Datetime and StartAtAxisPosition is true. Also see Offset.
-{{'[Enabled](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartStripLine.html#Syncfusion_Windows_Forms_Chart_ChartStripLine_Enabled)'| markdownify }} - -Enables the Stripline.
-{{'[End](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartStripLine.html#Syncfusion_Windows_Forms_Chart_ChartStripLine_End)'| markdownify }} - -Gets /sets the end range (in double) of the stripline. Use this if the axis range type is Double. Also see EndDate.
-{{'[EndDate](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartStripLine.html#Syncfusion_Windows_Forms_Chart_ChartStripLine_EndDate)'| markdownify }} - -The end date of the stripline. Use this if the axis range type is DateTime. Also see End.
-{{'[Font](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartStripLine.html#Syncfusion_Windows_Forms_Chart_ChartStripLine_Font)'| markdownify }} - -The Font style in the which the stripline text if any will be rendered.
-{{'[FixedWidth](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartStripLine.html#Syncfusion_Windows_Forms_Chart_ChartStripLine_FixedWidth)'| markdownify }} - -Specifies a fixed width for the chart stripline. Normally, the width of the stripline changes when the axis range changes. You can also set the width to be fixed irrespective of the AxisRange, by specifying a width in this property. After setting a fixed width, the stripline width will not vary beyond / less than the value that is set.
-{{'[Interior](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartStripLine.html#Syncfusion_Windows_Forms_Chart_ChartStripLine_Interior)'| markdownify }} - -Interior brush information for the stripline.
-{{'[Offset](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartStripLine.html#Syncfusion_Windows_Forms_Chart_ChartStripLine_Offset)'| markdownify }} - -Gets / sets the offset of the stripline if the chart's PrimaryX-axis is of type Double and StartAtAxisPosition is true. Also see DateOffset.
-{{'[Period](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartStripLine.html#Syncfusion_Windows_Forms_Chart_ChartStripLine_Period)'| markdownify }} - -Gets / sets the period (width of the range) over which the stripline appears.
-{{'[PeriodDate](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartStripLine.html#Syncfusion_Windows_Forms_Chart_ChartStripLine_PeriodDate)'| markdownify }} - -Gets / sets the period (time span) over which the stripline appears if the value is DateTime.
-{{'[Start](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartStripLine.html#Syncfusion_Windows_Forms_Chart_ChartStripLine_Start)'| markdownify }} - -Gets / sets the start of the stripline. Also see End.
-{{'[StartAtAxisPosition](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartStripLine.html#Syncfusion_Windows_Forms_Chart_ChartStripLine_StartAtAxisPosition)'| markdownify }} - -Indicates whether the Stripline will start at the start of the axis range.
-{{'[StartDate](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartStripLine.html#Syncfusion_Windows_Forms_Chart_ChartStripLine_StartDate)'| markdownify }} - -The start date of the stripline.
-{{'[Text](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartStripLine.html#Syncfusion_Windows_Forms_Chart_ChartStripLine_Text)'| markdownify }} - -The text in the stripline.
-{{'[TextAlignment](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartStripLine.html#Syncfusion_Windows_Forms_Chart_ChartStripLine_TextAlignment)'| markdownify }} - -Alignment of the text in the stripline.
-{{'[TextColor](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartStripLine.html#Syncfusion_Windows_Forms_Chart_ChartStripLine_TextColor)'| markdownify }} - -The color of the text in the stripline.
-{{'[Vertical](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartStripLine.html#Syncfusion_Windows_Forms_Chart_ChartStripLine_Vertical)'| markdownify }} - -Indicates whether stripline is rendered vertically.
-{{'[Width](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartStripLine.html#Syncfusion_Windows_Forms_Chart_ChartStripLine_Width)'| markdownify }} - -The width of the stripline.
-{{'[WidthDate](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartStripLine.html#Syncfusion_Windows_Forms_Chart_ChartStripLine_WidthDate)'| markdownify }} - -Gets / sets the width of the stripline in a Time span.
- -The following is the code to draw a stripline from x-axis with DateTime values. - -{% tabs %} - -{% highlight c# %} - -//Declaring - -ChartStripLine stripLine = new ChartStripLine(); - -//Customizing the Stripline - -stripLine.Enabled = true; - -stripLine.Vertical = false; - -stripLine.Start = 140; - -stripLine.Width = 35; - -stripLine.FixedWidth = 30; - -stripLine.End = 175; - -stripLine.Text = "100% of Quota"; - -stripLine.TextColor = Color.Cyan; - -stripLine.TextAlignment = ContentAlignment.MiddleCenter; - -stripLine.Font = new Font("Arial", 10, FontStyle.Bold); - -stripLine.Interior = new BrushInfo(230, new BrushInfo(GradientStyle.Vertical, Color.OrangeRed, Color.DarkKhaki)); - -//Adding stripline to the X-axis - -this.chartControl1.PrimaryYAxis.StripLines.Add(stripLine); - -{% endhighlight %} - -{% highlight vb %} - -'Declaring - -Private stripLine As ChartStripLine = New ChartStripLine() - -'Customizing the Stripline - -stripLine.Enabled = True - -stripLine.Vertical = True - -stripLine.Start = 140 - -stripLine.Width = 35 - -stripLine.FixedWidth = 30 - -stripLine.End = 175 - -stripLine.Text = "100% of Quota" - -stripLine.TextColor = Color.Cyan - -stripLine.TextAlignment = ContentAlignment.MiddleCenter - -stripLine.Font = New Font("Arial",10,FontStyle.Bold) - -stripLine.Interior = New BrushInfo(230, new BrushInfo(GradientStyle.Vertical,Color.OrangeRed, Color.DarkKhaki))) - -'Adding stripline to the X-axis - -Me.chartControl1.PrimaryXAxis.StripLines.Add(stripLine) - -{% endhighlight %} -{% endtabs %} - -![Chart Axes](Chart-Axes_images/Chart-Axes_img32.jpeg) - -Use an image as StripLine by setting through [StripLine.BackImage](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartStripLine.html#Syncfusion_Windows_Forms_Chart_ChartStripLine_BackImage) property. - -![Chart Axes](Chart-Axes_images/Chart-Axes_img33.jpeg) - -## Chart Breaks - -Breaks are very useful if you add points with too large difference in values. To enable breaks, you need to set the [ChartAxis.MakeBreaks](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_MakeBreaks) property to true and set the break mode (ChartAxis.BreakRanges.BreaksMode property). - -There are three possible modes. They are, - -* ChartBreaksMode.None - If this value is set, breaks are not used. -* ChartBreaksMode.Auto - If this mode is enabled, chart will compute the breaks ranges automatically. You can use the ChartAxis.BreakRanges.BreakAmount to set the minimal relative difference between values (default value is 0.1, value range is 0.1). The ratio of empty space should be less than the property value to break the range. This mode has several exclusions. -* ChartBreaksMode.Manual (default) - If this value is set, you can manually set the breaks ranges. To do this, use following methods. -* ChartAxis.BreakRanges.Union – add a new break range. -* ChartAxis.BreakRanges.Exclude – remove the break range. -* ChartAxis.BreakRanges.Clear – remove all break ranges. -* Breaks are computed only for actual y-axis of series. -* Breaks don't work with zooming. -* Breaks don't work with stacking. - -All breaks work only with Cartesian axes. - -![Chart Axes](Chart-Axes_images/Chart-Axes_img34.png) - -{% tabs %} -{% highlight c# %} - -this.chartControl1.PrimaryYAxis.MakeBreaks = true; - -this.chartControl1.PrimaryYAxis.BreakRanges.BreaksMode = ChartBreaksMode.Manual; - -this.chartControl1.PrimaryYAxis.BreakRanges.Union(new DoubleRange(500, 600)); - -this.chartControl1.PrimaryYAxis.BreakRanges.Union(new DoubleRange(950, 3000)); - -this.chartControl1.PrimaryYAxis.BreakInfo.LineType = ChartBreakLineType.Wave; - -this.chartControl1.PrimaryYAxis.BreakInfo.LineSpacing = 5; - -this.chartControl1.PrimaryYAxis.BreakInfo.LineColor = Color.Black; - -this.chartControl1.PrimaryYAxis.BreakInfo.LineWidth = 1; - -this.chartControl1.PrimaryYAxis.BreakInfo.LineStyle = DashStyle.Dot; - -this.chartControl1.PrimaryYAxis.BreakInfo.SpacingColor = Color.White; - -this.chartControl1.PrimaryYAxis.BreakRanges.BreakAmount = 0.5; - -{% endhighlight %} - -{% highlight vb %} - -Me.chartControl1.PrimaryYAxis.MakeBreaks = True - -Me.chartControl1.PrimaryYAxis.BreakRanges.BreaksMode = ChartBreaksMode.Manual - -Me.chartControl1.PrimaryYAxis.BreakRanges.Union(New DoubleRange(500, 600)) - -Me.chartControl1.PrimaryYAxis.BreakRanges.Union(New DoubleRange(950, 3000)) - -Me.chartControl1.PrimaryYAxis.BreakInfo.LineType = ChartBreakLineType.Wave - -Me.chartControl1.PrimaryYAxis.BreakInfo.LineSpacing = 5 - -Me.chartControl1.PrimaryYAxis.BreakInfo.LineColor = Color.Black - -Me.chartControl1.PrimaryYAxis.BreakInfo.LineWidth = 1 - -Me.chartControl1.PrimaryYAxis.BreakInfo.LineStyle = DashStyle.Dot - -Me.chartControl1.PrimaryYAxis.BreakInfo.SpacingColor = Color.White - -Me.chartControl1.PrimaryYAxis.BreakRanges.BreakAmount = 0.5 - -{% endhighlight %} -{% endtabs %} - -![Chart Axes](Chart-Axes_images/Chart-Axes_img35.jpeg) - -## Axis Crossing Support - -Essential® Chart for Windows allows the X and Y axis to intersect at a desired point. The X and Y axis will intersect at a point based on the value specified in the X axis crossing property and the Y axis crossing property respectively. - -### Use Case Scenarios - -This feature will be useful to customize the location of primary axes from default location, when you want to add huge number of negative and positive points in the chart. - -**Properties** - - - - - - -
-Property -Description -Type -Data Type -Reference links
- -{{'[Crossing](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_Crossing)'| markdownify }} - -Specifies the point of intersect for X and Y axis based on the given data point value. -Server side -Double -NA
- -### Sample Link - -To view a sample: - -1. Open the Syncfusion® Dashboard. -2. Click the Windows Forms drop-down list and select Run Locally Installed Samples. -3. Navigate to Chart samples-> Chart Axes -> Axis Crossing. - -### Enable crossing X and Y axis - -To enable crossing X and Y axis, specify the Y axis data point value, where you want the X axis to cross, in the X axisCrossing property. Similarly specify the X axis data point value, where you want the Y axis to cross, in the Y axisCrossing property. The following code illustrates this: - -{% tabs %} - -{% highlight c# %} - -this.chartControl1.PrimaryXAxis.Crossing=150; - -this.chartControl1.PrimaryYAxis.Crossing = 6; - -this.chartControl1.Series3D = true; - -{% endhighlight %} - -{% highlight vb %} - -Me.chartControl1.PrimaryXAxis.Crossing = 150 - -Me.chartControl1.PrimaryYAxis.Crossing = 6 - -Me.chartControl1.Series3D = True - -{% endhighlight %} -{% endtabs %} - -![Chart Axes](Chart-Axes_images/Chart-Axes_img36.png) - -## Axis Label Placement - -This feature enables you to specify the position of the label for an axis. You can place the label either inside or outside the plotted chart area. - -### Use Case Scenarios - -When you have lengthy label for the chart axis, it will occupy more space. So the plotted chart area will get reduced. You can avoid this using this feature. - -**Properties** - - - - - - -
-Property -Description -Type -Data Type
- -{{'[AxisLabelPlacement](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_AxisLabelPlacement)'| markdownify }} - -Specifies the position of the label in a chart axes. It can be placed inside or outside the plotted chart area using {{'[ChartPlacement](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartPlacement.html)'| markdownify }} enum. - NA - NA
- -### Sample Link - -To view a sample: - -1. Open the Syncfusion® Dashboard. -2. Click the User Interface -> Windows Forms. -3. Click Run Samples. -4. Navigate to Chart samples -> Chart Axes -> ChartAxisCustomization. - -### Positioning Axis Label - -You can position the chart axis label using the [Axes.AxisLabelPlacement](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_AxisLabelPlacement) property. You can specify whether the axis label should be placed inside or outside the plotted chart area using the [ChartPlacement](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartPlacement.html) enum. - -The following code illustrates how to place the chart axis label inside the plotted chart area: - -{% tabs %} - -{% highlight c# %} - -this.chartControl1.PrimaryXAxis.AxisLabelPlacement = ChartPlacement.Inside; - -{% endhighlight %} - -{% highlight vb %} - -Me.chartControl1.PrimaryXAxis.AxisLabelPlacement = ChartPlacement.Inside - -{% endhighlight %} -{% endtabs %} - -![Chart Axes](Chart-Axes_images/Chart-Axes_img37.png) - -### Positioning Individual Axis Labels - -Essential® Chart supports customizing the individual axis label position to the right or left side of the axis for a horizontal axis and to the top or bottom for a vertical axis based on the user's needs. - -This feature can be achieved by using the [FormatLabel](/windowsforms/chart/chart-control-events#chartformataxislabel-event) event of the chart axis. The following code illustrates customizing the individual label position by using [AxisLabelPlacement](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_AxisLabelPlacement) in the [FormatLabel](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_FormatLabel) event. - -{% tabs %} - -{% highlight c# %} - -this.chartControl1.PrimaryYAxis.AxisLabelPlacement = ChartPlacement.Inside; - -//Sets the AxisLabelPlacement property in the ChartFormatAxisLabel event. - -private void chartControl1_ChartFormatAxisLabel(object sender, ChartFormatAxisLabelEventArgs e) - - { - - if (e.AxisOrientation == ChartOrientation.Vertical) - - { - - if (e.Label == "1") - - { - - if (series.Points[(int)e.Value - 1].YValues[0] > 0) - - e.AxisLabelPlacement = ChartPlacement.Outside; - - e.Label = "Canada"; - - } - - else if (e.Label == "2") - - { - - if (series.Points[(int)e.Value - 1].YValues[0] > 0) - - e.AxisLabelPlacement = ChartPlacement.Outside; - - e.Label = "France"; - - } - - else if (e.Label == "3") - - { - - if (series.Points[(int)e.Value - 1].YValues[0] > 0) - - e.AxisLabelPlacement = ChartPlacement.Outside; - - e.Label = "Japan"; - - } - - else if (e.Label == "4") - - { - - if (series.Points[(int)e.Value - 1].YValues[0] > 0) - - e.AxisLabelPlacement = ChartPlacement.Outside; - - e.Label = "Britain"; - - } - - else if (e.Label == "5") - - { - - if (series.Points[(int)e.Value - 1].YValues[0] > 0) - - e.AxisLabelPlacement = ChartPlacement.Outside; - - e.Label = "United States"; - - } - - e.Handled = true; - - } - - } - -{% endhighlight %} - -{% highlight vb %} - -Me.chartControl1.PrimaryYAxis.AxisLabelPlacement = ChartPlacement.Inside - -'Sets the AxisLabelPlacement property in ChartFormatAxisLabel event. - -this.chartControl1.PrimaryYAxis.AxisLabelPlacement = ChartPlacement.Inside; - -Private Sub chartControl1_ChartFormatAxisLabel(ByVal sender As Object, ByVal e As ChartFormatAxisLabelEventArgs) - - If e.AxisOrientation = ChartOrientation.Vertical Then - - If e.Label = "1" Then - - If series.Points(CInt(Fix(e.Value)) - 1).YValues(0) > 0 Then - - e.AxisLabelPlacement = ChartPlacement.Outside - - End If - - e.Label = "Canada" - - ElseIf e.Label = "2" Then - - If series.Points(CInt(Fix(e.Value)) - 1).YValues(0) > 0 Then - - e.AxisLabelPlacement = ChartPlacement.Outside - - End If - - e.Label = "France" - - ElseIf e.Label = "3" Then - - If series.Points(CInt(Fix(e.Value)) - 1).YValues(0) > 0 Then - - e.AxisLabelPlacement = ChartPlacement.Outside - - End If - - e.Label = "Japan" - - ElseIf e.Label = "4" Then - - If series.Points(CInt(Fix(e.Value)) - 1).YValues(0) > 0 Then - - e.AxisLabelPlacement = ChartPlacement.Outside - - End If - - e.Label = "Britain" - - ElseIf e.Label = "5" Then - - If series.Points(CInt(Fix(e.Value)) - 1).YValues(0) > 0 Then - - e.AxisLabelPlacement = ChartPlacement.Outside - - End If - - e.Label = "United States" - - End If - - e.Handled = True - - End If - - End Sub - -{% endhighlight %} -{% endtabs %} - -The following screenshot illustrates the customization options for individual label positions on the y-axis to the right or left side based on the y value of the data points. If the export value is positive, the label is rendered to the left side of the axis, and if it is negative, the label is rendered on the right side of the axis. - -![Chart Axes](Chart-Axes_images/Chart-Axes_img38.png) - -## ZoomFactor and ZoomPosition - -Axes are scaled using zoomFactor. The position of a zoomed axis is specified by zoomPosition. Both values fall between 0 and 1. When zoomFactor is set to 0.5, the chart is scaled by 200% along with this axis. - -{% tabs %} - -{% highlight c# %} - -//Set zoomFactor and zoomPosition for axis -this.chart.PrimaryXAxis.ZoomFactor = 0.5; -this.chart.PrimaryXAxis.ZoomPosition = 0.5; - -{% endhighlight %} - -{% highlight vb %} - -//Set zoomFactor and zoomPosition for axis -Me.chart.PrimaryXAxis.ZoomFactor = 0.5; -Me.chart.PrimaryXAxis.ZoomPosition = 0.5; - -{% endhighlight %} -{% endtabs %} - -For example, when zoomFactor and zoomPosition are set to 0.5 for the chart with 6 data points, the last 3 data points in the chart will be shown. Here, the zoomFactor decides the number of points and zoomPosition decides the range of values to display. - -The following screenshot illustrates a chart whose x-axis has been zoomed by setting zoomFactor and zoomPosition. - -![Chart Axes](Chart-Axes_images/Chart-Axes_img40.png) - -## Exclude Invisible Series Range - -The data in the hidden series influencing auto range for both x and y axis can be prevented by setting ExcludeInvisibleSeriesRange property to true to the corresponding axis. - -{% tabs %} - -{% highlight c# %} - -//Set ExcludeInvisibleSeriesRange for axis -this.chart.PrimaryXAxis.ExcludeInvisibleSeriesRange = true; -this.chart.PrimaryYAxis.ExcludeInvisibleSeriesRange = true; - -{% endhighlight %} - -{% highlight vb %} - -//Set ExcludeInvisibleSeriesRange for axis -Me.chart.PrimaryXAxis.ExcludeInvisibleSeriesRange = true; -Me.chart.PrimaryYAxis.ExcludeInvisibleSeriesRange = true; - -{% endhighlight %} -{% endtabs %} - -For example, when hidden the any of the series and set the ExcludeInvisibleSeriesRange as true for corresponding axis, then the axis range will not include the hidden series while calculation ranges for that axis. - -The following screenshot illustrates a chart whose x-axis and y-axis range exclude the invisible series by setting ExcludeInvisibleSeriesRange as true for corresponding axis. - -![Chart Axes](Chart-Axes_images/Chart-Axes_img41.png) - -## RoundingPlaces in Axis - -Default rounding value for the axis label is 2. If you want to change the rounding value for the axis labels, you can set rounding values in RoundingPlaces property. - -{% tabs %} - -{% highlight c# %} - -//Set RoundingPlaces for axis -this.chartControl1.PrimaryYAxis.RoundingPlaces = 3; - -{% endhighlight %} - -{% highlight vb %} - -//Set RoundingPlaces for axis -Me.chartControl1.PrimaryYAxis.RoundingPlaces = 3; - -{% endhighlight %} -{% endtabs %} - -The following screenshot illustrates a chart whose y-axis labels rendered with three decimal places. - -![Chart Axes](Chart-Axes_images/Chart-Axes_img42.png) - -## Custom Labels Parameter - -In axis labels, labels can be placed based on the CustomLabelsParameter property. - -* Index -* Position. - -Default value for CustomLabelsParameter is Index. By setting the CustomLabelsParameter as Position ,you can bind the custom x names properly in chart. And additionally don’t need to specify the OBJECTID “XName” for SeriesModel but alternatively you should specify the OBJECTID for “PositionName” property. - -{% tabs %} - -{% highlight c# %} - -//Set CustomLabelsParameter for axis -series.SeriesModel = new ChartDataBindModel(ShowCompleteInformation, "test1") -{ - YNames = new string[] { "YValue" }, -}; - -chart.Series.Add(series); -ChartDataBindAxisLabelModel xAxisLabelModel = new ChartDataBindAxisLabelModel(Data, "test1"); -xAxisLabelModel.LabelName = "XValue"; -xAxisLabelModel.PositionName = "ID"; -chart.PrimaryXAxis.LabelsImpl = xAxisLabelModel; -chart.PrimaryXAxis.CustomLabelsParameter = ChartCustomLabelsParameter.Position; - -{% endhighlight %} - -{% highlight vb %} - -//Set CustomLabelsParameter for axis -series.SeriesModel = new ChartDataBindModel(ShowCompleteInformation, "test1") -{ - YNames = new string[] { "YValue" }, -}; - -chart.Series.Add(series); -ChartDataBindAxisLabelModel xAxisLabelModel = new ChartDataBindAxisLabelModel(Data, "test1"); -xAxisLabelModel.LabelName = "XValue"; -xAxisLabelModel.PositionName = "ID"; -chart.PrimaryXAxis.LabelsImpl = xAxisLabelModel; -chart.PrimaryXAxis.CustomLabelsParameter = ChartCustomLabelsParameter.Position; - -{% endhighlight %} -{% endtabs %} - -The following screenshot illustrates a chart whose x-axis labels rendered with CustomLabelsParameter as position. - -![Chart Axes](Chart-Axes_images/Chart-Axes_img43.png) - -## ChartAxisEdgeLabelsDrawingMode - -Labels with long text at the edges of an axis may appear partially in the chart. To avoid this, use the `EdgeLabelsDrawingMode` property in axis, which moves the label inside the chart area for better appearance or shows the clipped labels. - -Chart provides the following there modes to edge label drawing mode in axis labels: - -* Center -* Shift. -* ClippingProtection. - -The default value of the `EdgeLabelsDrawingMode` property is Center. By setting this property to Shift, the edge labels will be placed inside the charts. While setting the `EdgeLabelDrawingMode` to ClippingProtection, the partially hidden labels will be visible. - -{% tabs %} - -{% highlight c# %} - -chart.PrimaryXAxis.EdgeLabelsDrawingMode = ChartAxisEdgeLabelsDrawingMode.Shift; - -{% endhighlight %} - -{% highlight vb %} - -chart.PrimaryXAxis.EdgeLabelsDrawingMode = ChartAxisEdgeLabelsDrawingMode.Shift; - -{% endhighlight %} -{% endtabs %} - -The following screenshot illustrates the chart whose x-axis labels are rendered with EdgeLabelsDrawingMode as Shift. - -![Chart Axes](Chart-Axes_images/Chart-Axes_img44.png) - -## PointOffset in axis - -`PointOffset` is used to leave space between axis and the first point drawn in the chart. - -{% tabs %} - -{% highlight c# %} - -chart.PrimaryXAxis.PointOffset = 0.1; - -{% endhighlight %} - -{% highlight vb %} - -chart.PrimaryXAxis.PointOffset = 0.1; - -{% endhighlight %} -{% endtabs %} - -For example, when you set PointOffset to 1, chart will leave one interval space between axis and the first point. - -The following screenshot illustrates the chart whose x-axis labels are rendered with PointOffset as 1. - -![Chart Axes](Chart-Axes_images/Chart-Axes_img45.png) - -## RangePaddingTypes - -Padding can be applied to the minimum and maximum extremes of an axis range using the `RangePaddingType` property. The types of range padding are, - -* None -* Calculate - -**None** - -When the range padding type is set to None, padding can be applied to the minimum and maximum extremes of an axis range based on data. - -{% tabs %} - -{% highlight c# %} - -chart.PrimaryXAxis.RangePaddingType = ChartAxisRangePaddingType.None; - -{% endhighlight %} - -{% highlight vb %} - -chart.PrimaryXAxis.RangePaddingType = ChartAxisRangePaddingType.None; - -{% endhighlight %} -{% endtabs %} - -![Chart Axes](Chart-Axes_images/Chart-Axes_img46.png) - -**Calculate** - -When the range padding type is set to Calculate, interval of an axis will be added to the minimum and maximum of the axis range. - -{% tabs %} - -{% highlight c# %} - -chart.PrimaryXAxis.RangePaddingType = ChartAxisRangePaddingType.Calculate; - -{% endhighlight %} - -{% highlight vb %} - -chart.PrimaryXAxis.RangePaddingType = ChartAxisRangePaddingType.Calculate; - -{% endhighlight %} -{% endtabs %} - -![Chart Axes](Chart-Axes_images/Chart-Axes_img47.png) - -## Axis line type - -The axis line can be customized using the `LineType` property in axis option. The `LineType` property has the following options to customize the axis lines: `ForeColor`, `DashStyle`, `Width` and `BackColor`. - -**ForeColor** - -You can change the axis line color 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** - -You can change the axis line width 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** - -You can change the axis line dash style using the `DashStyle` property. The `DashStyle` property has the following six dash styles: - -* 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 using the `HatchFill` or `LinearGradient` pen type, one more color is needed for axis line. You can use either `ForeColor` or `BackColor` 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) - -### Axis Gridline LineType - -The axis grid lines can be customized using the `LineType` property in axis option. The `LineType` property has the following options to customize the axis grid lines: `ForeColor`, `DashStyle`, `Width` and `BackColor`. - -**ForeColor** - -You can change the axis grid line color 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_img51.jpeg) - -**Width** - -You can change the axis grid line width using the `Width` property. - -{% tabs %} - -{% highlight c# %} - -chart.PrimaryXAxis.GridLineType.Width = 4; - -{% endhighlight %} - -{% highlight vb %} - -chart.PrimaryXAxis.GridLineType.Width = 4; - -{% endhighlight %} -{% endtabs %} - -![Chart Axes](Chart-Axes_images/Chart-Axes_img53.jpeg) - -**DashStyle** - -You can change the axis grid line dash style using the `DashStyle` property. The `DashStyle` property has the following six options: - -* Solid -* Dash -* Dot -* DashDot -* DashDotDot -* Custom - -{% tabs %} - -{% highlight c# %} - -chart.PrimaryXAxis.GridLineType.DashStyle = System.Drawing.Drawing2D.DashStyle.DashDotDot; - -{% endhighlight %} - -{% highlight vb %} - -chart.PrimaryXAxis.GridLineType.DashStyle = System.Drawing.Drawing2D.DashStyle.DashDotDot; - -{% endhighlight %} -{% endtabs %} - -![Chart Axes](Chart-Axes_images/Chart-Axes_img52.jpeg) - -**BackColor** - -When using the `HatchFill` or `LinearGradient` pen type, one more color is needed for axis line. You can use either `ForeColor` or `BackColor` 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_img55.jpeg) - -### Axis GetVisibleValue - -The `GetVisibleValue` property of axis gets values on chart area by specifying chart coordinate -value. - -{% tabs %} - -{% highlight c# %} - -chart.MouseMove += new System.Windows.Forms.MouseEventHandler(this.Chart_ChartRegionMouseMove); - -private void Chart_ChartRegionMouseMove(object sender, MouseEventArgs e) - { - Point mousePoint = new Point(e.X, e.Y); - ChartPoint point = chart.ChartArea.GetValueByPoint(new Point(e.X, e.Y)); - Point pt = chart.ChartArea.GetPointByValue(point); - string text = null; - text = "Result of method GetVisibleValue : {" + chart.PrimaryXAxis.GetVisibleValue(point.X) + "," + chart.PrimaryYAxis.GetVisibleValue(point.YValues[0]) + "}"; - toolTip1.SetToolTip(chart, text); - } - -{% endhighlight %} - -{% highlight vb %} - -chart.MouseMove += New System.Windows.Forms.MouseEventHandler(AddressOf Me.Chart_ChartRegionMouseMove); - -Private Sub Chart_ChartRegionMouseMove(ByVal sender As Object, ByVal e As MouseEventArgs) - Dim mousePoint As Point = New Point(e.X, e.Y) - Dim point As ChartPoint = chart.ChartArea.GetValueByPoint(New Point(e.X, e.Y)) - Dim pt As Point = chart.ChartArea.GetPointByValue(point) - Dim text As String = Nothing - text = "Result of method GetVisibleValue : {" & chart.PrimaryXAxis.GetVisibleValue(point.X) & "," + chart.PrimaryYAxis.GetVisibleValue(point.YValues(0)) & "}" - toolTip1.SetToolTip(chart, text) - End Sub - -{% endhighlight %} -{% endtabs %} - -![Chart Axes](Chart-Axes_images/Chart-Axes_img56.jpeg) From 4c116d97079fcb39a2bbeccbc4b84e336bcb9a63 Mon Sep 17 00:00:00 2001 From: Priyadharshini-Sf4862 Date: Thu, 5 Mar 2026 13:50:20 +0530 Subject: [PATCH 2/3] Chart types content improved --- WindowsForms/chart/Axis/Types.md | 398 +++++++++++++++++++++++++++++++ 1 file changed, 398 insertions(+) create mode 100644 WindowsForms/chart/Axis/Types.md diff --git a/WindowsForms/chart/Axis/Types.md b/WindowsForms/chart/Axis/Types.md new file mode 100644 index 000000000..8b723c668 --- /dev/null +++ b/WindowsForms/chart/Axis/Types.md @@ -0,0 +1,398 @@ +--- +layout: post +title: Types of Axis in Windows Forms Chart control | Syncfusion +description: Learn about the different types of chart axis supported in Syncfusion Essential Studio Windows Forms Chart control. +platform: windowsforms +control: Chart +documentation: ug +--- + +# Types of Axis in Windows Forms Chart + +The Windows Forms Chart control supports the following types of chart axis, configurable via the [ValueType](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_ValueType) property of [ChartAxis](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html): + +* Double +* Category +* DateTime +* Logarithmic +* Custom + +## Double Axis + +[Double](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartValueType.html) is the default value type for both X and Y axes. It is used to plot standard numerical (floating-point) values on the chart. + +{% tabs %} +{% highlight c# %} + +this.chartControl1.PrimaryXAxis.ValueType = ChartValueType.Double; +this.chartControl1.PrimaryYAxis.ValueType = ChartValueType.Double; + +{% endhighlight %} + +{% highlight vb %} + +Me.chartControl1.PrimaryXAxis.ValueType = ChartValueType.Double +Me.chartControl1.PrimaryYAxis.ValueType = ChartValueType.Double + +{% endhighlight %} +{% endtabs %} + +### Interval + +The axis interval can be customized using the [DesiredIntervals](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_DesiredIntervals) property. By default, the interval is automatically calculated based on the minimum and maximum values of the provided data. + +{% tabs %} +{% highlight c# %} + +this.chartControl1.PrimaryYAxis.DesiredIntervals = 5; + +{% endhighlight %} + +{% highlight vb %} + +Me.chartControl1.PrimaryYAxis.DesiredIntervals = 5 + +{% endhighlight %} +{% endtabs %} + +### Customizing the Range + +The [Range](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_Range) property is used to set the minimum, maximum, and interval of the axis range. Set [RangeType](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_RangeType) to Set to apply a custom range. + +N> If only the minimum or maximum is specified, the other value is calculated automatically. + +{% tabs %} +{% highlight c# %} + +this.chartControl1.PrimaryYAxis.RangeType = ChartAxisRangeType.Set; +this.chartControl1.PrimaryYAxis.Range = new MinMaxInfo(0, 500, 50); + +{% endhighlight %} + +{% highlight vb %} + +Me.chartControl1.PrimaryYAxis.RangeType = ChartAxisRangeType.Set +Me.chartControl1.PrimaryYAxis.Range = New MinMaxInfo(0, 500, 50) + +{% endhighlight %} +{% endtabs %} + +## Category Axis + +The Category axis displays text-based labels instead of numeric values. It is an index-based axis where data points are plotted at equal intervals. To use the category axis, set the [ValueType](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_ValueType) property to Category. + +N> Category axis is supported only for the X-axis. + +{% tabs %} +{% highlight c# %} + +this.chartControl1.PrimaryXAxis.ValueType = ChartValueType.Category; + +{% endhighlight %} + +{% highlight vb %} + +Me.chartControl1.PrimaryXAxis.ValueType = ChartValueType.Category + +{% endhighlight %} +{% endtabs %} + +![Category axis in Windows Forms Chart](Chart-Axes_images/Chart-Axes_img39.png) + +### Indexed X Values + +By default points in a series are plotted against their x and y values. However in some cases the x values are meaningless, they simply represent categories, and you do not want to plot the points against such x values. Such an x-axis that ignores the x-values and simply uses the positional value of a point in a series is said to be indexed. Enable this using the [Indexed](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartControl.html#Syncfusion_Windows_Forms_Chart_ChartControl_Indexed) property. + +In the figure below, the first chart shows a line chart that is not-indexed while the second chart shows a line chart whose x-axis is indexed. + +![Chart Axes](Chart-Axes_images/Chart-Axes_img1.jpeg) + +![Chart Axes](Chart-Axes_images/Chart-Axes_img2.jpeg) + +N> Indexing is supported only on the X-axis. + +{% tabs %} +{% highlight c# %} + +this.chartControl1.Indexed = true; + +{% endhighlight %} + +{% highlight vb %} + +Me.chartControl1.Indexed = True + +{% endhighlight %} +{% endtabs %} + +### Interval + +By default, the category axis labels are displayed with a fixed interval of 1. This can be customized using the [DesiredIntervals](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_DesiredIntervals) property. + +{% tabs %} +{% highlight c# %} + +this.chartControl1.PrimaryXAxis.DesiredIntervals = 2; + +{% endhighlight %} + +{% highlight vb %} + +Me.chartControl1.PrimaryXAxis.DesiredIntervals = 2 + +{% endhighlight %} +{% endtabs %} + +## DateTime Axis + +The DateTime axis is used to plot DateTime values along the axis. It is widely used in financial and time-series charts. Set the [ValueType](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_ValueType) property to `DateTime` to enable this axis. + +{% tabs %} +{% highlight c# %} + +this.chartControl1.PrimaryXAxis.ValueType = ChartValueType.DateTime; +this.chartControl1.PrimaryXAxis.DateTimeFormat = "MMM-yy"; + +{% endhighlight %} + +{% highlight vb %} + +Me.chartControl1.PrimaryXAxis.ValueType = ChartValueType.DateTime +Me.chartControl1.PrimaryXAxis.DateTimeFormat = "MMM-yy" + +{% endhighlight %} +{% endtabs %} + +### Interval + +In the DateTime axis, the interval can be customized using the [DesiredIntervals](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_DesiredIntervals) and [IntervalType](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_IntervalType) properties. For example, setting DesiredIntervals to 6 and IntervalType to Months will use 6 months as the interval. + +{% tabs %} +{% highlight c# %} + +this.chartControl1.PrimaryXAxis.ValueType = ChartValueType.DateTime; +this.chartControl1.PrimaryXAxis.IntervalType = ChartDateTimeIntervalType.Months; +this.chartControl1.PrimaryXAxis.DesiredIntervals = 6; + +{% endhighlight %} + +{% highlight vb %} + +Me.chartControl1.PrimaryXAxis.ValueType = ChartValueType.DateTime +Me.chartControl1.PrimaryXAxis.IntervalType = ChartDateTimeIntervalType.Months +Me.chartControl1.PrimaryXAxis.DesiredIntervals = 6 + +{% endhighlight %} +{% endtabs %} + +### Customizing the Range + +The [DateTimeRange](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_DateTimeRange) property is used to set the minimum and maximum date-time values for the axis range. Set [RangeType](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_RangeType) to `Set` to apply a custom range. + +{% tabs %} +{% highlight c# %} + +this.chartControl1.PrimaryXAxis.RangeType = ChartAxisRangeType.Set; +this.chartControl1.PrimaryXAxis.ValueType = ChartValueType.DateTime; +this.chartControl1.PrimaryXAxis.DateTimeRange = new ChartDateTimeRange( + new DateTime(2024, 1, 1), new DateTime(2024, 12, 31), 1, ChartDateTimeIntervalType.Months); + +{% endhighlight %} + +{% highlight vb %} + +Me.chartControl1.PrimaryXAxis.RangeType = ChartAxisRangeType.Set +Me.chartControl1.PrimaryXAxis.ValueType = ChartValueType.DateTime +Me.chartControl1.PrimaryXAxis.DateTimeRange = New ChartDateTimeRange( + New DateTime(2024, 1, 1), New DateTime(2024, 12, 31), 1, ChartDateTimeIntervalType.Months) + +{% endhighlight %} +{% endtabs %} + +## Logarithmic Axis + +The Logarithmic axis uses a logarithmic scale and is ideal for visualizing data with large value differences. It can be applied to both X and Y axes. Set the [ValueType](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_ValueType) property to Logarithmic to enable this axis. + +{% tabs %} +{% highlight c# %} + +this.chartControl1.PrimaryYAxis.ValueType = ChartValueType.Logarithmic; + +{% endhighlight %} + +{% highlight vb %} + +Me.chartControl1.PrimaryYAxis.ValueType = ChartValueType.Logarithmic + +{% endhighlight %} +{% endtabs %} + +### Interval + +The axis interval can be customized using the [DesiredIntervals](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_DesiredIntervals) property. By default, the interval is calculated based on the minimum and maximum values of the provided data. + +{% tabs %} +{% highlight c# %} + +this.chartControl1.PrimaryYAxis.ValueType = ChartValueType.Logarithmic; +this.chartControl1.PrimaryYAxis.DesiredIntervals = 5; + +{% endhighlight %} + +{% highlight vb %} + +Me.chartControl1.PrimaryYAxis.ValueType = ChartValueType.Logarithmic +Me.chartControl1.PrimaryYAxis.DesiredIntervals = 5 + +{% endhighlight %} +{% endtabs %} + +### Customizing the Range + +The range of the logarithmic axis can be customized using the [Range](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_Range) property. By default, the range is automatically calculated to align with the provided data. + +{% tabs %} +{% highlight c# %} + +this.chartControl1.PrimaryYAxis.RangeType = ChartAxisRangeType.Set; +this.chartControl1.PrimaryYAxis.Range = new MinMaxInfo(100, 100000, 10); + +{% endhighlight %} + +{% highlight vb %} + +Me.chartControl1.PrimaryYAxis.RangeType = ChartAxisRangeType.Set +Me.chartControl1.PrimaryYAxis.Range = New MinMaxInfo(100, 100000, 10) + +{% endhighlight %} +{% endtabs %} + +### Customizing the Logarithmic Base + +The logarithmic base can be customized using the [LogBase](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_LogBase) property. The default logarithmic base value is 10. + +{% tabs %} +{% highlight c# %} + +this.chartControl1.PrimaryYAxis.ValueType = ChartValueType.Logarithmic; +this.chartControl1.PrimaryYAxis.LogBase = 2; + +{% endhighlight %} + +{% highlight vb %} + +Me.chartControl1.PrimaryYAxis.ValueType = ChartValueType.Logarithmic +Me.chartControl1.PrimaryYAxis.LogBase = 2 + +{% endhighlight %} +{% endtabs %} + +## Custom Axis + +The Custom axis allows you to define fully user-controlled labels on the axis. Instead of relying on the automatically generated labels, you can specify your own label text, position, color, and font using the [Labels](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_Labels) collection. Set the [TickLabelsDrawingMode](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_TickLabelsDrawingMode) to `UserMode` to use only the custom labels, or `BothUserAndAutomaticMode` to display both. + +N> The `ValueType` for each custom label entry should be set to `ChartValueType.Custom`. + +{% tabs %} +{% highlight c# %} + +// Set axis to use user-defined labels +this.chartControl1.PrimaryXAxis.TickLabelsDrawingMode = ChartAxisTickLabelDrawingMode.UserMode; + +// Add custom labels with position, color, font, and value +this.chartControl1.PrimaryXAxis.Labels.Add(new ChartAxisLabel( + "Q1", Color.DarkBlue, new Font("Arial", 9F, FontStyle.Bold), + 1.0, "", "", ChartValueType.Custom)); + +this.chartControl1.PrimaryXAxis.Labels.Add(new ChartAxisLabel( + "Q2", Color.DarkBlue, new Font("Arial", 9F, FontStyle.Bold), + 2.0, "", "", ChartValueType.Custom)); + +this.chartControl1.PrimaryXAxis.Labels.Add(new ChartAxisLabel( + "Q3", Color.DarkBlue, new Font("Arial", 9F, FontStyle.Bold), + 3.0, "", "", ChartValueType.Custom)); + +this.chartControl1.PrimaryXAxis.Labels.Add(new ChartAxisLabel( + "Q4", Color.DarkBlue, new Font("Arial", 9F, FontStyle.Bold), + 4.0, "", "", ChartValueType.Custom)); + +{% endhighlight %} + +{% highlight vb %} + +' Set axis to use user-defined labels +Me.chartControl1.PrimaryXAxis.TickLabelsDrawingMode = ChartAxisTickLabelDrawingMode.UserMode + +' Add custom labels with position, color, font, and value +Me.chartControl1.PrimaryXAxis.Labels.Add(New ChartAxisLabel( + "Q1", Color.DarkBlue, New Font("Arial", 9F, FontStyle.Bold), + 1.0, "", "", ChartValueType.Custom)) + +Me.chartControl1.PrimaryXAxis.Labels.Add(New ChartAxisLabel( + "Q2", Color.DarkBlue, New Font("Arial", 9F, FontStyle.Bold), + 2.0, "", "", ChartValueType.Custom)) + +Me.chartControl1.PrimaryXAxis.Labels.Add(New ChartAxisLabel( + "Q3", Color.DarkBlue, New Font("Arial", 9F, FontStyle.Bold), + 3.0, "", "", ChartValueType.Custom)) + +Me.chartControl1.PrimaryXAxis.Labels.Add(New ChartAxisLabel( + "Q4", Color.DarkBlue, New Font("Arial", 9F, FontStyle.Bold), + 4.0, "", "", ChartValueType.Custom)) + +{% endhighlight %} +{% endtabs %} + +## Axis Positioning + +### Inverted Axis + +The Inverted axis plots data in the opposite direction — from top to bottom for the Y-axis and from right to left for the X-axis. To enable this, set the [Inversed](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_Inversed) property to `true`. + +{% tabs %} +{% highlight c# %} + +this.chartControl1.PrimaryXAxis.Inversed = true; +this.chartControl1.PrimaryYAxis.Inversed = true; + +{% endhighlight %} + +{% highlight vb %} + +Me.chartControl1.PrimaryXAxis.Inversed = True +Me.chartControl1.PrimaryYAxis.Inversed = True + +{% endhighlight %} +{% endtabs %} + +![Inverted axis in Windows Forms Chart](Chart-Axes_images/Chart-Axes_img4.jpeg) + +### Opposed Axis + +By default, the X-axis is rendered at the bottom and the Y-axis is rendered on the left. Setting the [OpposedPosition](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_OpposedPosition) property to `true` moves the axis to the opposite side — the X-axis appears at the top and the Y-axis appears on the right. + +{% tabs %} +{% highlight c# %} + +// Renders the X-axis at the top instead of the default bottom position +this.chartControl1.PrimaryXAxis.OpposedPosition = true; + +// Renders the Y-axis on the right instead of the default left position +this.chartControl1.PrimaryYAxis.OpposedPosition = true; + +{% endhighlight %} + +{% highlight vb %} + +' Renders the X-axis at the top instead of the default bottom position +Me.chartControl1.PrimaryXAxis.OpposedPosition = True + +' Renders the Y-axis on the right instead of the default left position +Me.chartControl1.PrimaryYAxis.OpposedPosition = True + +{% endhighlight %} +{% endtabs %} + +![Opposed axis in Windows Forms Chart](Chart-Axes_images/Chart-Axes_img5.jpeg) + +N> The [OpposedPosition](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_OpposedPosition) and [Inversed](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_Inversed) properties can be combined to implement right-to-left chart layouts. From 51dc8b499956d390a6adb3c0dfc862ceceddab24 Mon Sep 17 00:00:00 2001 From: Priyadharshini-Sf4862 Date: Tue, 17 Mar 2026 17:53:57 +0530 Subject: [PATCH 3/3] Chart axis UG updated --- WindowsForms/chart/Axis/Axis-Labels.md | 661 ++++++++++++++++++ WindowsForms/chart/Axis/Axis-Lines.md | 109 +++ WindowsForms/chart/Axis/Axis-Padding.md | 48 ++ WindowsForms/chart/Axis/Axis-Range-Padding.md | 53 ++ WindowsForms/chart/Axis/Grid-Lines.md | 115 +++ WindowsForms/chart/Axis/Multiple-Axes.md | 9 + WindowsForms/chart/Axis/Tick-Lines.md | 113 +++ WindowsForms/chart/Axis/Title.md | 154 ++++ WindowsForms/chart/Axis/Types.md | 538 +++++++++++++- 9 files changed, 1784 insertions(+), 16 deletions(-) create mode 100644 WindowsForms/chart/Axis/Axis-Labels.md create mode 100644 WindowsForms/chart/Axis/Axis-Lines.md create mode 100644 WindowsForms/chart/Axis/Axis-Padding.md create mode 100644 WindowsForms/chart/Axis/Axis-Range-Padding.md create mode 100644 WindowsForms/chart/Axis/Grid-Lines.md create mode 100644 WindowsForms/chart/Axis/Multiple-Axes.md create mode 100644 WindowsForms/chart/Axis/Tick-Lines.md create mode 100644 WindowsForms/chart/Axis/Title.md diff --git a/WindowsForms/chart/Axis/Axis-Labels.md b/WindowsForms/chart/Axis/Axis-Labels.md new file mode 100644 index 000000000..ba4a22d24 --- /dev/null +++ b/WindowsForms/chart/Axis/Axis-Labels.md @@ -0,0 +1,661 @@ +--- +layout: post +title: Axis Labels in Windows Forms Chart control | Syncfusion +description: Learn about customizing and formatting Axis Labels in Syncfusion Essential Studio® Windows Forms Chart control and more details. +platform: windowsforms +control: Chart +documentation: ug +--- + +# Axis Labels in Windows Forms Chart + +This guide covers the comprehensive customization and configuration of axis labels in the Windows Forms Chart control. Axis labels are the text values displayed along the chart axes that identify data points, categories, or values. + +## Customizing Axis Labels + +By default, the label texts are automatically determined based on the axis data points and the generated intervals. + +If you want to hide the axis label, you can set the [IsVisible](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_IsVisible) property to `false` in chart [PrimaryXAxis](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartControl.html#Syncfusion_Windows_Forms_Chart_ChartControl_PrimaryXAxis) and [PrimaryYAxis](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartControl.html#Syncfusion_Windows_Forms_Chart_ChartControl_PrimaryYAxis). + +### Formatting Numeric and Date Values + +Format your axis labels to display numbers and dates in a specific way, improving readability and clarity. Use the **Format** property for numeric values and **DateTimeFormat** property for date-time values to control how data is presented on the axis. + +**Key Properties:** +- {{'[Format](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_Format)'| markdownify }} - Specifies the format for double values using standard numeric format strings (e.g., "C" for currency, "P" for percentage) +- {{'[DateTimeFormat](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_DateTimeFormat)'| markdownify }} - Specifies the format for DateTime values using date/time format strings (e.g., "MMM" for abbreviated month, "yyyy" for year) + +{% tabs %} + +{% highlight c# %} + +//Settings datetime format to X axis +this.chartControl1.PrimaryXAxis.DateTimeFormat = "MMM"; + +//Settings format to Y axis +this.chartControl1.PrimaryYAxis.ValueType = ChartValueType.Double; +this.chartControl1.PrimaryYAxis.Format = "C"; + +{% endhighlight %} + +{% highlight vb %} + +'Settings datetime format to X axis +Me.chartControl1.PrimaryXAxis.DateTimeFormat = "MMM" + +'Settings format to Y axis +Me.chartControl1.PrimaryYAxis.ValueType = ChartValueType.Double +Me.chartControl1.PrimaryYAxis.Format = "C" + +{% endhighlight %} +{% endtabs %} + +### Styling Label Appearance + +Enhance the visual presentation of axis labels by customizing their color and font properties. Change the font family, size, style, and text color to match your application's design theme. + +**Key Properties:** +- {{'[ForeColor](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_ForeColor)'| markdownify }} - Sets the color for labels and other axis text +- {{'[Font](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_Font)'| markdownify }} - Specifies the font family, size, and style for axis labels (default: Trebuchet, 9pt, regular) + +{% tabs %} + +{% highlight c# %} + +//Setting ForeColor and Font to axes labels +this.chartControl1.PrimaryXAxis.ForeColor = System.Drawing.Color.Navy; +this.chartControl1.PrimaryXAxis.Font = new System.Drawing.Font("Arial", 9F, System.Drawing.FontStyle.Bold); + +this.chartControl1.PrimaryYAxis.ForeColor = System.Drawing.Color.Navy; +this.chartControl1.PrimaryYAxis.Font = new System.Drawing.Font("Arial", 9F, System.Drawing.FontStyle.Bold); + +{% endhighlight %} + +{% highlight vb %} + +'Setting ForeColor and Font to axes labels +Me.chartControl1.PrimaryXAxis.ForeColor = System.Drawing.Color.Navy +Me.chartControl1.PrimaryXAxis.Font = New System.Drawing.Font("Arial", 9F, System.Drawing.FontStyle.Bold) + +Me.chartControl1.PrimaryYAxis.ForeColor = System.Drawing.Color.Navy +Me.chartControl1.PrimaryYAxis.Font = New System.Drawing.Font("Arial", 9F, System.Drawing.FontStyle.Bold) + +{% endhighlight %} +{% endtabs %} + +### Positioning and Rotating Labels + +Control how axis labels are aligned and rotated within the chart. Use alignment options to position labels (left, center, or right) and enable label rotation to prevent overlap when space is limited. + +**Key Properties:** +- {{'[LabelAlignment](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_LabelAlignment)'| markdownify }} - Specifies label alignment: `Near`, `Center` (default), or `Far` within the available area +- {{'[LabelRotate](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_LabelRotate)'| markdownify }} - Enables or disables label rotation +- {{'[LabelRotateAngle](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_LabelRotateAngle)'| markdownify }} - Specifies the rotation angle in degrees when `LabelRotate` is enabled + +{% tabs %} + +{% highlight c# %} + +//Label property settings for X-Axis +this.chartControl1.PrimaryXAxis.LabelAlignment = System.Drawing.StringAlignment.Center; +this.chartControl1.PrimaryXAxis.LabelRotate = true; +this.chartControl1.PrimaryXAxis.LabelRotateAngle = 45; + +//Label property settings for Y-Axis +this.chartControl1.PrimaryYAxis.LabelAlignment = System.Drawing.StringAlignment.Far; + +{% endhighlight %} + +{% highlight vb %} + +'Label property settings for X-Axis +Me.chartControl1.PrimaryXAxis.LabelAlignment = System.Drawing.StringAlignment.Center +Me.chartControl1.PrimaryXAxis.LabelRotate = True +Me.chartControl1.PrimaryXAxis.LabelRotateAngle = 45 + +'Label property settings for Y-Axis +Me.chartControl1.PrimaryYAxis.LabelAlignment = System.Drawing.StringAlignment.Far + +{% endhighlight %} +{% endtabs %} + +### Auto-Scaling Labels + +Enable responsive label sizing that automatically adjusts text size when the chart is resized. This ensures labels remain proportional and readable at any chart dimension. + +**Key Property:** +- {{'[ScaleLabels](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_ScaleLabels)'| markdownify }} - When set to `true`, labels automatically resize to match chart dimensions + +{% tabs %} + +{% highlight c# %} + +//Enable auto-scaling for labels +this.chartControl1.PrimaryXAxis.ScaleLabels = true; +this.chartControl1.PrimaryYAxis.ScaleLabels = true; + +{% endhighlight %} + +{% highlight vb %} + +'Enable auto-scaling for labels +Me.chartControl1.PrimaryXAxis.ScaleLabels = True +Me.chartControl1.PrimaryYAxis.ScaleLabels = True + +{% endhighlight %} +{% endtabs %} + +![Chart Axes](Chart-Axes_images/Chart-Axes_img14.jpeg) + +## Customizing Label Text + +The basic formatting options may not cover all your customization needs. Format axis labels dynamically using the **FormatLabel** event to customize label text based on specific conditions or data values. + +### Using the FormatLabel Event + +Dynamically modify label text before rendering by handling the {{'[FormatLabel](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_FormatLabel)'| markdownify }} event. This event fires for each label and provides access to event arguments containing label information. + +**Event Properties:** +- {{'[AxisOrientation](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartFormatAxisLabelEventArgs.html#Syncfusion_Windows_Forms_Chart_ChartFormatAxisLabelEventArgs_AxisOrientation)'| markdownify }} - Returns the axis orientation (Horizontal or Vertical) +- {{'[Label](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartFormatAxisLabelEventArgs.html#Syncfusion_Windows_Forms_Chart_ChartFormatAxisLabelEventArgs_Label)'| markdownify }} - Gets or sets the label text to be rendered +- {{'[Value](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartFormatAxisLabelEventArgs.html#Syncfusion_Windows_Forms_Chart_ChartFormatAxisLabelEventArgs_Value)'| markdownify }} - Returns the numeric value associated with the label position +- {{'[ValueAsDate](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartFormatAxisLabelEventArgs.html#Syncfusion_Windows_Forms_Chart_ChartFormatAxisLabelEventArgs_ValueAsDate)'| markdownify }} - Returns the value as DateTime when working with date values +- {{'[IsAxisPrimary](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartFormatAxisLabelEventArgs.html#Syncfusion_Windows_Forms_Chart_ChartFormatAxisLabelEventArgs_IsAxisPrimary)'| markdownify }} - Indicates if the axis is primary +- {{'[Handled](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartFormatAxisLabelEventArgs.html#Syncfusion_Windows_Forms_Chart_ChartFormatAxisLabelEventArgs_Handled)'| markdownify }} - Mark as true to prevent further processing +- {{'[Tooltip](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartFormatAxisLabelEventArgs.html#Syncfusion_Windows_Forms_Chart_ChartFormatAxisLabelEventArgs_ToolTip)'| markdownify }} - Specifies the tooltip content + +{% tabs %} + +{% highlight c# %} + +private void chartControl1_ChartFormatAxisLabel(object sender, ChartFormatAxisLabelEventArgs e) + +{ + + if (e.AxisOrientation == ChartOrientation.Horizontal) + + { + + if (e.ValueAsDate.Month == 1) + + e.Label = "1st Month"; + + else if (e.ValueAsDate.Month == 2) + + e.Label = "2nd Month"; + + else if (e.ValueAsDate.Month == 3) + + e.Label = "3rd Month"; + + else if (e.ValueAsDate.Month == 4) + + e.Label = "4th Month"; + + else if (e.ValueAsDate.Month == 5) + + e.Label = "5th Month"; + + else if (e.ValueAsDate.Month == 6) + + e.Label = "6th Month"; + + e.Handled = true; + + } + +} + +{% endhighlight %} + +{% highlight vb %} + +Private Sub chartControl1_ChartFormatAxisLabel(ByVal sender As Object, ByVal e As ChartFormatAxisLabelEventArgs) + + If e.AxisOrientation = ChartOrientation.Horizontal Then + + If e.ValueAsDate.Month = 1 Then + + e.Label = "1st Month" + + ElseIf e.ValueAsDate.Month = 2 Then + + e.Label = "2nd Month" + + ElseIf e.ValueAsDate.Month = 3 Then + + e.Label = "3rd Month" + + ElseIf e.ValueAsDate.Month = 4 Then + + e.Label = "4th Month" + + ElseIf e.ValueAsDate.Month = 5 Then + + e.Label = "5th Month" + + ElseIf e.ValueAsDate.Month = 6 Then + + e.Label = "6th Month" + + End If + + e.Handled = True + + End If + +End Sub + +{% endhighlight %} +{% endtabs %} + +![Chart Axes](Chart-Axes_images/Chart-Axes_img15.jpeg) + +### Using Custom Labels + +Specify a set of custom labels to control both the label text and intervals displayed on the axis. This approach lets you fully define label content and positions. + +**Key Properties:** +- {{'[TickLabelsDrawingMode](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_TickLabelsDrawingMode)'| markdownify }} - Controls how labels are rendered: + - `AutomaticMode` - Labels determined by the chart engine + - `UserMode` - Labels from the custom Labels collection only + - `BothUserAndAutomaticMode` - Mix of automatic and custom labels + - `None` - No labels rendered +- {{'[Labels](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_Labels)'| markdownify }} - Custom collection for fully customized labels (requires `UserMode` or `BothUserAndAutomaticMode`) + +#### Using Custom Text + +{% tabs %} + +{% highlight c# %} + +//Setting drawing mode + +this.chartControl1.PrimaryXAxis.TickLabelsDrawingMode = ChartAxisTickLabelDrawingMode.UserMode; + +//Adding new labels + +this.chartControl1.PrimaryXAxis.Labels.Add(new ChartAxisLabel("Q1 Mid Point", Color.OrangeRed, new Font("Arial", 8F, System.Drawing.FontStyle.Bold), new DateTime(2007, 2, 15), "", "", ChartValueType.Custom)); + +this.chartControl1.PrimaryXAxis.Labels.Add(new ChartAxisLabel("Q2 Mid Point", Color.OrangeRed, new Font("Arial", 8F, System.Drawing.FontStyle.Bold), new DateTime(2007, 5, 15), "", "", ChartValueType.Custom)); + +{% endhighlight %} + +{% highlight vb %} + +'Setting drawing mode + +Me.chartControl1.PrimaryXAxis.TickLabelsDrawingMode = ChartAxisTickLabelDrawingMode.UserMode + +'Adding new labels + +Me.chartControl1.PrimaryXAxis.Labels.Add(New ChartAxisLabel("Q1 Mid Point", Color.OrangeRed, New Font("Arial", 8F, System.Drawing.FontStyle.Bold), New DateTime(2007, 2, 15), "", "", ChartValueType.Custom)) + +Me.chartControl1.PrimaryXAxis.Labels.Add(New ChartAxisLabel("Q2 Mid Point", Color.OrangeRed, New Font("Arial", 8F, System.Drawing.FontStyle.Bold), New DateTime(2007, 5, 15), "", "", ChartValueType.Custom)) + +{% endhighlight %} + +{% endtabs %} + +![Chart Axes](Chart-Axes_images/Chart-Axes_img16.jpeg) + +#### Using Formatted Text + +Apply date/time formatting to custom labels to automatically format date values with your specified format string. + +{% tabs %} + +{% highlight c# %} + +//Setting drawing mode +this.chartControl1.PrimaryXAxis.TickLabelsDrawingMode = ChartAxisTickLabelDrawingMode.UserMode; + +//Adding new labels with formatted text +this.chartControl1.PrimaryXAxis.Labels.Add(new ChartAxisLabel("", Color.Maroon, new Font("Arial", 9F, System.Drawing.FontStyle.Bold), new DateTime(2007, 2, 15), "", "M", ChartValueType.DateTime)); + +this.chartControl1.PrimaryXAxis.Labels.Add(new ChartAxisLabel("", Color.Maroon, new Font("Arial", 9F, System.Drawing.FontStyle.Bold), new DateTime(2007, 05, 15), "", "M", ChartValueType.DateTime)); + +{% endhighlight %} + +{% highlight vb %} + +'Setting drawing mode +Me.chartControl1.PrimaryXAxis.TickLabelsDrawingMode = ChartAxisTickLabelDrawingMode.UserMode + +'Clearing all the default labels +Me.chartControl1.PrimaryXAxis.Labels.Clear() + +'Adding new labels with formatted text +Me.chartControl1.PrimaryXAxis.Labels.Add(New ChartAxisLabel("", Color.Maroon, New Font("Arial", 9F, System.Drawing.FontStyle.Bold), New DateTime(2007, 2, 15), "", "M", ChartValueType.DateTime)) + +Me.chartControl1.PrimaryXAxis.Labels.Add(New ChartAxisLabel("", Color.Maroon, New Font("Arial", 9F, System.Drawing.FontStyle.Bold), New DateTime(2007, 05, 15), "", "M", ChartValueType.DateTime)) + +{% endhighlight %} + +{% endtabs %} + +![Chart Axes](Chart-Axes_images/Chart-Axes_img17.jpeg) + +## Handling Overlapping Labels + +When charts have limited space, axis labels may overlap and become unreadable. The chart provides several built-in strategies to automatically handle label overlap and ensure labels remain clear and accessible. + +### Preventing Label Overlap + +Control how overlapping labels are handled using various intersection actions. Choose the strategy that best preserves label readability based on your chart layout. + +**Key Properties:** +- {{'[LabelIntersectAction](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_LabelIntersectAction)'| markdownify }} - Specifies action when labels overlap: + - `MultipleRows` - Renders labels in multiple rows to avoid overlap + - `Rotate` - Rotates text to prevent overlap + - `Wrap` - Wraps text to fit available space + - `None` - Do nothing (default) - labels may overlap +- {{'[HidePartialLabels](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_HidePartialLabels)'| markdownify }} - When `true`, selectively hides certain labels (usually edge labels) to keep remaining labels readable + +{% tabs %} + +{% highlight c# %} + +this.chartControl1.PrimaryXAxis.LabelIntersectAction = ChartLabelIntersectAction.Rotate; +this.chartControl1.PrimaryXAxis.HidePartialLabels = true; + +{% endhighlight %} + +{% highlight vb %} + +Me.chartControl1.PrimaryXAxis.LabelIntersectAction = ChartLabelIntersectAction.Rotate +Me.chartControl1.PrimaryXAxis.HidePartialLabels = True + +{% endhighlight %} +{% endtabs %} + +### Managing Edge Labels + +Handle labels at the edges of an axis that might be partially clipped. Use the `EdgeLabelsDrawingMode` property to control how edge labels are positioned and displayed. + +**Key Property:** +- {{'[EdgeLabelsDrawingMode](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_EdgeLabelsDrawingMode)'| markdownify }} - Specifies how edge labels are rendered: + - `Center` - Centers the label at the interval (default) + - `Shift` - Shifts labels to be within interval boundaries + - `ClippingProtection` - Uses intelligent logic to prevent clipping + +![Chart Axes](Chart-Axes_images/Chart-Axes_img18.png) + +## Grouping Labels + +Organize axis labels into logical groups and mark them with category labels. Group adjacent labels (e.g., months into quarters, days into weeks) to provide higher-level context and improve chart readability. + +### Creating Label Groups + +Group a set of adjoining labels and assign a category name to enhance data organization and visualization clarity. + +**Key Properties:** +- {{'[GroupingLabels](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_GroupingLabels)'| markdownify }} - Collection for defining label groups with custom names and ranges +- {{'[DrawTickLabelGrid](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_DrawTickLabelGrid)'| markdownify }} - When `true`, displays grouped labels within a grid (useful for visual organization) + +{% tabs %} + +{% highlight c# %} + +//Create quarterly grouping labels +ChartAxisGroupingLabel Q1 = new ChartAxisGroupingLabel(new DoubleRange(1, 3), "Q1"); +Q1.BorderStyle = ChartAxisGroupingLabelBorderStyle.Rectangle; +Q1.Font = new Font("Arial", 10F, FontStyle.Bold); +this.chartControl1.PrimaryXAxis.GroupingLabels.Add(Q1); + +ChartAxisGroupingLabel Q2 = new ChartAxisGroupingLabel(new DoubleRange(4, 6), "Q2"); +Q2.BorderStyle = ChartAxisGroupingLabelBorderStyle.Rectangle; +Q2.Font = new Font("Arial", 10F, FontStyle.Bold); +this.chartControl1.PrimaryXAxis.GroupingLabels.Add(Q2); + +//Enable grid for grouped labels +this.chartControl1.PrimaryXAxis.DrawTickLabelGrid = true; + +{% endhighlight %} + +{% highlight vb %} + +'Create quarterly grouping labels +Dim Q1 As New ChartAxisGroupingLabel(New DoubleRange(1, 3), "Q1") +Q1.BorderStyle = ChartAxisGroupingLabelBorderStyle.Rectangle +Q1.Font = New Font("Arial", 10.0F, FontStyle.Bold) +Me.chartControl1.PrimaryXAxis.GroupingLabels.Add(Q1) + +Dim Q2 As New ChartAxisGroupingLabel(New DoubleRange(4, 6), "Q2") +Q2.BorderStyle = ChartAxisGroupingLabelBorderStyle.Rectangle +Q2.Font = New Font("Arial", 10.0F, FontStyle.Bold) +Me.chartControl1.PrimaryXAxis.GroupingLabels.Add(Q2) + +'Enable grid for grouped labels +Me.chartControl1.PrimaryXAxis.DrawTickLabelGrid = True + +{% endhighlight %} +{% endtabs %} + +![Chart Axes](Chart-Axes_images/Chart-Axes_img19.jpeg) + +## Rounding Label Values + +Control the number of decimal places displayed in numeric axis labels. By default, axis labels show 2 decimal places, but you can adjust this to fit your data precision requirements. + +### Setting Decimal Places + +Specify the number of decimal places to display for numeric labels using the `RoundingPlaces` property. + +**Key Property:** +- {{'[RoundingPlaces](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_RoundingPlaces)'| markdownify }} - Sets the number of decimal places for numeric labels (default: 2) + +{% tabs %} + +{% highlight c# %} + +//Set RoundingPlaces for axis +this.chartControl1.PrimaryYAxis.RoundingPlaces = 3; + +{% endhighlight %} + +{% highlight vb %} + +//Set RoundingPlaces for axis +Me.chartControl1.PrimaryYAxis.RoundingPlaces = 3; + +{% endhighlight %} +{% endtabs %} + +The following screenshot illustrates a chart whose y-axis labels rendered with three decimal places. + +![Chart Axes](Chart-Axes_images/Chart-Axes_img42.png) + +## Positioning Labels by Index or Position + +Control how custom labels are positioned on the axis by specifying whether positioning is based on label index or data position. This feature provides flexibility in binding custom labels to chart data. + +### Using Position-Based Label Placement + +Position custom labels based on their associated data position rather than their index in the labels collection, allowing more flexible label binding. + +**Key Property:** +- {{'[CustomLabelsParameter](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_CustomLabelsParameter)'| markdownify }} - Determines label positioning method: + - `Index` - Position labels by their index in the collection (default) + - `Position` - Position labels by their associated data position value + +{% tabs %} + +{% highlight c# %} + +//Set CustomLabelsParameter for axis +series.SeriesModel = new ChartDataBindModel(ShowCompleteInformation, "test1") +{ + YNames = new string[] { "YValue" }, +}; + +chart.Series.Add(series); +ChartDataBindAxisLabelModel xAxisLabelModel = new ChartDataBindAxisLabelModel(Data, "test1"); +xAxisLabelModel.LabelName = "XValue"; +xAxisLabelModel.PositionName = "ID"; +chart.PrimaryXAxis.LabelsImpl = xAxisLabelModel; +chart.PrimaryXAxis.CustomLabelsParameter = ChartCustomLabelsParameter.Position; + +{% endhighlight %} + +{% highlight vb %} + +//Set CustomLabelsParameter for axis +series.SeriesModel = new ChartDataBindModel(ShowCompleteInformation, "test1") +{ + YNames = new string[] { "YValue" }, +}; + +chart.Series.Add(series); +ChartDataBindAxisLabelModel xAxisLabelModel = new ChartDataBindAxisLabelModel(Data, "test1"); +xAxisLabelModel.LabelName = "XValue"; +xAxisLabelModel.PositionName = "ID"; +chart.PrimaryXAxis.LabelsImpl = xAxisLabelModel; +chart.PrimaryXAxis.CustomLabelsParameter = ChartCustomLabelsParameter.Position; + +{% endhighlight %} +{% endtabs %} + +The following screenshot illustrates a chart whose x-axis labels rendered with CustomLabelsParameter as position. + +![Chart Axes](Chart-Axes_images/Chart-Axes_img43.png) + +## Positioning Axis Labels + +Control the placement of axis labels to optimize chart layout and readability. Position labels inside or outside the plotted chart area to maximize chart space or accommodate lengthy labels. + +### Overview + +When axis labels are long, they consume additional space outside the plot area, reducing the chart drawing area. Use label placement control to position labels strategically for better space utilization. + +### Positioning Labels Inside or Outside Chart Area + +Specify whether axis labels should be placed inside or outside the plotted chart area using the {{'[AxisLabelPlacement](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_AxisLabelPlacement)'| markdownify }} property. + +**Key Property:** +- {{'[AxisLabelPlacement](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_AxisLabelPlacement)'| markdownify }} - Specifies label position: + - `Inside` - Places labels inside the chart plot area + - `Outside` - Places labels outside the plot area (default) + +The following code illustrates how to place the chart axis label inside the plotted chart area: + +{% tabs %} + +{% highlight c# %} + +//Place axis labels inside the chart area +this.chartControl1.PrimaryXAxis.AxisLabelPlacement = ChartPlacement.Inside; + +{% endhighlight %} + +{% highlight vb %} + +'Place axis labels inside the chart area +Me.chartControl1.PrimaryXAxis.AxisLabelPlacement = ChartPlacement.Inside + +{% endhighlight %} +{% endtabs %} + +![Chart Axes](Chart-Axes_images/Chart-Axes_img37.png) + +### Positioning Individual Labels Dynamically + +Customize the placement of individual axis labels dynamically based on data values or conditions. Use the **FormatLabel** event to adjust label placement for specific labels based on your requirements. + +Handle the [FormatLabel](/windowsforms/chart/chart-control-events#chartformataxislabel-event) event to dynamically adjust individual label placements based on data conditions. + +{% tabs %} + +{% highlight c# %} + +//Set default placement for all labels +this.chartControl1.PrimaryYAxis.AxisLabelPlacement = ChartPlacement.Inside; + +//Customize individual label placement in the FormatLabel event +private void chartControl1_ChartFormatAxisLabel(object sender, ChartFormatAxisLabelEventArgs e) + + { + if (e.AxisOrientation == ChartOrientation.Vertical) + { + //Adjust label placement based on data values + if (e.Label == "1") + { + if (series.Points[(int)e.Value - 1].YValues[0] > 0) + e.AxisLabelPlacement = ChartPlacement.Outside; + e.Label = "Canada"; + } + else if (e.Label == "2") + { + if (series.Points[(int)e.Value - 1].YValues[0] > 0) + e.AxisLabelPlacement = ChartPlacement.Outside; + e.Label = "France"; + } + else if (e.Label == "3") + { + if (series.Points[(int)e.Value - 1].YValues[0] > 0) + e.AxisLabelPlacement = ChartPlacement.Outside; + e.Label = "Japan"; + } + else if (e.Label == "4") + { + if (series.Points[(int)e.Value - 1].YValues[0] > 0) + e.AxisLabelPlacement = ChartPlacement.Outside; + e.Label = "Britain"; + } + else if (e.Label == "5") + { + if (series.Points[(int)e.Value - 1].YValues[0] > 0) + e.AxisLabelPlacement = ChartPlacement.Outside; + e.Label = "United States"; + } + e.Handled = true; + } + } + +{% endhighlight %} + +{% highlight vb %} + +'Set default placement for all labels +Me.chartControl1.PrimaryYAxis.AxisLabelPlacement = ChartPlacement.Inside + +'Customize individual label placement in the FormatLabel event +Private Sub chartControl1_ChartFormatAxisLabel(ByVal sender As Object, ByVal e As ChartFormatAxisLabelEventArgs) + If e.AxisOrientation = ChartOrientation.Vertical Then + 'Adjust label placement based on data values + If e.Label = "1" Then + If series.Points(CInt(Fix(e.Value)) - 1).YValues(0) > 0 Then + e.AxisLabelPlacement = ChartPlacement.Outside + End If + e.Label = "Canada" + ElseIf e.Label = "2" Then + If series.Points(CInt(Fix(e.Value)) - 1).YValues(0) > 0 Then + e.AxisLabelPlacement = ChartPlacement.Outside + End If + e.Label = "France" + ElseIf e.Label = "3" Then + If series.Points(CInt(Fix(e.Value)) - 1).YValues(0) > 0 Then + e.AxisLabelPlacement = ChartPlacement.Outside + End If + e.Label = "Japan" + ElseIf e.Label = "4" Then + If series.Points(CInt(Fix(e.Value)) - 1).YValues(0) > 0 Then + e.AxisLabelPlacement = ChartPlacement.Outside + End If + e.Label = "Britain" + ElseIf e.Label = "5" Then + If series.Points(CInt(Fix(e.Value)) - 1).YValues(0) > 0 Then + e.AxisLabelPlacement = ChartPlacement.Outside + End If + e.Label = "United States" + End If + e.Handled = True + End If +End Sub + +{% endhighlight %} +{% endtabs %} + +The following screenshot illustrates the customization options for individual label positions on the y-axis to the right or left side based on the y value of the data points. If the export value is positive, the label is rendered to the left side of the axis, and if it is negative, the label is rendered on the right side of the axis. + +![Chart Axes](Chart-Axes_images/Chart-Axes_img38.png) diff --git a/WindowsForms/chart/Axis/Axis-Lines.md b/WindowsForms/chart/Axis/Axis-Lines.md new file mode 100644 index 000000000..0caa05b32 --- /dev/null +++ b/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) diff --git a/WindowsForms/chart/Axis/Axis-Padding.md b/WindowsForms/chart/Axis/Axis-Padding.md new file mode 100644 index 000000000..d295b4f6b --- /dev/null +++ b/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) \ No newline at end of file diff --git a/WindowsForms/chart/Axis/Axis-Range-Padding.md b/WindowsForms/chart/Axis/Axis-Range-Padding.md new file mode 100644 index 000000000..f4e907fa8 --- /dev/null +++ b/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) \ No newline at end of file diff --git a/WindowsForms/chart/Axis/Grid-Lines.md b/WindowsForms/chart/Axis/Grid-Lines.md new file mode 100644 index 000000000..f51c17718 --- /dev/null +++ b/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. + + + + + + + + + + + + + + + + +
+ChartAxis Property +Description
+ +{{'[DrawGrid](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_DrawGrid)'| markdownify }} + +Specifies whether to draw the grid lines for the axis.
+{{'[GridLineType.ForeColor](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.LineInfo.html#Syncfusion_Windows_Forms_Chart_LineInfo_ForeColor)'| markdownify }} + +Sets the foreground color of the grid line.
+{{'[GridLineType.BackColor](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.LineInfo.html#Syncfusion_Windows_Forms_Chart_LineInfo_BackColor)'| markdownify }} + +Sets the background color of the grid line.
+{{'[GridLineType.DashStyle](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.LineInfo.html#Syncfusion_Windows_Forms_Chart_LineInfo_DashStyle)'| markdownify }} + +Sets the dash style used to draw the grid line.
+{{'[GridLineType.PenType](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.LineInfo.html#Syncfusion_Windows_Forms_Chart_LineInfo_PenType)'| markdownify }} + +Sets the pen type used to draw the grid line.
+{{'[GridLineType.Width](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.LineInfo.html#Syncfusion_Windows_Forms_Chart_LineInfo_Width)'| markdownify }} + +Sets the thickness of the grid line.
+ +![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 %} diff --git a/WindowsForms/chart/Axis/Multiple-Axes.md b/WindowsForms/chart/Axis/Multiple-Axes.md new file mode 100644 index 000000000..8b670e59a --- /dev/null +++ b/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 +--- + diff --git a/WindowsForms/chart/Axis/Tick-Lines.md b/WindowsForms/chart/Axis/Tick-Lines.md new file mode 100644 index 000000000..da6d09af7 --- /dev/null +++ b/WindowsForms/chart/Axis/Tick-Lines.md @@ -0,0 +1,113 @@ +--- +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 + +## Axis Ticks + +### Major Ticks + +Major ticks are rendered automatically at the intersection of an axis with the interval grid lines. The following properties allow you to customize the appearance and behavior of the major ticks. + + + + + + + + + + + + +
+ChartAxis Property +Description
+ +{{'[TickSize](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_TickSize)'| markdownify }} + +Specifies the width and height of the tick rectangle. Setting this to a zero size is also a convenient way to hide the ticks. The default value is {1, 1}.
+{{'[TickColor](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_TickColor)'| markdownify }} + +Sets the color of the tick mark. The default value is System.ControlText.
+ +{{'[TickLabelGridPadding](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_TickLabelGridPadding)'| markdownify }} + +Sets the padding between the tick mark and the axis label. The default value is 5.
+{{'[TickDrawingOperationMode](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_TickLabelsDrawingMode)'| markdownify }} + +Defines the number of ticks to render while zooming.
  • NumberOfIntervalsFixed - The number of visible intervals remains constant while zooming. As you zoom in, the total number of intervals increases.
  • IntervalFixed - The total number of intervals remains constant. As you zoom in, fewer intervals are visible at a time.
+ +![Chart Axes](Chart-Axes_images/Chart-Axes_img24.jpeg) + +{% tabs %} + +{% highlight c# %} + +this.chartControl1.PrimaryXAxis.TickSize = new Size(3,3); + +this.chartControl1.PrimaryXAxis.TickColor = Color.DarkOrange; + +this.chartControl1.PrimaryXAxis.TickLabelGridPadding = 8F; + +{% endhighlight %} + +{% highlight vb %} + +Me.chartControl1.PrimaryXAxis.TickSize = new Size(3,3) + +Me.chartControl1.PrimaryXAxis.TickColor = Color.DarkOrange + +Me.chartControl1.PrimaryXAxis.TickLabelGridPadding = 8F + +{% endhighlight %} +{% endtabs %} + +### Minor Ticks + +Minor ticks are tick marks displayed between major ticks. They are not rendered by default. Use the following properties to enable minor ticks and define their frequency. + + + + + + + + +
+ChartAxis Property +Description
+ +{{'[SmallTicksPerInterval](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_SmallTicksPerInterval)'| markdownify }} + +Specifies the number of minor tick marks to draw on the axis between each interval. Set this to a value greater than zero to enable minor ticks.
+{{'[SmallTickSize](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_SmallTickSize)'| markdownify }} + +Specifies the width and height of the minor tick rectangle.
+ +![Chart Axes](Chart-Axes_images/Chart-Axes_img25.jpeg) + +{% tabs %} + +{% highlight c# %} + +this.chartControl1.PrimaryXAxis.SmallTickSize = new System.Drawing.Size(2, 2); + +this.chartControl1.PrimaryXAxis.SmallTicksPerInterval = 1; + +{% endhighlight %} + +{% highlight vb %} + +Me.chartControl1.PrimaryXAxis.SmallTickSize = New System.Drawing.Size(2, 2) + +Me.chartControl1.PrimaryXAxis.SmallTicksPerInterval = 1 + +{% endhighlight %} +{% endtabs %} \ No newline at end of file diff --git a/WindowsForms/chart/Axis/Title.md b/WindowsForms/chart/Axis/Title.md new file mode 100644 index 000000000..03cd7b2a0 --- /dev/null +++ b/WindowsForms/chart/Axis/Title.md @@ -0,0 +1,154 @@ +--- +layout: post +title: Chart Title in Windows Forms Chart control | Syncfusion +description: Learn about Chart Title support in Syncfusion Essential Studio® Windows Forms Chart control and more details. +platform: windowsforms +control: Chart +documentation: ug +--- + +# Chart Title in Windows Forms Chart + +## Axis Title + +Essential® Chart provides properties to set custom titles for the axes. Set the title text for an axis using the [Title](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_Title) property. The title text can be customized using the [TitleColor](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_TitleColor) and [TitleFont](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_TitleFont) properties. + + + + + + + + + + +
+Chart Axis Property +Description
+ +{{'[TitleColor](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_TitleColor)'| markdownify }} + +Sets the color of the axis title text.
+{{'[TitleFont](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_TitleFont)'| markdownify }} + +Sets the font style of the axis title text.
+{{'[TitleRotationAngle](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_TitleRotationAngle)'| markdownify }} + +Sets the angle to rotate the axis title text.
+ +{% tabs %} + +{% highlight c# %} + +//Sets a custom title for the x-axis. + +this.chartControl1.PrimaryXAxis.Title = "x-axis"; + +this.chartControl1.PrimaryXAxis.TitleColor = Color.Red; + +this.chartControl1.PrimaryXAxis.TitleFont = new Font("Arial", 10); + +//Set a custom title for the y-axis in the same way. + +{% endhighlight %} + +{% highlight vb %} + +'Sets a custom title for the x-axis. + +Me.chartControl1.PrimaryXAxis.Title = "x-axis" + +Me.chartControl1.PrimaryXAxis.TitleColor = Color.Red + +Me.chartControl1.PrimaryXAxis.TitleFont = New Font("Arial", 10) + +'Set a custom title for the y-axis in the same way. + +{% endhighlight %} +{% endtabs %} + +### Rotating Axis Title + +The axis title can be rotated to 0, 90, 180, or 270 degrees using the [TitleRotationAngle](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_TitleRotationAngle) property of [ChartAxis](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html). + +{% tabs %} + +{% highlight c# %} + +//Rotating x-axis title by 270 degrees +this.chartControl1.PrimaryXAxis.TitleRotationAngle = AxisTitleRotationAngle.Rotate270; + +//Rotating y-axis title by 0 degree +this.chartControl1.PrimaryYAxis.TitleRotationAngle = AxisTitleRotationAngle.Rotate0; + +{% endhighlight %} + +{% highlight vb %} + +'Rotating x-axis title by 270 degrees +Me.chartControl1.PrimaryXAxis.TitleRotationAngle = AxisTitleRotationAngle.Rotate270 + +'Rotating y-axis title by 0 degree +Me.chartControl1.PrimaryYAxis.TitleRotationAngle = AxisTitleRotationAngle.Rotate0 + +{% endhighlight %} +{% endtabs %} + +The following screenshot shows the x-axis title rotated by 270 degrees while the y-axis title remains unrotated. +![Chart Axes](Chart-Axes_images/Chart-Axes_img41_2.png) + +### Multiline Chart Axes Title + +Axis titles can be wrapped and displayed as multiline text. To set a multiline title through the designer, type the title text in the [Axis.Title](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_Title) property, press **Enter** to insert a new line, and then press **Ctrl+Enter** to confirm the text. + +![Chart Axes](Chart-Axes_images/Chart-Axes_img21.jpeg) + +The following screenshot illustrates a chart with multiline axis titles. + +![Chart Axes](Chart-Axes_images/Chart-Axes_img22.jpeg) + +### Drawing Mode of Title Text + +When the axis title text exceeds the axis length, it can be displayed as a partial text with an ellipsis at the end. There is also an option to wrap the title text, in addition to the multiline axis title feature described above. The [Axes.TitleDrawMode](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_TitleDrawMode) property is used to control this behavior. + + + + + + +
+Chart Axis Property +Description
+ +{{'[TitleDrawMode](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_TitleDrawMode)'| markdownify }} + +Sets the drawing mode of the axis title. The available options are Ellipsis, Wrap, and None. The default value is None.
+ +{% tabs %} + +{% highlight c# %} + +//Sets the drawing mode of the x-axis title. + +this.chartControl1.PrimaryXAxis.TitleDrawMode = ChartTitleDrawMode.Ellipsis; + +//Sets the drawing mode of the secondary y-axis title. + +this.secYAxis.TitleDrawMode = ChartTitleDrawMode.Wrap; + +{% endhighlight %} + +{% highlight vb %} + +'Sets the drawing mode of the x-axis title. + +Me.chartControl1.PrimaryXAxis.TitleDrawMode = ChartTitleDrawMode.Ellipsis + +'Sets the drawing mode of the secondary y-axis title. + +Me.secYAxis.TitleDrawMode = ChartTitleDrawMode.Wrap + +{% endhighlight %} +{% endtabs %} + +![Chart Axes](Chart-Axes_images/Chart-Axes_img23.png) \ No newline at end of file diff --git a/WindowsForms/chart/Axis/Types.md b/WindowsForms/chart/Axis/Types.md index 8b723c668..c39e891b9 100644 --- a/WindowsForms/chart/Axis/Types.md +++ b/WindowsForms/chart/Axis/Types.md @@ -17,7 +17,9 @@ The Windows Forms Chart control supports the following types of chart axis, conf * Logarithmic * Custom -## Double Axis +## Axis types + +### Double Axis [Double](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartValueType.html) is the default value type for both X and Y axes. It is used to plot standard numerical (floating-point) values on the chart. @@ -37,7 +39,7 @@ Me.chartControl1.PrimaryYAxis.ValueType = ChartValueType.Double {% endhighlight %} {% endtabs %} -### Interval +#### Interval The axis interval can be customized using the [DesiredIntervals](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_DesiredIntervals) property. By default, the interval is automatically calculated based on the minimum and maximum values of the provided data. @@ -55,7 +57,7 @@ Me.chartControl1.PrimaryYAxis.DesiredIntervals = 5 {% endhighlight %} {% endtabs %} -### Customizing the Range +#### Customizing the Range The [Range](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_Range) property is used to set the minimum, maximum, and interval of the axis range. Set [RangeType](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_RangeType) to Set to apply a custom range. @@ -77,7 +79,7 @@ Me.chartControl1.PrimaryYAxis.Range = New MinMaxInfo(0, 500, 50) {% endhighlight %} {% endtabs %} -## Category Axis +### Category Axis The Category axis displays text-based labels instead of numeric values. It is an index-based axis where data points are plotted at equal intervals. To use the category axis, set the [ValueType](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_ValueType) property to Category. @@ -99,7 +101,7 @@ Me.chartControl1.PrimaryXAxis.ValueType = ChartValueType.Category ![Category axis in Windows Forms Chart](Chart-Axes_images/Chart-Axes_img39.png) -### Indexed X Values +#### Indexed X Values By default points in a series are plotted against their x and y values. However in some cases the x values are meaningless, they simply represent categories, and you do not want to plot the points against such x values. Such an x-axis that ignores the x-values and simply uses the positional value of a point in a series is said to be indexed. Enable this using the [Indexed](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartControl.html#Syncfusion_Windows_Forms_Chart_ChartControl_Indexed) property. @@ -125,7 +127,7 @@ Me.chartControl1.Indexed = True {% endhighlight %} {% endtabs %} -### Interval +#### Interval By default, the category axis labels are displayed with a fixed interval of 1. This can be customized using the [DesiredIntervals](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_DesiredIntervals) property. @@ -143,7 +145,7 @@ Me.chartControl1.PrimaryXAxis.DesiredIntervals = 2 {% endhighlight %} {% endtabs %} -## DateTime Axis +### DateTime Axis The DateTime axis is used to plot DateTime values along the axis. It is widely used in financial and time-series charts. Set the [ValueType](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_ValueType) property to `DateTime` to enable this axis. @@ -163,7 +165,7 @@ Me.chartControl1.PrimaryXAxis.DateTimeFormat = "MMM-yy" {% endhighlight %} {% endtabs %} -### Interval +#### Interval In the DateTime axis, the interval can be customized using the [DesiredIntervals](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_DesiredIntervals) and [IntervalType](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_IntervalType) properties. For example, setting DesiredIntervals to 6 and IntervalType to Months will use 6 months as the interval. @@ -185,7 +187,7 @@ Me.chartControl1.PrimaryXAxis.DesiredIntervals = 6 {% endhighlight %} {% endtabs %} -### Customizing the Range +#### Customizing the Range The [DateTimeRange](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_DateTimeRange) property is used to set the minimum and maximum date-time values for the axis range. Set [RangeType](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_RangeType) to `Set` to apply a custom range. @@ -209,7 +211,7 @@ Me.chartControl1.PrimaryXAxis.DateTimeRange = New ChartDateTimeRange( {% endhighlight %} {% endtabs %} -## Logarithmic Axis +### Logarithmic Axis The Logarithmic axis uses a logarithmic scale and is ideal for visualizing data with large value differences. It can be applied to both X and Y axes. Set the [ValueType](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_ValueType) property to Logarithmic to enable this axis. @@ -227,7 +229,7 @@ Me.chartControl1.PrimaryYAxis.ValueType = ChartValueType.Logarithmic {% endhighlight %} {% endtabs %} -### Interval +#### Interval The axis interval can be customized using the [DesiredIntervals](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_DesiredIntervals) property. By default, the interval is calculated based on the minimum and maximum values of the provided data. @@ -247,7 +249,7 @@ Me.chartControl1.PrimaryYAxis.DesiredIntervals = 5 {% endhighlight %} {% endtabs %} -### Customizing the Range +#### Customizing the Range The range of the logarithmic axis can be customized using the [Range](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_Range) property. By default, the range is automatically calculated to align with the provided data. @@ -267,7 +269,7 @@ Me.chartControl1.PrimaryYAxis.Range = New MinMaxInfo(100, 100000, 10) {% endhighlight %} {% endtabs %} -### Customizing the Logarithmic Base +#### Customizing the Logarithmic Base The logarithmic base can be customized using the [LogBase](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_LogBase) property. The default logarithmic base value is 10. @@ -287,7 +289,7 @@ Me.chartControl1.PrimaryYAxis.LogBase = 2 {% endhighlight %} {% endtabs %} -## Custom Axis +### Custom Axis The Custom axis allows you to define fully user-controlled labels on the axis. Instead of relying on the automatically generated labels, you can specify your own label text, position, color, and font using the [Labels](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_Labels) collection. Set the [TickLabelsDrawingMode](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_TickLabelsDrawingMode) to `UserMode` to use only the custom labels, or `BothUserAndAutomaticMode` to display both. @@ -345,7 +347,7 @@ Me.chartControl1.PrimaryXAxis.Labels.Add(New ChartAxisLabel( ## Axis Positioning -### Inverted Axis +#### Inverted Axis The Inverted axis plots data in the opposite direction — from top to bottom for the Y-axis and from right to left for the X-axis. To enable this, set the [Inversed](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_Inversed) property to `true`. @@ -367,7 +369,7 @@ Me.chartControl1.PrimaryYAxis.Inversed = True ![Inverted axis in Windows Forms Chart](Chart-Axes_images/Chart-Axes_img4.jpeg) -### Opposed Axis +#### Opposed Axis By default, the X-axis is rendered at the bottom and the Y-axis is rendered on the left. Setting the [OpposedPosition](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_OpposedPosition) property to `true` moves the axis to the opposite side — the X-axis appears at the top and the Y-axis appears on the right. @@ -396,3 +398,507 @@ Me.chartControl1.PrimaryYAxis.OpposedPosition = True ![Opposed axis in Windows Forms Chart](Chart-Axes_images/Chart-Axes_img5.jpeg) N> The [OpposedPosition](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_OpposedPosition) and [Inversed](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_Inversed) properties can be combined to implement right-to-left chart layouts. + +## Multiple Axes + +When plotting multiple series on a single chart, each series may need its own X or Y axis. You can add additional axes to the chart by instantiating a [ChartAxis](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html) and adding it to the **Axes** collection. Then, assign the newly created axis as the X or Y axis of a specific series. + +### Adding a Secondary X-Axis + +The following code shows how to add a secondary X-axis and assign it to a series. + +{% tabs %} +{% highlight c# %} + +// Create a new instance of the chart axis +private ChartAxis secXAxis = new ChartAxis(); + +// Add the secondary axis to the chart axes collection +this.chartControl1.Axes.Add(this.secXAxis); + +// Assign this axis to a specific series +this.chartControl1.Series[1].XAxis = this.secXAxis; + +{% endhighlight %} + +{% highlight vb %} + +' Create a new instance of the chart axis +Private secXAxis As ChartAxis = New ChartAxis() + +' Add the secondary axis to the chart axes collection +Me.chartControl1.Axes.Add(Me.secXAxis) + +' Assign this axis to a specific series +Me.chartControl1.Series(1).XAxis = Me.secXAxis + +{% endhighlight %} +{% endtabs %} + +![Multiple X-axis in Windows Forms Chart](Chart-Axes_images/Chart-Axes_img6.jpeg) + +### Adding a Secondary Y-Axis + +For a secondary Y-axis, set the [Orientation](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html) to `Vertical` before adding it to the collection. + +{% tabs %} +{% highlight c# %} + +// Create a new instance of the chart axis +private ChartAxis secYAxis = new ChartAxis(); + +// Set orientation to Vertical for a Y-axis +secYAxis.Orientation = ChartOrientation.Vertical; + +// Add the secondary axis to the chart axes collection +this.chartControl1.Axes.Add(this.secYAxis); + +// Assign this axis to a specific series +this.chartControl1.Series[1].YAxis = this.secYAxis; + +{% endhighlight %} + +{% highlight vb %} + +' Create a new instance of the chart axis +Private secYAxis As ChartAxis = New ChartAxis() + +' Set orientation to Vertical for a Y-axis +Me.secYAxis.Orientation = ChartOrientation.Vertical + +' Add the secondary axis to the chart axes collection +Me.chartControl1.Axes.Add(Me.secYAxis) + +' Assign this axis to a specific series +Me.chartControl1.Series(1).YAxis = Me.secYAxis + +{% endhighlight %} +{% endtabs %} + +![Multiple Y-axis in Windows Forms Chart](Chart-Axes_images/Chart-Axes_img6_1.jpg) + +### Opposed Position + +By default, the additional axis is rendered right next to the corresponding primary axis. To render it on the opposite side, set the [OpposedPosition](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_OpposedPosition) property to `true`. + +{% tabs %} +{% highlight c# %} + +secYAxis.OpposedPosition = true; + +{% endhighlight %} + +{% highlight vb %} + +secYAxis.OpposedPosition = True + +{% endhighlight %} +{% endtabs %} + +![Opposed position in Windows Forms Chart](Chart-Axes_images/Chart-Axes_img7.jpeg) + +### Stacked or Side-by-Side Position + +By default, secondary axes are rendered stacked (parallel) to the primary axis, controlled by the [XAxesLayoutMode](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartArea.html#Syncfusion_Windows_Forms_Chart_ChartArea_XAxesLayoutMode) and [YAxesLayoutMode](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartArea.html#Syncfusion_Windows_Forms_Chart_ChartArea_YAxesLayoutMode) properties, which are set to `Stacking` by default. + +To render the secondary axis side-by-side with the primary axis, set these properties to `SideBySide`. + +{% tabs %} +{% highlight c# %} + +this.chartControl1.ChartArea.XAxesLayoutMode = ChartAxesLayoutMode.SideBySide; + +{% endhighlight %} + +{% highlight vb %} + +Me.chartControl1.ChartArea.XAxesLayoutMode = ChartAxesLayoutMode.SideBySide + +{% endhighlight %} +{% endtabs %} + +![Side-by-side axes in Windows Forms Chart](Chart-Axes_images/Chart-Axes_img8.jpeg) + +### ChartAxesLayouts + +You can combine stacking and side-by-side layouts when using multiple axes. This allows you to position axes independently for example, placing two Y-axes on the same side and a third on the opposite side using [ChartAxisLayout](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxisLayout.html). + +{% tabs %} +{% highlight c# %} + +// Create chart axes +ChartAxis axis = this.chartControl1.PrimaryYAxis; +ChartAxis axis0 = new ChartAxis(ChartOrientation.Vertical); +ChartAxis axis1 = new ChartAxis(ChartOrientation.Vertical); + +// Add axes to the chart +chartControl1.Axes.Add(axis0); +chartControl1.Axes.Add(axis1); + +// Create a layout and add all Y-axes to it (including primary) +ChartAxisLayout layout1 = new ChartAxisLayout(); +layout1.Axes.Add(axis); +layout1.Axes.Add(axis0); +layout1.Axes.Add(axis1); + +// Add the layout to ChartArea +chartControl1.ChartArea.YLayouts.Add(layout1); + +{% endhighlight %} + +{% highlight vb %} + +' Create chart axes +Dim axis As ChartAxis = Me.chartControl1.PrimaryYAxis +Dim axis0 As New ChartAxis(ChartOrientation.Vertical) +Dim axis1 As New ChartAxis(ChartOrientation.Vertical) + +' Add axes to the chart +chartControl1.Axes.Add(axis0) +chartControl1.Axes.Add(axis1) + +' Create a layout and add all Y-axes to it (including primary) +Dim layout1 As New ChartAxisLayout() +layout1.Axes.Add(axis) +layout1.Axes.Add(axis0) +layout1.Axes.Add(axis1) + +' Add the layout to ChartArea +chartControl1.ChartArea.YLayouts.Add(layout1) + +{% endhighlight %} +{% endtabs %} + +![ChartAxesLayouts in Windows Forms Chart](Chart-Axes_images/Chart-Axes_img9.jpeg) + +N> All axes with the same orientation must be added to [ChartAxisLayout](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxisLayout.html) (including the PrimaryAxis) as illustrated in the above code snippet. + +## Axis Range and Intervals + +### Automatic range calculation + +By default the axis range and intervals are calculated by the chart's built-in "nice range" engine. It computes human-friendly minimum, maximum and interval values from your data (for example, converting a raw range like 1.2–3.7 into 0–5 with 0.5 intervals). This behavior is controlled by the [ChartAxis.RangeType](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_RangeType) property which is set to `Auto` by default. + +### Specifying custom ranges + +To set a fixed range, set `RangeType` to `Set` and use the `Range` (for double) or `DateTimeRange` (for DateTime) properties. + + + + + + + + +
+ChartAxis Property +Applies to RangeType +Applies to ValueType +Description
+ +{{'[Range](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_Range)'| markdownify }} + +Set +Double +Specifies the minimum, maximum and interval for the axis. Use this if the data points are of double type.
+{{'[DateTimeRange](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_DateTimeRange)'| markdownify }} + +Set +DateTime +Specifies the start and end dates and interval time for the axis. Use this if the data points are of datetime type.
+ +{% tabs %} +{% highlight c# %} +// Double axis: set min, max and interval +this.chartControl1.PrimaryYAxis.RangeType = ChartAxisRangeType.Set; +this.chartControl1.PrimaryYAxis.Range = new MinMaxInfo(0, 500, 50); + +// DateTime axis: set start, end and interval +this.chartControl1.PrimaryXAxis.RangeType = ChartAxisRangeType.Set; +this.chartControl1.PrimaryXAxis.ValueType = ChartValueType.DateTime; +this.chartControl1.PrimaryXAxis.DateTimeRange = new ChartDateTimeRange( + new DateTime(2024, 1, 1), new DateTime(2024, 12, 31), 1, ChartDateTimeIntervalType.Months); +{% endhighlight %} + +{% highlight vb %} +' Double axis: set min, max and interval +Me.chartControl1.PrimaryYAxis.RangeType = ChartAxisRangeType.Set +Me.chartControl1.PrimaryYAxis.Range = New MinMaxInfo(0, 500, 50) + +' DateTime axis: set start, end and interval +Me.chartControl1.PrimaryXAxis.RangeType = ChartAxisRangeType.Set +Me.chartControl1.PrimaryXAxis.ValueType = ChartValueType.DateTime +Me.chartControl1.PrimaryXAxis.DateTimeRange = New ChartDateTimeRange( + New DateTime(2024, 1, 1), New DateTime(2024, 12, 31), 1, ChartDateTimeIntervalType.Months) +{% endhighlight %} +{% endtabs %} + +### Changing intervals + +Use `DesiredIntervals` to request a preferred number of intervals for the automatic engine. For DateTime axes, use `IntervalType` to specify Years/Months/Days etc. + + + + + + + + +
+ChartAxis Property +Applies to RangeType +Applies to ValueType +Description
+ +{{'[DesiredIntervals](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_DesiredIntervals)'| markdownify }} + +Auto +Double, DateTime +A request for the nice-range calculation engine to come up with a nice range with so many intervals. The engine will only use this setting as a guidance. Default value is 6.
+{{'[IntervalType](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_IntervalType)'| markdownify }} + +Auto +DateTime +Specifies whether the interval that gets calculated should be in Years, Months, Weeks, Days, Hours, Minutes, Seconds or Milliseconds. This setting is used only if the ValueType of the axis is set to DateTime. Default value is Auto.
+ +{% tabs %} +{% highlight c# %} +this.chartControl1.PrimaryXAxis.DesiredIntervals = 6; +this.chartControl1.PrimaryXAxis.IntervalType = ChartDateTimeIntervalType.Months; // DateTime axis only +{% endhighlight %} + +{% highlight vb %} +Me.chartControl1.PrimaryXAxis.DesiredIntervals = 6 +Me.chartControl1.PrimaryXAxis.IntervalType = ChartDateTimeIntervalType.Months ' DateTime axis only +{% endhighlight %} +{% endtabs %} + +### Changing origin and padding + +- `PreferZero` (Auto range): prefers zero as a boundary when reasonable. +- `ForceZero`: forces one boundary to be zero. +- `CustomOrigin`, `Origin`, `OriginDate`: set a custom origin when `CustomOrigin` is enabled. +- `RangePaddingType`: control padding before/after data points. + + + + + + + + + + + + + + + + + + + + + + + + +
+ChartAxis Property +Applies to RangeType +Applies to ValueType +Description
+ +{{'[PreferZero](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_PreferZero)'| markdownify }} + +Auto +Double +Indicates whether one boundary of the calculated range should be tweaked to zero. Such tweaking will happen only if zero is within a reasonable distance from the calculated boundary. To ensure that one boundary is always zero, use the ForceZero setting instead. Default value is true.
+{{'[ForceZero](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_ForceZero)'| markdownify }} + +Auto +Double +Indicates whether one boundary of the calculated range should always be tweaked to zero. Default value is true.
+{{'[CustomOrigin](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_CustomOrigin)'| markdownify }} + +Auto and Set +Double, DateTime +Lets you use the properties Origin and OriginDate below. Default value is false.
+{{'[Origin](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_Origin)'| markdownify }} + +Auto and Set +Double +Lets you specify a custom origin (double value) for the axis. Use this property when the data points are of double type. The interval and range will then be calculated automatically. Remember to set CustomOrigin to true. Default value is 0.0.
+{{'[OriginDate](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_OriginDate)'| markdownify }} + +Auto and Set +DateTime +Lets you specify a custom origin (double value) for the axis. Use this property when the data points are of double type. The interval and range will then be calculated automatically. Remember to set CustomOrigin to true. Default value is DateTime.MinValue.
+{{'[Offset](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_Offset)'| markdownify }} + +Auto and Set +Double and DateTime +Specifies the offset that should be applied to the automatically calculated start of the range.
+{{'[DateTimeOffset](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_DateTimeOffset)'| markdownify }} + +Auto +DateTime +Specifies the offset that should be applied to the automatically calculated start of the range.
+{{'[Offset](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_Offset)'| markdownify }} + +Set +DateTime +Use this instead of Offset if you want to specify the OffsetType (see below).
+{{'[DateTimeInterval.OffsetType](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartDateTimeInterval.html#Syncfusion_Windows_Forms_Chart_ChartDateTimeInterval_OffsetType)'| markdownify }} + +Set +DateTime +Specifies the type of offset specified above. Could be Auto, Years, Months, Weeks, Days, Hours, Minutes, Seconds or Milliseconds.
+{{'[RangePaddingType](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_RangePaddingType)'| markdownify }} + +Auto +Double and DateTime +Specifies if there should be any padding applied between the points and the axes, before and after the datapoints.
+ +{% tabs %} +{% highlight c# %} +this.chartControl1.PrimaryYAxis.PreferZero = true; +this.chartControl1.PrimaryYAxis.ForceZero = false; +this.chartControl1.PrimaryYAxis.CustomOrigin = true; +this.chartControl1.PrimaryYAxis.Origin = 10; +this.chartControl1.PrimaryYAxis.RangePaddingType = ChartRangePaddingType.Round; +{% endhighlight %} + +{% highlight vb %} +Me.chartControl1.PrimaryYAxis.PreferZero = True +Me.chartControl1.PrimaryYAxis.ForceZero = False +Me.chartControl1.PrimaryYAxis.CustomOrigin = True +Me.chartControl1.PrimaryYAxis.Origin = 10 +Me.chartControl1.PrimaryYAxis.RangePaddingType = ChartRangePaddingType.Round +{% endhighlight %} +{% endtabs %} + +N> These settings let you fine-tune how the axis range and intervals are calculated and displayed. + +## Axis Dimensions + +The axis starting point, length, and the full bounding rectangle (axis line and its labels) can be customized using the following properties. + +| ChartAxis Property | Description | +|---|---| +| [Location](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_Location) | Specifies the starting location of the axis. `LocationType` must be set to `Set` to use this property. | +| [LocationType](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_LocationType) | `Set` uses the `Location` property; `Auto` (default) calculated automatically to avoid label overlap; `AntiLabelCut` positions axis to prevent labels from being clipped. | +| [AutoSize](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_AutoSize) | Specifies whether the axis length is calculated automatically or set via the `Size` property. | +| [Size](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_Size) | Specifies the length of the axis. `AutoSize` must be `false`. Changing the size expands or shrinks the rendered intervals. | +| [Rect](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_Rect) | Specifies the rectangle that encompasses the axis and its labels, giving full control over position and size. | + +### Custom axis location + +{% tabs %} +{% highlight c# %} + +this.chartControl1.PrimaryYAxis.LocationType = Syncfusion.Windows.Forms.Chart.ChartAxisLocationType.Set; +this.chartControl1.PrimaryYAxis.Location = new PointF(15, 200); + +{% endhighlight %} + +{% highlight vb %} + +Me.chartControl1.PrimaryYAxis.LocationType = Syncfusion.Windows.Forms.Chart.ChartAxisLocationType.Set +Me.chartControl1.PrimaryYAxis.Location = New PointF(15, 200) + +{% endhighlight %} +{% endtabs %} + +![Custom axis location in Windows Forms Chart](Chart-Axes_images/Chart-Axes_img11.jpeg) + +### Custom axis size + +{% tabs %} +{% highlight c# %} + +this.chartControl1.PrimaryXAxis.AutoSize = false; +this.chartControl1.PrimaryXAxis.Size = new Size(50, 20); + +{% endhighlight %} + +{% highlight vb %} + +Me.chartControl1.PrimaryXAxis.AutoSize = False +Me.chartControl1.PrimaryXAxis.Size = New Size(50, 20) + +{% endhighlight %} +{% endtabs %} + +![Custom axis size in Windows Forms Chart](Chart-Axes_images/Chart-Axes_img12.jpeg) + +![Custom axis size in Windows Forms Chart](Chart-Axes_images/Chart-Axes_img13.jpeg) + +## Axis Crossing Support + +The WinForms Chart control allows the X and Y axes to intersect at a desired point. The intersection point is determined by the value specified in the [Crossing](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_Crossing) property for each axis. This is useful when charting data that contains a large mix of negative and positive values and you want to reposition the default axis location. + + + + + + +
+Property +Description +Type +Data Type +Reference links
+ +{{'[Crossing](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html#Syncfusion_Windows_Forms_Chart_ChartAxis_Crossing)'| markdownify }} + +Specifies the point of intersect for X and Y axis based on the given data point value. +Server side +Double +NA
+ +Set the `Crossing` value on `PrimaryXAxis` to the Y-axis value where the X-axis should cross, and vice versa. + +{% tabs %} +{% highlight c# %} + +this.chartControl1.PrimaryXAxis.Crossing = 150; +this.chartControl1.PrimaryYAxis.Crossing = 6; +this.chartControl1.Series3D = true; + +{% endhighlight %} + +{% highlight vb %} + +Me.chartControl1.PrimaryXAxis.Crossing = 150 +Me.chartControl1.PrimaryYAxis.Crossing = 6 +Me.chartControl1.Series3D = True + +{% endhighlight %} +{% endtabs %} + +![Axis crossing support in Windows Forms Chart](Chart-Axes_images/Chart-Axes_img36.png) + +## Exclude Invisible Series Range + +By default, hidden (invisible) series still influence the auto-calculated axis range. To exclude hidden series from the range calculation, set the [ExcludeInvisibleSeriesRange](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartAxis.html) property to `true` on the corresponding axis. + +{% tabs %} +{% highlight c# %} + +this.chartControl1.PrimaryXAxis.ExcludeInvisibleSeriesRange = true; +this.chartControl1.PrimaryYAxis.ExcludeInvisibleSeriesRange = true; + +{% endhighlight %} + +{% highlight vb %} + +Me.chartControl1.PrimaryXAxis.ExcludeInvisibleSeriesRange = True +Me.chartControl1.PrimaryYAxis.ExcludeInvisibleSeriesRange = True + +{% endhighlight %} +{% endtabs %} + +When a series is hidden and `ExcludeInvisibleSeriesRange` is `true`, the axis range is recalculated using only the visible series, resulting in a tighter, more meaningful scale. + +![Exclude invisible series range in Windows Forms Chart](Chart-Axes_images/Chart-Axes_img41.png)