From ae4ece82f24ae6689ba0fd157fa7fff0ad9119f6 Mon Sep 17 00:00:00 2001
From: Wim Soetens <wim.soetens@uzgent.be>
Date: Fri, 3 Jul 2026 12:30:33 +0200
Subject: [PATCH] Sets the width of the axis in pixels. If not specified, the
 width is calculated automatically. Setting a fixed width can help reduce
 unnecessary spacing when using multiple Y-axes.

---
 Radzen.Blazor/AxisBase.cs                             | 10 ++++++++--
 Radzen.Blazor/RadzenValueAxis.razor                   |  4 ++--
 Radzen.Blazor/Rendering/AxisMeasurer.cs               |  8 ++++++--
 RadzenBlazorDemos/Pages/MultipleAxesChartConfig.razor |  2 +-
 4 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/Radzen.Blazor/AxisBase.cs b/Radzen.Blazor/AxisBase.cs
index cd4618aa6..3c341fdd9 100644
--- a/Radzen.Blazor/AxisBase.cs
+++ b/Radzen.Blazor/AxisBase.cs
@@ -1,6 +1,6 @@
+using Microsoft.AspNetCore.Components;
 using System;
 using System.Globalization;
-using Microsoft.AspNetCore.Components;
 
 namespace Radzen.Blazor
 {
@@ -82,6 +82,12 @@ namespace Radzen.Blazor
         [Parameter]
         public int TickDistance { get; set; } = 100;
 
+        /// <summary>
+        /// Gets or sets the width of the axis in pixels. If not set, the width is calculated automatically based on the axis content.
+        /// </summary>
+        [Parameter]
+        public int? Width { get; set; }
+
         /// <summary>
         /// Specifies the minimum value of the axis.
         /// </summary>
@@ -141,7 +147,7 @@ namespace Radzen.Blazor
         [Parameter]
         public object? CrossesAt { get; set; }
 
-    /// <summary>
+        /// <summary>
         /// Specifies the label rotation angle in degrees. Set to <c>null</c> by default which means no rotation is applied. Has higher precedence than <see cref="LabelAutoRotation"/>.
         /// </summary>
         [Parameter]
diff --git a/Radzen.Blazor/RadzenValueAxis.razor b/Radzen.Blazor/RadzenValueAxis.razor
index e7b946121..0ce101fd3 100644
--- a/Radzen.Blazor/RadzenValueAxis.razor
+++ b/Radzen.Blazor/RadzenValueAxis.razor
@@ -3,7 +3,7 @@
 
 @inherits AxisBase
 <CascadingValue Value="@this">
-  @ChildContent
+    @ChildContent
 </CascadingValue>
 @code {
     [Parameter]
@@ -21,7 +21,7 @@
         }
         else
         {
-            return AxisMeasurer.YAxis(chart.ValueScale, chart.ValueAxis, Title);
+            return AxisMeasurer.YAxis(chart.ValueScale, this, Title);
         }
     }
 
diff --git a/Radzen.Blazor/Rendering/AxisMeasurer.cs b/Radzen.Blazor/Rendering/AxisMeasurer.cs
index bf3f9c570..88c964ec6 100644
--- a/Radzen.Blazor/Rendering/AxisMeasurer.cs
+++ b/Radzen.Blazor/Rendering/AxisMeasurer.cs
@@ -1,6 +1,4 @@
-using Microsoft.AspNetCore.Components;
 using System;
-using System.ComponentModel;
 
 namespace Radzen.Blazor.Rendering
 {
@@ -22,6 +20,12 @@ namespace Radzen.Blazor.Rendering
             ArgumentNullException.ThrowIfNull(axis);
             ArgumentNullException.ThrowIfNull(title);
 
+            //We can use the axis width if it is set, otherwise we need to calculate the width based on the ticks and title
+            if (axis.Width.HasValue)
+            {
+                return axis.Width.Value;
+            }
+
             var ticks = scale.Ticks(axis.TickDistance);
 
             double length = 0;
diff --git a/RadzenBlazorDemos/Pages/MultipleAxesChartConfig.razor b/RadzenBlazorDemos/Pages/MultipleAxesChartConfig.razor
index 577b98da8..f1c70054e 100644
--- a/RadzenBlazorDemos/Pages/MultipleAxesChartConfig.razor
+++ b/RadzenBlazorDemos/Pages/MultipleAxesChartConfig.razor
@@ -13,7 +13,7 @@
                     <RadzenAxisTitle Text="Revenue ($)" />
                     <RadzenGridLines Visible="true" />
                 </RadzenValueAxis>
-                <RadzenValueAxis Name="orders">
+                <RadzenValueAxis Width="50" Name="orders">
                     <RadzenAxisTitle Text="Order Count" />
                 </RadzenValueAxis>
                 <RadzenLegend Position="LegendPosition.Bottom" />