From 67be122cb826c9865c75ac5db93eaabe566dfb68 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joakim=20Dang=C3=A5rden?= <Joakim.Dangarden@swegon.com>
Date: Wed, 12 Nov 2025 23:01:13 +0100
Subject: [PATCH] Added support for Radial bar labels

---
 .../RadialBarCharts/BarLabels.razor           | 44 +++++++++++++
 .../RadialBarCharts/RadialBarCharts.razor     |  6 ++
 .../Internal/Converters/DataPointConverter.cs | 62 +++++++++----------
 .../Models/ApexChartOptions.cs                | 49 ++++++++++++++-
 4 files changed, 128 insertions(+), 33 deletions(-)
 create mode 100644 docs/BlazorApexCharts.Docs/Components/ChartTypes/RadialBarCharts/BarLabels.razor

diff --git a/docs/BlazorApexCharts.Docs/Components/ChartTypes/RadialBarCharts/BarLabels.razor b/docs/BlazorApexCharts.Docs/Components/ChartTypes/RadialBarCharts/BarLabels.razor
new file mode 100644
index 00000000..a52a0f79
--- /dev/null
+++ b/docs/BlazorApexCharts.Docs/Components/ChartTypes/RadialBarCharts/BarLabels.razor
@@ -0,0 +1,44 @@
+
+<DemoContainer>
+	<ApexChart TItem="Order"
+			   Title="Bar Lables"
+			   Options="options">
+
+		<ApexPointSeries TItem="Order"
+						 Items="orders"
+						 SeriesType=SeriesType.RadialBar
+						 Name="Gross Value"
+						 XValue="@(e => e.Country)"
+						 YAggregate="@(e => decimal.Round(e.Average(e => e.DiscountPercentage)))"
+						 OrderByDescending="e=>e.Y" />
+	</ApexChart>
+</DemoContainer>
+
+
+
+@code {
+	private List<Order> orders = SampleData.GetOrders();
+	private ApexChartOptions<Order> options = new();
+
+	protected override void OnInitialized()
+	{
+		options.PlotOptions = new PlotOptions
+		{
+			RadialBar = new PlotOptionsRadialBar
+			{
+				OffsetY= 0,
+				StartAngle= 0,
+				EndAngle = 270,
+				BarLabels = new RadialBarBarLabels
+				{
+					Enabled = true,
+					OffsetX = -12,
+					UseSeriesColors = true,
+					Formatter = @"function(seriesName, opts) {
+						return seriesName + ': ' + opts.w.globals.series[opts.seriesIndex];
+						}"
+				},
+			}
+		};
+	}
+}
diff --git a/docs/BlazorApexCharts.Docs/Components/ChartTypes/RadialBarCharts/RadialBarCharts.razor b/docs/BlazorApexCharts.Docs/Components/ChartTypes/RadialBarCharts/RadialBarCharts.razor
index 5e0f93a3..5301bee0 100644
--- a/docs/BlazorApexCharts.Docs/Components/ChartTypes/RadialBarCharts/RadialBarCharts.razor
+++ b/docs/BlazorApexCharts.Docs/Components/ChartTypes/RadialBarCharts/RadialBarCharts.razor
@@ -14,4 +14,10 @@
         </Snippet>
     </CodeSnippet>
 
+      <CodeSnippet Title="Bar Labels" ClassName=@typeof(BarLabels).ToString()>
+        <Snippet>
+            <BarLabels />
+        </Snippet>
+    </CodeSnippet>
+
 </DocExamples>
diff --git a/src/Blazor-ApexCharts/Internal/Converters/DataPointConverter.cs b/src/Blazor-ApexCharts/Internal/Converters/DataPointConverter.cs
index 40ab26b2..dd2b6753 100644
--- a/src/Blazor-ApexCharts/Internal/Converters/DataPointConverter.cs
+++ b/src/Blazor-ApexCharts/Internal/Converters/DataPointConverter.cs
@@ -1,34 +1,34 @@
-using System;
-using System.Text.Json;
-using System.Text.Json.Serialization;
-
-namespace ApexCharts.Internal
-{
+using System;
+using System.Text.Json;
+using System.Text.Json.Serialization;
+
+namespace ApexCharts.Internal
+{
     /// <summary>
     /// Facilitates serialization of <see cref="IDataPoint{TItem}"/>
     /// </summary>
-    /// <typeparam name="T"></typeparam>
-    internal class DataPointConverter<T> : JsonConverter<IDataPoint<T>>
-    {
-        /// <inheritdoc/>
-        /// <exception cref="NotImplementedException"></exception>
-        public override IDataPoint<T> Read(ref Utf8JsonReader reader, Type typeToConvert, JsonSerializerOptions options)
-        {
-            throw new NotImplementedException();
-        }
-
-        /// <inheritdoc/>
-        public override void Write(Utf8JsonWriter writer, IDataPoint<T> value, JsonSerializerOptions options)
-        {
-            if (value == null)
-            {
-                JsonSerializer.Serialize(writer, (IDataPoint<T>)null, options);
-            }
-            else
-            {
-                var type = value.GetType();
-                JsonSerializer.Serialize(writer, value, type, options);
-            }
-        }
-    }
-}
+    /// <typeparam name="T"></typeparam>
+    internal class DataPointConverter<T> : JsonConverter<IDataPoint<T>>
+    {
+        /// <inheritdoc/>
+        /// <exception cref="NotImplementedException"></exception>
+        public override IDataPoint<T> Read(ref Utf8JsonReader reader, Type typeToConvert, JsonSerializerOptions options)
+        {
+            throw new NotImplementedException();
+        }
+
+        /// <inheritdoc/>
+        public override void Write(Utf8JsonWriter writer, IDataPoint<T> value, JsonSerializerOptions options)
+        {
+            if (value == null)
+            {
+                JsonSerializer.Serialize(writer, (IDataPoint<T>)null, options);
+            }
+            else
+            {
+                var type = value.GetType();
+                JsonSerializer.Serialize(writer, value, type, options);
+            }
+        }
+    }
+}
diff --git a/src/Blazor-ApexCharts/Models/ApexChartOptions.cs b/src/Blazor-ApexCharts/Models/ApexChartOptions.cs
index 7237485f..11114728 100644
--- a/src/Blazor-ApexCharts/Models/ApexChartOptions.cs
+++ b/src/Blazor-ApexCharts/Models/ApexChartOptions.cs
@@ -1,5 +1,6 @@
 using System;
 using System.Collections.Generic;
+using System.Runtime.CompilerServices;
 using System.Runtime.Serialization;
 using System.Text.Json.Serialization;
 using ApexCharts.Internal;
@@ -3637,6 +3638,9 @@ public class PlotOptionsRadialBar
         /// <inheritdoc cref="ApexCharts.RadialBarDataLabels" />
         public RadialBarDataLabels DataLabels { get; set; }
 
+        /// <inheritdoc cref="ApexCharts.RadialBarBarLabels" />
+        public RadialBarBarLabels BarLabels { get; set; }
+
         /// <summary>
         /// Angle to which the radialBars should end. The sum of the startAngle and endAngle should not exceed 360.
         /// </summary>
@@ -3669,10 +3673,51 @@ public class PlotOptionsRadialBar
         public Track Track { get; set; }
     }
 
+
     /// <summary>
-    /// Defines how to style labels for the radial bar chart
+    /// Defines how to style Bar labels for the radial bar chart
     /// </summary>
-    public class RadialBarDataLabels
+    public class RadialBarBarLabels
+    {
+        /// <summary>
+        /// Enabled
+        /// </summary>
+        public bool Enabled { get; set; } = true;
+       
+        /// <summary>
+        /// Use colors from the series
+        /// </summary>
+        public bool? UseSeriesColors { get; set; }
+
+        /// <summary>
+        /// X-Offset for bar labels
+        /// </summary>
+        public int? OffsetX { get; set; }
+
+        /// <summary>
+        /// Fontsize for the label
+        /// </summary>
+        public string FontSize { get; set; }
+
+
+        /// <summary>
+        /// To format the Label of the bar
+		/// <code>
+		///         formatter: function(seriesName, opts) {
+		///             return value
+		///         }
+		/// </code>
+        /// </summary>
+        [JsonConverter(typeof(FunctionStringConverter))]
+        public string Formatter { get; set; }
+
+
+    }
+
+        /// <summary>
+        /// Defines how to style labels for the radial bar chart
+        /// </summary>
+        public class RadialBarDataLabels
     {
         /// <inheritdoc cref="ApexCharts.RadialBarDataLabelsName" />
         public RadialBarDataLabelsName Name { get; set; }