From a6bea4781950a9e10a46272ac9ca9281659d1f54 Mon Sep 17 00:00:00 2001
From: gvreddy04 <gvreddy04@gmail.com>
Date: Wed, 18 Mar 2026 08:17:14 +0530
Subject: [PATCH 1/3] Add chart data point click event support

Introduced ChartClickEventArgs to encapsulate click event details. Added OnClick EventCallback to chart components (BarChart, LineChart, PieChart, etc.). Updated JS to wire up Chart.js onClick handler and invoke Blazor method with event data. Added demo for bar chart click event. Ensured proper disposal of DotNetObjectReference.
---
 .../BarCharts/BarChartDocumentation.razor     |   3 +
 .../BarChart_Demo_06_Click_Event.razor        |  54 ++++++++
 .../Components/Charts/BarChart.razor.cs       |   4 +-
 .../Components/Charts/BlazorBootstrapChart.cs |  51 ++++++-
 .../Components/Charts/DoughnutChart.razor.cs  |   4 +-
 .../Components/Charts/LineChart.razor.cs      |   4 +-
 .../Components/Charts/PieChart.razor.cs       |   4 +-
 .../Components/Charts/PolarAreaChart.razor.cs |   4 +-
 .../Components/Charts/RadarChart.razor.cs     |   4 +-
 .../Components/Charts/ScatterChart.razor.cs   |   4 +-
 .../EventArguments/ChartClickEventArgs.cs     |  48 +++++++
 blazorbootstrap/wwwroot/blazor.bootstrap.js   | 125 +++++++++++++-----
 12 files changed, 257 insertions(+), 52 deletions(-)
 create mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_06_Click_Event.razor
 create mode 100644 blazorbootstrap/EventArguments/ChartClickEventArgs.cs

diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChartDocumentation.razor
index 937d2a660..8eb2308ef 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChartDocumentation.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChartDocumentation.razor
@@ -41,6 +41,9 @@
 <Section Size="HeadingSize.H4" Name="Data labels" PageUrl="@pageUrl" Link="data-labels" />
 <Demo Type="typeof(BarChart_Demo_05_Stacked_BarChart_with_Datalabels)" Tabs="true" />
 
+<Section Size="HeadingSize.H4" Name="Click event" PageUrl="@pageUrl" Link="click-event" />
+<Demo Type="typeof(BarChart_Demo_06_Click_Event)" Tabs="true" />
+
 <ChartJSCallout />
 
 @code {
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_06_Click_Event.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_06_Click_Event.razor
new file mode 100644
index 000000000..8ff9bc039
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_06_Click_Event.razor
@@ -0,0 +1,54 @@
+<BarChart @ref="barChart" OnClick="OnClick" Width="500" Height="300" />
+
+<div class="mt-3">
+    <strong>Selected item:</strong> @selectedItemMessage
+</div>
+
+@code {
+    private BarChart barChart = default!;
+    private BarChartOptions barChartOptions = default!;
+    private ChartData chartData = default!;
+    private string selectedItemMessage = "Click a bar to view its details.";
+
+    protected override void OnInitialized()
+    {
+        chartData = new ChartData
+            {
+                Labels = new List<string> { "January", "February", "March", "April", "May", "June" },
+                Datasets = new List<IChartDataset>
+                {
+                    new BarChartDataset
+                    {
+                        Label = "Product A",
+                        Data = new List<double?> { 65, 59, 80, 81, 56, 55 },
+                        BackgroundColor = new List<string> { ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbString() },
+                        BorderColor = new List<string> { ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbString() },
+                        BorderWidth = new List<double> { 0 }
+                    },
+                    new BarChartDataset
+                    {
+                        Label = "Product B",
+                        Data = new List<double?> { 28, 48, 40, 19, 86, 27 },
+                        BackgroundColor = new List<string> { ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbString() },
+                        BorderColor = new List<string> { ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbString() },
+                        BorderWidth = new List<double> { 0 }
+                    }
+                }
+            };
+
+        barChartOptions = new BarChartOptions { Responsive = true };
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+            await barChart.InitializeAsync(chartData, barChartOptions);
+
+        await base.OnAfterRenderAsync(firstRender);
+    }
+
+    private void OnClick(ChartClickEventArgs eventArgs)
+    {
+        selectedItemMessage = $"Dataset: {eventArgs.DatasetLabel}, Label: {eventArgs.Label}, Value: {eventArgs.Value}";
+    }
+}
diff --git a/blazorbootstrap/Components/Charts/BarChart.razor.cs b/blazorbootstrap/Components/Charts/BarChart.razor.cs
index 26db0541c..a8da064a6 100644
--- a/blazorbootstrap/Components/Charts/BarChart.razor.cs
+++ b/blazorbootstrap/Components/Charts/BarChart.razor.cs
@@ -111,7 +111,7 @@ public override async Task InitializeAsync(ChartData chartData, IChartOptions ch
         {
             var datasets = chartData.Datasets.OfType<BarChartDataset>();
             var data = new { chartData.Labels, Datasets = datasets };
-            await SafeInvokeVoidAsync($"{_jsObjectName}.initialize", Id, GetChartType(), data, (BarChartOptions)chartOptions, plugins);
+            await SafeInvokeVoidAsync($"{_jsObjectName}.initialize", Id, GetChartType(), data, (BarChartOptions)chartOptions, plugins, ObjRef);
         }
     }
 
@@ -121,7 +121,7 @@ public override async Task UpdateAsync(ChartData chartData, IChartOptions chartO
         {
             var datasets = chartData.Datasets.OfType<BarChartDataset>();
             var data = new { chartData.Labels, Datasets = datasets };
-            await SafeInvokeVoidAsync($"{_jsObjectName}.update", Id, GetChartType(), data, (BarChartOptions)chartOptions);
+            await SafeInvokeVoidAsync($"{_jsObjectName}.update", Id, GetChartType(), data, (BarChartOptions)chartOptions, ObjRef);
         }
     }
 
diff --git a/blazorbootstrap/Components/Charts/BlazorBootstrapChart.cs b/blazorbootstrap/Components/Charts/BlazorBootstrapChart.cs
index d68d90ea5..8f7aff354 100644
--- a/blazorbootstrap/Components/Charts/BlazorBootstrapChart.cs
+++ b/blazorbootstrap/Components/Charts/BlazorBootstrapChart.cs
@@ -6,6 +6,8 @@ public class BlazorBootstrapChart : BlazorBootstrapComponentBase, IDisposable, I
 
     internal ChartType chartType;
 
+    private DotNetObjectReference<BlazorBootstrapChart>? objRef;
+
     #endregion
 
     #region Methods
@@ -47,14 +49,25 @@ public virtual async Task InitializeAsync(ChartData chartData, IChartOptions cha
             var _data = GetChartDataObject(chartData);
 
             if (chartType == ChartType.Bar)
-                await SafeInvokeVoidAsync("window.blazorChart.bar.initialize", Id, GetChartType(), _data, (BarChartOptions)chartOptions, plugins);
+                await SafeInvokeVoidAsync("window.blazorChart.bar.initialize", Id, GetChartType(), _data, (BarChartOptions)chartOptions, plugins, ObjRef);
             else if (chartType == ChartType.Line)
-                await SafeInvokeVoidAsync("window.blazorChart.line.initialize", Id, GetChartType(), _data, (LineChartOptions)chartOptions, plugins);
+                await SafeInvokeVoidAsync("window.blazorChart.line.initialize", Id, GetChartType(), _data, (LineChartOptions)chartOptions, plugins, ObjRef);
             else
-                await SafeInvokeVoidAsync("window.blazorChart.initialize", Id, GetChartType(), _data, chartOptions, plugins);
+                await SafeInvokeVoidAsync("window.blazorChart.initialize", Id, GetChartType(), _data, chartOptions, plugins, ObjRef);
         }
     }
 
+    [JSInvokable]
+    public async Task HandleClickAsync(ChartClickEventArgs eventArgs) => await OnClick.InvokeAsync(eventArgs);
+
+    /// <inheritdoc />
+    protected override void OnInitialized()
+    {
+        objRef ??= DotNetObjectReference.Create(this);
+
+        base.OnInitialized();
+    }
+
     //public async Task Render() { }
 
     //public async Task Reset() { }
@@ -86,14 +99,30 @@ public virtual async Task UpdateAsync(ChartData chartData, IChartOptions chartOp
             var data = GetChartDataObject(chartData);
 
             if (chartType == ChartType.Bar)
-                await SafeInvokeVoidAsync("window.blazorChart.bar.update", Id, GetChartType(), data, (BarChartOptions)chartOptions);
+                await SafeInvokeVoidAsync("window.blazorChart.bar.update", Id, GetChartType(), data, (BarChartOptions)chartOptions, ObjRef);
             else if (chartType == ChartType.Line)
-                await SafeInvokeVoidAsync("window.blazorChart.line.update", Id, GetChartType(), data, (LineChartOptions)chartOptions);
+                await SafeInvokeVoidAsync("window.blazorChart.line.update", Id, GetChartType(), data, (LineChartOptions)chartOptions, ObjRef);
             else
-                await SafeInvokeVoidAsync("window.blazorChart.update", Id, GetChartType(), data, chartOptions);
+                await SafeInvokeVoidAsync("window.blazorChart.update", Id, GetChartType(), data, chartOptions, ObjRef);
         }
     }
 
+    protected override void Dispose(bool disposing)
+    {
+        if (disposing)
+            objRef?.Dispose();
+
+        base.Dispose(disposing);
+    }
+
+    protected override ValueTask DisposeAsyncCore(bool disposing)
+    {
+        if (disposing)
+            objRef?.Dispose();
+
+        return base.DisposeAsyncCore(disposing);
+    }
+
     /// <summary>
     /// Update only data labels and values. If animation is enabled, this will animate the datapoints.
     /// Changes to the options will not be applied.
@@ -169,6 +198,16 @@ private object GetChartDataObject(ChartData chartData)
 
     internal string ContainerStyle => GetChartContainerSizeAsStyle();
 
+    /// <summary>
+    /// Fired when a chart data point is clicked.
+    /// </summary>
+    [AddedVersion("4.0.0")]
+    [Description("Fired when a chart data point is clicked.")]
+    [Parameter]
+    public EventCallback<ChartClickEventArgs> OnClick { get; set; }
+
+    protected DotNetObjectReference<BlazorBootstrapChart>? ObjRef => objRef;
+
     /// <summary>
     /// Gets or sets chart container height.
     /// The default unit of measure is <see cref="Unit.Px" />.
diff --git a/blazorbootstrap/Components/Charts/DoughnutChart.razor.cs b/blazorbootstrap/Components/Charts/DoughnutChart.razor.cs
index 1e28b6c52..3774f0cf3 100644
--- a/blazorbootstrap/Components/Charts/DoughnutChart.razor.cs
+++ b/blazorbootstrap/Components/Charts/DoughnutChart.razor.cs
@@ -117,7 +117,7 @@ public override async Task InitializeAsync(ChartData chartData, IChartOptions ch
         {
             var datasets = chartData.Datasets.OfType<DoughnutChartDataset>();
             var data = new { chartData.Labels, Datasets = datasets };
-            await SafeInvokeVoidAsync($"{_jsObjectName}.initialize", Id, GetChartType(), data, (DoughnutChartOptions)chartOptions, plugins);
+            await SafeInvokeVoidAsync($"{_jsObjectName}.initialize", Id, GetChartType(), data, (DoughnutChartOptions)chartOptions, plugins, ObjRef);
         }
     }
 
@@ -127,7 +127,7 @@ public override async Task UpdateAsync(ChartData chartData, IChartOptions chartO
         {
             var datasets = chartData.Datasets.OfType<DoughnutChartDataset>();
             var data = new { chartData.Labels, Datasets = datasets };
-            await SafeInvokeVoidAsync($"{_jsObjectName}.update", Id, GetChartType(), data, (DoughnutChartOptions)chartOptions);
+            await SafeInvokeVoidAsync($"{_jsObjectName}.update", Id, GetChartType(), data, (DoughnutChartOptions)chartOptions, ObjRef);
         }
     }
 
diff --git a/blazorbootstrap/Components/Charts/LineChart.razor.cs b/blazorbootstrap/Components/Charts/LineChart.razor.cs
index a68334578..48378d852 100644
--- a/blazorbootstrap/Components/Charts/LineChart.razor.cs
+++ b/blazorbootstrap/Components/Charts/LineChart.razor.cs
@@ -112,7 +112,7 @@ public override async Task InitializeAsync(ChartData chartData, IChartOptions ch
 
         var datasets = chartData.Datasets.OfType<LineChartDataset>();
         var data = new { chartData.Labels, Datasets = datasets };
-        await SafeInvokeVoidAsync("window.blazorChart.line.initialize", Id, GetChartType(), data, (LineChartOptions)chartOptions, plugins);
+        await SafeInvokeVoidAsync("window.blazorChart.line.initialize", Id, GetChartType(), data, (LineChartOptions)chartOptions, plugins, ObjRef);
     }
 
     public override async Task UpdateAsync(ChartData chartData, IChartOptions chartOptions)
@@ -128,7 +128,7 @@ public override async Task UpdateAsync(ChartData chartData, IChartOptions chartO
 
         var datasets = chartData.Datasets.OfType<LineChartDataset>();
         var data = new { chartData.Labels, Datasets = datasets };
-        await SafeInvokeVoidAsync("window.blazorChart.line.update", Id, GetChartType(), data, (LineChartOptions)chartOptions);
+        await SafeInvokeVoidAsync("window.blazorChart.line.update", Id, GetChartType(), data, (LineChartOptions)chartOptions, ObjRef);
     }
 
     #endregion
diff --git a/blazorbootstrap/Components/Charts/PieChart.razor.cs b/blazorbootstrap/Components/Charts/PieChart.razor.cs
index 9c9f6d52b..edb16f2df 100644
--- a/blazorbootstrap/Components/Charts/PieChart.razor.cs
+++ b/blazorbootstrap/Components/Charts/PieChart.razor.cs
@@ -117,7 +117,7 @@ public override async Task InitializeAsync(ChartData chartData, IChartOptions ch
         {
             var datasets = chartData.Datasets.OfType<PieChartDataset>();
             var data = new { chartData.Labels, Datasets = datasets };
-            await SafeInvokeVoidAsync($"{_jsObjectName}.initialize", Id, GetChartType(), data, (PieChartOptions)chartOptions, plugins);
+            await SafeInvokeVoidAsync($"{_jsObjectName}.initialize", Id, GetChartType(), data, (PieChartOptions)chartOptions, plugins, ObjRef);
         }
     }
 
@@ -127,7 +127,7 @@ public override async Task UpdateAsync(ChartData chartData, IChartOptions chartO
         {
             var datasets = chartData.Datasets.OfType<PieChartDataset>();
             var data = new { chartData.Labels, Datasets = datasets };
-            await SafeInvokeVoidAsync($"{_jsObjectName}.update", Id, GetChartType(), data, (PieChartOptions)chartOptions);
+            await SafeInvokeVoidAsync($"{_jsObjectName}.update", Id, GetChartType(), data, (PieChartOptions)chartOptions, ObjRef);
         }
     }
 
diff --git a/blazorbootstrap/Components/Charts/PolarAreaChart.razor.cs b/blazorbootstrap/Components/Charts/PolarAreaChart.razor.cs
index 993ec1f99..58d88266c 100644
--- a/blazorbootstrap/Components/Charts/PolarAreaChart.razor.cs
+++ b/blazorbootstrap/Components/Charts/PolarAreaChart.razor.cs
@@ -112,7 +112,7 @@ public override async Task InitializeAsync(ChartData chartData, IChartOptions ch
         {
             var datasets = chartData.Datasets.OfType<PolarAreaChartDataset>();
             var data = new { chartData.Labels, Datasets = datasets };
-            await SafeInvokeVoidAsync($"{_jsObjectName}.initialize", Id, GetChartType(), data, (PolarAreaChartOptions)chartOptions, plugins);
+            await SafeInvokeVoidAsync($"{_jsObjectName}.initialize", Id, GetChartType(), data, (PolarAreaChartOptions)chartOptions, plugins, ObjRef);
         }
     }
 
@@ -122,7 +122,7 @@ public override async Task UpdateAsync(ChartData chartData, IChartOptions chartO
         {
             var datasets = chartData.Datasets.OfType<PolarAreaChartDataset>();
             var data = new { chartData.Labels, Datasets = datasets };
-            await SafeInvokeVoidAsync($"{_jsObjectName}.update", Id, GetChartType(), data, (PolarAreaChartOptions)chartOptions);
+            await SafeInvokeVoidAsync($"{_jsObjectName}.update", Id, GetChartType(), data, (PolarAreaChartOptions)chartOptions, ObjRef);
         }
     }
 
diff --git a/blazorbootstrap/Components/Charts/RadarChart.razor.cs b/blazorbootstrap/Components/Charts/RadarChart.razor.cs
index d727a2e6f..664b2937b 100644
--- a/blazorbootstrap/Components/Charts/RadarChart.razor.cs
+++ b/blazorbootstrap/Components/Charts/RadarChart.razor.cs
@@ -112,7 +112,7 @@ public override async Task InitializeAsync(ChartData chartData, IChartOptions ch
         {
             var datasets = chartData.Datasets.OfType<RadarChartDataset>();
             var data = new { chartData.Labels, Datasets = datasets };
-            await SafeInvokeVoidAsync($"{_jsObjectName}.initialize", Id, GetChartType(), data, (RadarChartOptions)chartOptions, plugins);
+            await SafeInvokeVoidAsync($"{_jsObjectName}.initialize", Id, GetChartType(), data, (RadarChartOptions)chartOptions, plugins, ObjRef);
         }
     }
 
@@ -122,7 +122,7 @@ public override async Task UpdateAsync(ChartData chartData, IChartOptions chartO
         {
             var datasets = chartData.Datasets.OfType<RadarChartDataset>();
             var data = new { chartData.Labels, Datasets = datasets };
-            await SafeInvokeVoidAsync($"{_jsObjectName}.update", Id, GetChartType(), data, (RadarChartOptions)chartOptions);
+            await SafeInvokeVoidAsync($"{_jsObjectName}.update", Id, GetChartType(), data, (RadarChartOptions)chartOptions, ObjRef);
         }
     }
 
diff --git a/blazorbootstrap/Components/Charts/ScatterChart.razor.cs b/blazorbootstrap/Components/Charts/ScatterChart.razor.cs
index df7271d7c..9dbd84f3b 100644
--- a/blazorbootstrap/Components/Charts/ScatterChart.razor.cs
+++ b/blazorbootstrap/Components/Charts/ScatterChart.razor.cs
@@ -119,7 +119,7 @@ public override async Task InitializeAsync(ChartData chartData, IChartOptions ch
 
         var datasets = chartData.Datasets.OfType<ScatterChartDataset>();
         var data = new { chartData.Labels, Datasets = datasets };
-        await SafeInvokeVoidAsync($"{_jsObjectName}.initialize", Id, GetChartType(), data, (ScatterChartOptions)chartOptions, plugins);
+        await SafeInvokeVoidAsync($"{_jsObjectName}.initialize", Id, GetChartType(), data, (ScatterChartOptions)chartOptions, plugins, ObjRef);
     }
 
     public override async Task UpdateAsync(ChartData chartData, IChartOptions chartOptions)
@@ -135,7 +135,7 @@ public override async Task UpdateAsync(ChartData chartData, IChartOptions chartO
 
         var datasets = chartData.Datasets.OfType<ScatterChartDataset>();
         var data = new { chartData.Labels, Datasets = datasets };
-        await SafeInvokeVoidAsync($"{_jsObjectName}.update", Id, GetChartType(), data, (ScatterChartOptions)chartOptions);
+        await SafeInvokeVoidAsync($"{_jsObjectName}.update", Id, GetChartType(), data, (ScatterChartOptions)chartOptions, ObjRef);
     }
 
     #endregion
diff --git a/blazorbootstrap/EventArguments/ChartClickEventArgs.cs b/blazorbootstrap/EventArguments/ChartClickEventArgs.cs
new file mode 100644
index 000000000..84d4a5c35
--- /dev/null
+++ b/blazorbootstrap/EventArguments/ChartClickEventArgs.cs
@@ -0,0 +1,48 @@
+namespace BlazorBootstrap;
+
+public class ChartClickEventArgs
+{
+    #region Properties, Indexers
+
+    /// <summary>
+    /// Gets or sets the dataset index of the clicked chart item.
+    /// </summary>
+    [AddedVersion("4.0.0")]
+    [DefaultValue(0)]
+    [Description("Gets or sets the dataset index of the clicked chart item.")]
+    public int DatasetIndex { get; set; }
+
+    /// <summary>
+    /// Gets or sets the dataset label of the clicked chart item.
+    /// </summary>
+    [AddedVersion("4.0.0")]
+    [DefaultValue(null)]
+    [Description("Gets or sets the dataset label of the clicked chart item.")]
+    public string? DatasetLabel { get; set; }
+
+    /// <summary>
+    /// Gets or sets the data index of the clicked chart item.
+    /// </summary>
+    [AddedVersion("4.0.0")]
+    [DefaultValue(0)]
+    [Description("Gets or sets the data index of the clicked chart item.")]
+    public int Index { get; set; }
+
+    /// <summary>
+    /// Gets or sets the data label of the clicked chart item.
+    /// </summary>
+    [AddedVersion("4.0.0")]
+    [DefaultValue(null)]
+    [Description("Gets or sets the data label of the clicked chart item.")]
+    public string? Label { get; set; }
+
+    /// <summary>
+    /// Gets or sets the raw value of the clicked chart item.
+    /// </summary>
+    [AddedVersion("4.0.0")]
+    [DefaultValue(null)]
+    [Description("Gets or sets the raw value of the clicked chart item.")]
+    public System.Text.Json.JsonElement? Value { get; set; }
+
+    #endregion
+}
diff --git a/blazorbootstrap/wwwroot/blazor.bootstrap.js b/blazorbootstrap/wwwroot/blazor.bootstrap.js
index 545eef466..7594cf3a2 100644
--- a/blazorbootstrap/wwwroot/blazor.bootstrap.js
+++ b/blazorbootstrap/wwwroot/blazor.bootstrap.js
@@ -993,10 +993,41 @@ window.blazorBootstrap = {
 }
 
 window.blazorChart = {
-    create: (elementId, type, data, options, plugins) => {
+    setOnClickHandler: (options, dotNetHelper) => {
+        if (!options || !dotNetHelper)
+            return;
+
+        const onClick = options.onClick;
+
+        options.onClick = function (event, activeElements, chart) {
+            if (typeof onClick === 'function')
+                onClick.call(this, event, activeElements, chart);
+
+            if (!activeElements || activeElements.length === 0 || !chart)
+                return;
+
+            const activeElement = activeElements[0];
+            const datasetIndex = activeElement.datasetIndex;
+            const index = activeElement.index;
+            const dataset = chart.data?.datasets?.[datasetIndex];
+            const label = chart.data?.labels?.[index] ?? null;
+            const value = dataset?.data?.[index] ?? null;
+
+            dotNetHelper.invokeMethodAsync('HandleClickAsync', {
+                datasetIndex: datasetIndex,
+                datasetLabel: dataset?.label ?? null,
+                index: index,
+                label: label,
+                value: value
+            }).catch(() => { });
+        };
+    },
+    create: (elementId, type, data, options, plugins, dotNetHelper) => {
         let chartEl = document.getElementById(elementId);
         let _plugins = [];
 
+        window.blazorChart.setOnClickHandler(options, dotNetHelper);
+
         if (plugins && plugins.length > 0) {
             // register `ChartDataLabels` plugin
             if (plugins.includes('ChartDataLabels')) {
@@ -1026,11 +1057,11 @@ window.blazorChart = {
 
         return chart;
     },
-    initialize: (elementId, type, data, options, plugins) => {
+    initialize: (elementId, type, data, options, plugins, dotNetHelper) => {
         let chart = window.blazorChart.get(elementId);
         if (chart) return;
         else
-            window.blazorChart.create(elementId, type, data, options, plugins);
+            window.blazorChart.create(elementId, type, data, options, plugins, dotNetHelper);
     },
     resize: (elementId, width, height) => {
         let chart = window.blazorChart.get(elementId);
@@ -1039,7 +1070,7 @@ window.blazorChart = {
             chart.canvas.parentNode.style.width = width;
         }
     },
-    update: (elementId, type, data, options) => {
+    update: (elementId, type, data, options, dotNetHelper) => {
         let chart = window.blazorChart.get(elementId);
         if (chart) {
             if (chart.config.plugins && chart.config.plugins.findIndex(x => x.id == 'datalabels') > -1) {
@@ -1049,6 +1080,8 @@ window.blazorChart = {
                 };
             }
 
+            window.blazorChart.setOnClickHandler(options, dotNetHelper);
+
             chart.data = data;
             chart.options = options;
             chart.update();
@@ -1122,10 +1155,12 @@ window.blazorChart.bar = {
             chart.update();
         }
     },
-    create: (elementId, type, data, options, plugins) => {
+    create: (elementId, type, data, options, plugins, dotNetHelper) => {
         let chartEl = document.getElementById(elementId);
         let _plugins = [];
 
+        window.blazorChart.setOnClickHandler(options, dotNetHelper);
+
         if (plugins && plugins.length > 0) {
             // register `ChartDataLabels` plugin
             if (plugins.includes('ChartDataLabels')) {
@@ -1155,11 +1190,11 @@ window.blazorChart.bar = {
 
         return chart;
     },
-    initialize: (elementId, type, data, options, plugins) => {
+    initialize: (elementId, type, data, options, plugins, dotNetHelper) => {
         let chart = window.blazorChart.bar.get(elementId);
         if (chart) return;
         else
-            window.blazorChart.bar.create(elementId, type, data, options, plugins);
+            window.blazorChart.bar.create(elementId, type, data, options, plugins, dotNetHelper);
     },
     resize: (elementId, width, height) => {
         let chart = window.blazorChart.bar.get(elementId);
@@ -1168,7 +1203,7 @@ window.blazorChart.bar = {
             chart.canvas.parentNode.style.width = width;
         }
     },
-    update: (elementId, type, data, options) => {
+    update: (elementId, type, data, options, dotNetHelper) => {
         let chart = window.blazorChart.bar.get(elementId);
         if (chart) {
             if (chart.config.plugins && chart.config.plugins.findIndex(x => x.id == 'datalabels') > -1) {
@@ -1178,6 +1213,8 @@ window.blazorChart.bar = {
                 };
             }
 
+            window.blazorChart.setOnClickHandler(options, dotNetHelper);
+
             chart.data = data;
             chart.options = options;
             chart.update();
@@ -1252,10 +1289,12 @@ window.blazorChart.doughnut = {
             chart.update();
         }
     },
-    create: (elementId, type, data, options, plugins) => {
+    create: (elementId, type, data, options, plugins, dotNetHelper) => {
         let chartEl = document.getElementById(elementId);
         let _plugins = [];
 
+        window.blazorChart.setOnClickHandler(options, dotNetHelper);
+
         if (plugins && plugins.length > 0) {
             // register `ChartDataLabels` plugin
             if (plugins.includes('ChartDataLabels')) {
@@ -1290,11 +1329,11 @@ window.blazorChart.doughnut = {
 
         return chart;
     },
-    initialize: (elementId, type, data, options, plugins) => {
+    initialize: (elementId, type, data, options, plugins, dotNetHelper) => {
         let chart = window.blazorChart.doughnut.get(elementId);
         if (chart) return;
         else
-            window.blazorChart.doughnut.create(elementId, type, data, options, plugins);
+            window.blazorChart.doughnut.create(elementId, type, data, options, plugins, dotNetHelper);
     },
     resize: (elementId, width, height) => {
         let chart = window.blazorChart.doughnut.get(elementId);
@@ -1303,7 +1342,7 @@ window.blazorChart.doughnut = {
             chart.canvas.parentNode.style.width = width;
         }
     },
-    update: (elementId, type, data, options) => {
+    update: (elementId, type, data, options, dotNetHelper) => {
         let chart = window.blazorChart.doughnut.get(elementId);
         if (chart) {
             if (chart.config.plugins && chart.config.plugins.findIndex(x => x.id == 'datalabels') > -1) {
@@ -1313,6 +1352,8 @@ window.blazorChart.doughnut = {
                 };
             }
 
+            window.blazorChart.setOnClickHandler(options, dotNetHelper);
+
             chart.data = data;
             chart.options = options;
             chart.update();
@@ -1386,10 +1427,12 @@ window.blazorChart.line = {
             chart.update();
         }
     },
-    create: (elementId, type, data, options, plugins) => {
+    create: (elementId, type, data, options, plugins, dotNetHelper) => {
         let chartEl = document.getElementById(elementId);
         let _plugins = [];
 
+        window.blazorChart.setOnClickHandler(options, dotNetHelper);
+
         if (plugins && plugins.length > 0) {
             // register `ChartDataLabels` plugin
             if (plugins.includes('ChartDataLabels')) {
@@ -1457,12 +1500,12 @@ window.blazorChart.line = {
 
         return chart;
     },
-    initialize: (elementId, type, data, options, plugins) => {
+    initialize: (elementId, type, data, options, plugins, dotNetHelper) => {
         let chart = window.blazorChart.line.get(elementId);
         if (chart)
             return;
         else
-            window.blazorChart.line.create(elementId, type, data, options, plugins);
+            window.blazorChart.line.create(elementId, type, data, options, plugins, dotNetHelper);
     },
     resize: (elementId, width, height) => {
         let chart = window.blazorChart.line.get(elementId);
@@ -1471,7 +1514,7 @@ window.blazorChart.line = {
             chart.canvas.parentNode.style.width = width;
         }
     },
-    update: (elementId, type, data, options) => {
+    update: (elementId, type, data, options, dotNetHelper) => {
         let chart = window.blazorChart.line.get(elementId);
         if (chart) {
             if (chart.config.plugins && chart.config.plugins.findIndex(x => x.id == 'datalabels') > -1) {
@@ -1481,6 +1524,8 @@ window.blazorChart.line = {
                 };
             }
 
+            window.blazorChart.setOnClickHandler(options, dotNetHelper);
+
             chart.data = data;
             chart.options = options;
             chart.update();
@@ -1555,10 +1600,12 @@ window.blazorChart.pie = {
             chart.update();
         }
     },
-    create: (elementId, type, data, options, plugins) => {
+    create: (elementId, type, data, options, plugins, dotNetHelper) => {
         let chartEl = document.getElementById(elementId);
         let _plugins = [];
 
+        window.blazorChart.setOnClickHandler(options, dotNetHelper);
+
         if (plugins && plugins.length > 0) {
             // register `ChartDataLabels` plugin
             if (plugins.includes('ChartDataLabels')) {
@@ -1593,11 +1640,11 @@ window.blazorChart.pie = {
 
         return chart;
     },
-    initialize: (elementId, type, data, options, plugins) => {
+    initialize: (elementId, type, data, options, plugins, dotNetHelper) => {
         let chart = window.blazorChart.pie.get(elementId);
         if (chart) return;
         else
-            window.blazorChart.pie.create(elementId, type, data, options, plugins);
+            window.blazorChart.pie.create(elementId, type, data, options, plugins, dotNetHelper);
     },
     resize: (elementId, width, height) => {
         let chart = window.blazorChart.pie.get(elementId);
@@ -1606,7 +1653,7 @@ window.blazorChart.pie = {
             chart.canvas.parentNode.style.width = width;
         }
     },
-    update: (elementId, type, data, options) => {
+    update: (elementId, type, data, options, dotNetHelper) => {
         let chart = window.blazorChart.pie.get(elementId);
         if (chart) {
             if (chart.config.plugins && chart.config.plugins.findIndex(x => x.id == 'datalabels') > -1) {
@@ -1616,6 +1663,8 @@ window.blazorChart.pie = {
                 };
             }
 
+            window.blazorChart.setOnClickHandler(options, dotNetHelper);
+
             chart.data = data;
             chart.options = options;
             chart.update();
@@ -1690,10 +1739,12 @@ window.blazorChart.polarArea = {
             chart.update();
         }
     },
-    create: (elementId, type, data, options, plugins) => {
+    create: (elementId, type, data, options, plugins, dotNetHelper) => {
         let chartEl = document.getElementById(elementId);
         let _plugins = [];
 
+        window.blazorChart.setOnClickHandler(options, dotNetHelper);
+
         if (plugins && plugins.length > 0) {
             // register `ChartDataLabels` plugin
             if (plugins.includes('ChartDataLabels')) {
@@ -1729,11 +1780,11 @@ window.blazorChart.polarArea = {
 
         return chart;
     },
-    initialize: (elementId, type, data, options, plugins) => {
+    initialize: (elementId, type, data, options, plugins, dotNetHelper) => {
         let chart = window.blazorChart.polarArea.get(elementId);
         if (chart) return;
         else
-            window.blazorChart.polarArea.create(elementId, type, data, options, plugins);
+            window.blazorChart.polarArea.create(elementId, type, data, options, plugins, dotNetHelper);
     },
     resize: (elementId, width, height) => {
         let chart = window.blazorChart.polarArea.get(elementId);
@@ -1742,7 +1793,7 @@ window.blazorChart.polarArea = {
             chart.canvas.parentNode.style.width = width;
         }
     },
-    update: (elementId, type, data, options) => {
+    update: (elementId, type, data, options, dotNetHelper) => {
         let chart = window.blazorChart.polarArea.get(elementId);
         if (chart) {
             if (chart.config.plugins && chart.config.plugins.findIndex(x => x.id == 'datalabels') > -1) {
@@ -1752,6 +1803,8 @@ window.blazorChart.polarArea = {
                 };
             }
 
+            window.blazorChart.setOnClickHandler(options, dotNetHelper);
+
             chart.data = data;
             chart.options = options;
             chart.update();
@@ -1825,10 +1878,12 @@ window.blazorChart.radar = {
             chart.update();
         }
     },
-    create: (elementId, type, data, options, plugins) => {
+    create: (elementId, type, data, options, plugins, dotNetHelper) => {
         let chartEl = document.getElementById(elementId);
         let _plugins = [];
 
+        window.blazorChart.setOnClickHandler(options, dotNetHelper);
+
         if (plugins && plugins.length > 0) {
             // register `ChartDataLabels` plugin
             if (plugins.includes('ChartDataLabels')) {
@@ -1864,11 +1919,11 @@ window.blazorChart.radar = {
 
         return chart;
     },
-    initialize: (elementId, type, data, options, plugins) => {
+    initialize: (elementId, type, data, options, plugins, dotNetHelper) => {
         let chart = window.blazorChart.radar.get(elementId);
         if (chart) return;
         else
-            window.blazorChart.radar.create(elementId, type, data, options, plugins);
+            window.blazorChart.radar.create(elementId, type, data, options, plugins, dotNetHelper);
     },
     resize: (elementId, width, height) => {
         let chart = window.blazorChart.radar.get(elementId);
@@ -1877,7 +1932,7 @@ window.blazorChart.radar = {
             chart.canvas.parentNode.style.width = width;
         }
     },
-    update: (elementId, type, data, options) => {
+    update: (elementId, type, data, options, dotNetHelper) => {
         let chart = window.blazorChart.radar.get(elementId);
         if (chart) {
             if (chart.config.plugins && chart.config.plugins.findIndex(x => x.id == 'datalabels') > -1) {
@@ -1887,6 +1942,8 @@ window.blazorChart.radar = {
                 };
             }
 
+            window.blazorChart.setOnClickHandler(options, dotNetHelper);
+
             chart.data = data;
             chart.options = options;
             chart.update();
@@ -1960,10 +2017,12 @@ window.blazorChart.scatter = {
             chart.update();
         }
     },
-    create: (elementId, type, data, options, plugins) => {
+    create: (elementId, type, data, options, plugins, dotNetHelper) => {
         let chartEl = document.getElementById(elementId);
         let _plugins = [];
 
+        window.blazorChart.setOnClickHandler(options, dotNetHelper);
+
         if (plugins && plugins.length > 0) {
             // register `ChartDataLabels` plugin
             if (plugins.includes('ChartDataLabels')) {
@@ -1999,11 +2058,11 @@ window.blazorChart.scatter = {
 
         return chart;
     },
-    initialize: (elementId, type, data, options, plugins) => {
+    initialize: (elementId, type, data, options, plugins, dotNetHelper) => {
         let chart = window.blazorChart.scatter.get(elementId);
         if (chart) return;
         else
-            window.blazorChart.scatter.create(elementId, type, data, options, plugins);
+            window.blazorChart.scatter.create(elementId, type, data, options, plugins, dotNetHelper);
     },
     resize: (elementId, width, height) => {
         let chart = window.blazorChart.scatter.get(elementId);
@@ -2012,7 +2071,7 @@ window.blazorChart.scatter = {
             chart.canvas.parentNode.style.width = width;
         }
     },
-    update: (elementId, type, data, options) => {
+    update: (elementId, type, data, options, dotNetHelper) => {
         let chart = window.blazorChart.scatter.get(elementId);
         if (chart) {
             if (chart.config.plugins && chart.config.plugins.findIndex(x => x.id == 'datalabels') > -1) {
@@ -2022,6 +2081,8 @@ window.blazorChart.scatter = {
                 };
             }
 
+            window.blazorChart.setOnClickHandler(options, dotNetHelper);
+
             chart.data = data;
             chart.options = options;
             chart.update();

From aff1918abd2d3f70637fbffe42bb0dd045e9e352 Mon Sep 17 00:00:00 2001
From: gvreddy04 <gvreddy04@gmail.com>
Date: Wed, 18 Mar 2026 09:02:53 +0530
Subject: [PATCH 2/3] Add "Click event" demos for all chart types in docs

Added new "Click event" demo sections to the documentation pages for Doughnut, Line, Pie, Polar Area, Radar, and Scatter charts. Each demo shows how to handle chart element click events, display selected item details, and update the UI accordingly. New Razor demo components were created for each chart type, and documentation was updated to include and link to these interactive examples. This enhances guidance for handling user interactions in ChartJS-based Blazor charts.
---
 .../DoughnutChartDocumentation.razor          |  4 ++
 .../DoughnutChart_Demo_03_Click_Event.razor   | 50 +++++++++++++
 .../LineCharts/LineChartDocumentation.razor   |  4 ++
 .../LineChart_Demo_07_Click_Event.razor       | 62 ++++++++++++++++
 .../PieCharts/PieChartDocumentation.razor     |  4 ++
 .../PieChart_Demo_04_Click_Event.razor        | 50 +++++++++++++
 .../PolarAreaChartDocumentation.razor         |  4 ++
 .../PolarAreaChart_Demo_02_Click_Event.razor  | 59 +++++++++++++++
 .../RadarCharts/RadarChartDocumentation.razor |  4 ++
 .../RadarChart_Demo_02_Click_Event.razor      | 58 +++++++++++++++
 .../ScatterChartDocumentation.razor           |  4 ++
 .../ScatterChart_Demo_03_Click_Event.razor    | 71 +++++++++++++++++++
 12 files changed, 374 insertions(+)
 create mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/DoughnutCharts/DoughnutChart_Demo_03_Click_Event.razor
 create mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChart_Demo_07_Click_Event.razor
 create mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PieCharts/PieChart_Demo_04_Click_Event.razor
 create mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PolarAreaCharts/PolarAreaChart_Demo_02_Click_Event.razor
 create mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/RadarCharts/RadarChart_Demo_02_Click_Event.razor
 create mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/ScatterCharts/ScatterChart_Demo_03_Click_Event.razor

diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/DoughnutCharts/DoughnutChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/DoughnutCharts/DoughnutChartDocumentation.razor
index 0da6ee990..ff728ac8f 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/DoughnutCharts/DoughnutChartDocumentation.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/DoughnutCharts/DoughnutChartDocumentation.razor
@@ -31,6 +31,10 @@
     <Demo Type="typeof(DoughnutChart_Demo_02_Datalabels)" Tabs="true" />
 </Section>
 
+<Section Size="HeadingSize.H4" Name="Click event" PageUrl="@pageUrl" Link="click-event">
+    <Demo Type="typeof(DoughnutChart_Demo_03_Click_Event)" Tabs="true" />
+</Section>
+
 <ChartJSCallout />
 
 @code {
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/DoughnutCharts/DoughnutChart_Demo_03_Click_Event.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/DoughnutCharts/DoughnutChart_Demo_03_Click_Event.razor
new file mode 100644
index 000000000..a5b5021b1
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/DoughnutCharts/DoughnutChart_Demo_03_Click_Event.razor
@@ -0,0 +1,50 @@
+<DoughnutChart @ref="doughnutChart" OnClick="OnClick" Width="500" />
+
+<div class="mt-3">
+    <strong>Selected item:</strong> @selectedItemMessage
+</div>
+
+@code {
+    private DoughnutChart doughnutChart = default!;
+    private DoughnutChartOptions doughnutChartOptions = default!;
+    private ChartData chartData = default!;
+    private string selectedItemMessage = "Click a slice to view its details.";
+
+    protected override void OnInitialized()
+    {
+        chartData = new ChartData
+            {
+                Labels = new List<string> { "Chrome", "Edge", "Firefox", "Safari" },
+                Datasets = new List<IChartDataset>
+                {
+                    new DoughnutChartDataset
+                    {
+                        Label = "Browsers",
+                        Data = new List<double?> { 62, 18, 11, 9 },
+                        BackgroundColor = new List<string>
+                        {
+                            ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbString(),
+                            ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbString(),
+                            ColorUtility.CategoricalTwelveColors[2].ToColor().ToRgbString(),
+                            ColorUtility.CategoricalTwelveColors[3].ToColor().ToRgbString()
+                        }
+                    }
+                }
+            };
+
+        doughnutChartOptions = new DoughnutChartOptions { Responsive = true };
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+            await doughnutChart.InitializeAsync(chartData, doughnutChartOptions);
+
+        await base.OnAfterRenderAsync(firstRender);
+    }
+
+    private void OnClick(ChartClickEventArgs eventArgs)
+    {
+        selectedItemMessage = $"Dataset: {eventArgs.DatasetLabel}, Label: {eventArgs.Label}, Value: {eventArgs.Value}";
+    }
+}
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChartDocumentation.razor
index 3e1e96621..f62dfbc3b 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChartDocumentation.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChartDocumentation.razor
@@ -53,6 +53,10 @@
     <Demo Type="typeof(LineChart_Demo_06_Dataset_Fill)" Tabs="true" />
 </Section>
 
+<Section Size="HeadingSize.H4" Name="Click event" PageUrl="@pageUrl" Link="click-event">
+    <Demo Type="typeof(LineChart_Demo_07_Click_Event)" Tabs="true" />
+</Section>
+
 <ChartJSCallout />
 
 @code {
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChart_Demo_07_Click_Event.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChart_Demo_07_Click_Event.razor
new file mode 100644
index 000000000..d317a3f72
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChart_Demo_07_Click_Event.razor
@@ -0,0 +1,62 @@
+<div class="container-fluid overflow-x-auto">
+    <LineChart @ref="lineChart" OnClick="OnClick" Width="800" />
+</div>
+
+<div class="mt-3">
+    <strong>Selected item:</strong> @selectedItemMessage
+</div>
+
+@code {
+    private LineChart lineChart = default!;
+    private LineChartOptions lineChartOptions = default!;
+    private ChartData chartData = default!;
+    private string selectedItemMessage = "Click a point to view its details.";
+
+    protected override void OnInitialized()
+    {
+        chartData = new ChartData
+            {
+                Labels = new List<string> { "January", "February", "March", "April", "May", "June" },
+                Datasets = new List<IChartDataset>
+                {
+                    new LineChartDataset
+                    {
+                        Label = "Product A",
+                        Data = new List<double?> { 35, 41, 62, 42, 13, 18 },
+                        BackgroundColor = ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbaString(),
+                        BorderColor = ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbString(),
+                        PointRadius = new List<double> { 5 },
+                        PointHoverRadius = new List<double> { 8 }
+                    },
+                    new LineChartDataset
+                    {
+                        Label = "Product B",
+                        Data = new List<double?> { 28, 48, 40, 19, 86, 27 },
+                        BackgroundColor = ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbaString(),
+                        BorderColor = ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbString(),
+                        PointRadius = new List<double> { 5 },
+                        PointHoverRadius = new List<double> { 8 }
+                    }
+                }
+            };
+
+        lineChartOptions = new LineChartOptions
+            {
+                Interaction = new Interaction { Mode = InteractionMode.Nearest, Intersect = true },
+                Responsive = true
+            };
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+            await lineChart.InitializeAsync(chartData, lineChartOptions);
+
+        await base.OnAfterRenderAsync(firstRender);
+    }
+
+    private void OnClick(ChartClickEventArgs eventArgs)
+    {
+        selectedItemMessage = $"Dataset: {eventArgs.DatasetLabel}, Label: {eventArgs.Label}, Value: {eventArgs.Value}";
+    }
+}
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PieCharts/PieChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PieCharts/PieChartDocumentation.razor
index a9dadd4c4..902984a17 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PieCharts/PieChartDocumentation.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PieCharts/PieChartDocumentation.razor
@@ -38,6 +38,10 @@
     <Demo Type="typeof(PieChart_Demo_03_Change_Legend_Position)" Tabs="true" />
 </Section>
 
+<Section Size="HeadingSize.H4" Name="Click event" PageUrl="@pageUrl" Link="click-event">
+    <Demo Type="typeof(PieChart_Demo_04_Click_Event)" Tabs="true" />
+</Section>
+
 <ChartJSCallout />
 
 @code {
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PieCharts/PieChart_Demo_04_Click_Event.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PieCharts/PieChart_Demo_04_Click_Event.razor
new file mode 100644
index 000000000..89d5a0c6e
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PieCharts/PieChart_Demo_04_Click_Event.razor
@@ -0,0 +1,50 @@
+<PieChart @ref="pieChart" OnClick="OnClick" Width="500" />
+
+<div class="mt-3">
+    <strong>Selected item:</strong> @selectedItemMessage
+</div>
+
+@code {
+    private PieChart pieChart = default!;
+    private PieChartOptions pieChartOptions = default!;
+    private ChartData chartData = default!;
+    private string selectedItemMessage = "Click a slice to view its details.";
+
+    protected override void OnInitialized()
+    {
+        chartData = new ChartData
+            {
+                Labels = new List<string> { "Chrome", "Edge", "Firefox", "Safari" },
+                Datasets = new List<IChartDataset>
+                {
+                    new PieChartDataset
+                    {
+                        Label = "Browsers",
+                        Data = new List<double?> { 62, 18, 11, 9 },
+                        BackgroundColor = new List<string>
+                        {
+                            ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbString(),
+                            ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbString(),
+                            ColorUtility.CategoricalTwelveColors[2].ToColor().ToRgbString(),
+                            ColorUtility.CategoricalTwelveColors[3].ToColor().ToRgbString()
+                        }
+                    }
+                }
+            };
+
+        pieChartOptions = new PieChartOptions { Responsive = true };
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+            await pieChart.InitializeAsync(chartData, pieChartOptions);
+
+        await base.OnAfterRenderAsync(firstRender);
+    }
+
+    private void OnClick(ChartClickEventArgs eventArgs)
+    {
+        selectedItemMessage = $"Dataset: {eventArgs.DatasetLabel}, Label: {eventArgs.Label}, Value: {eventArgs.Value}";
+    }
+}
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PolarAreaCharts/PolarAreaChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PolarAreaCharts/PolarAreaChartDocumentation.razor
index e0d92bcfa..a0f13930c 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PolarAreaCharts/PolarAreaChartDocumentation.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PolarAreaCharts/PolarAreaChartDocumentation.razor
@@ -27,6 +27,10 @@
     <Demo Type="typeof(PolarAreaChart_Demo_01_Examples)" Tabs="true" />
 </Section>
 
+<Section Size="HeadingSize.H4" Name="Click event" PageUrl="@pageUrl" Link="click-event">
+    <Demo Type="typeof(PolarAreaChart_Demo_02_Click_Event)" Tabs="true" />
+</Section>
+
 <ChartJSCallout />
 
 @code {
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PolarAreaCharts/PolarAreaChart_Demo_02_Click_Event.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PolarAreaCharts/PolarAreaChart_Demo_02_Click_Event.razor
new file mode 100644
index 000000000..3bbd6a715
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PolarAreaCharts/PolarAreaChart_Demo_02_Click_Event.razor
@@ -0,0 +1,59 @@
+<PolarAreaChart @ref="polarAreaChart" OnClick="OnClick" Width="600" />
+
+<div class="mt-3">
+    <strong>Selected item:</strong> @selectedItemMessage
+</div>
+
+@code {
+    private PolarAreaChart polarAreaChart = default!;
+    private PolarAreaChartOptions polarAreaChartOptions = default!;
+    private ChartData chartData = default!;
+    private string selectedItemMessage = "Click a segment to view its details.";
+
+    protected override void OnInitialized()
+    {
+        chartData = new ChartData
+            {
+                Labels = new List<string> { "North", "South", "East", "West", "Central" },
+                Datasets = new List<IChartDataset>
+                {
+                    new PolarAreaChartDataset
+                    {
+                        Label = "Regions",
+                        Data = new List<double?> { 11, 16, 7, 3, 14 },
+                        BackgroundColor = new List<string>
+                        {
+                            ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbaString(0.5),
+                            ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbaString(0.5),
+                            ColorUtility.CategoricalTwelveColors[2].ToColor().ToRgbaString(0.5),
+                            ColorUtility.CategoricalTwelveColors[3].ToColor().ToRgbaString(0.5),
+                            ColorUtility.CategoricalTwelveColors[4].ToColor().ToRgbaString(0.5)
+                        },
+                        BorderColor = new List<string>
+                        {
+                            ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbString(),
+                            ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbString(),
+                            ColorUtility.CategoricalTwelveColors[2].ToColor().ToRgbString(),
+                            ColorUtility.CategoricalTwelveColors[3].ToColor().ToRgbString(),
+                            ColorUtility.CategoricalTwelveColors[4].ToColor().ToRgbString()
+                        }
+                    }
+                }
+            };
+
+        polarAreaChartOptions = new PolarAreaChartOptions { Responsive = true };
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+            await polarAreaChart.InitializeAsync(chartData, polarAreaChartOptions);
+
+        await base.OnAfterRenderAsync(firstRender);
+    }
+
+    private void OnClick(ChartClickEventArgs eventArgs)
+    {
+        selectedItemMessage = $"Dataset: {eventArgs.DatasetLabel}, Label: {eventArgs.Label}, Value: {eventArgs.Value}";
+    }
+}
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/RadarCharts/RadarChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/RadarCharts/RadarChartDocumentation.razor
index 99f669f27..7f8e4e47a 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/RadarCharts/RadarChartDocumentation.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/RadarCharts/RadarChartDocumentation.razor
@@ -27,6 +27,10 @@
     <Demo Type="typeof(RadarChart_Demo_01_Examples)" Tabs="true"/>
 </Section>
 
+<Section Size="HeadingSize.H4" Name="Click event" PageUrl="@pageUrl" Link="click-event">
+    <Demo Type="typeof(RadarChart_Demo_02_Click_Event)" Tabs="true" />
+</Section>
+
 <ChartJSCallout />
 
 @code {
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/RadarCharts/RadarChart_Demo_02_Click_Event.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/RadarCharts/RadarChart_Demo_02_Click_Event.razor
new file mode 100644
index 000000000..f9e4e907b
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/RadarCharts/RadarChart_Demo_02_Click_Event.razor
@@ -0,0 +1,58 @@
+<RadarChart @ref="radarChart" OnClick="OnClick" Width="600" />
+
+<div class="mt-3">
+    <strong>Selected item:</strong> @selectedItemMessage
+</div>
+
+@code {
+    private RadarChart radarChart = default!;
+    private RadarChartOptions radarChartOptions = default!;
+    private ChartData chartData = default!;
+    private string selectedItemMessage = "Click a point to view its details.";
+
+    protected override void OnInitialized()
+    {
+        chartData = new ChartData
+            {
+                Labels = new List<string> { "Speed", "Reliability", "Comfort", "Safety", "Efficiency" },
+                Datasets = new List<IChartDataset>
+                {
+                    new RadarChartDataset
+                    {
+                        Label = "Model A",
+                        Data = new List<double?> { 65, 59, 90, 81, 56 },
+                        BackgroundColor = ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbaString(),
+                        BorderColor = ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbaString(0.8),
+                        BorderWidth = 2,
+                        Fill = true,
+                        HoverBorderWidth = 4
+                    },
+                    new RadarChartDataset
+                    {
+                        Label = "Model B",
+                        Data = new List<double?> { 28, 48, 40, 19, 96 },
+                        BackgroundColor = ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbaString(),
+                        BorderColor = ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbaString(0.8),
+                        BorderWidth = 2,
+                        Fill = true,
+                        HoverBorderWidth = 4
+                    }
+                }
+            };
+
+        radarChartOptions = new RadarChartOptions { Responsive = true };
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+            await radarChart.InitializeAsync(chartData, radarChartOptions);
+
+        await base.OnAfterRenderAsync(firstRender);
+    }
+
+    private void OnClick(ChartClickEventArgs eventArgs)
+    {
+        selectedItemMessage = $"Dataset: {eventArgs.DatasetLabel}, Label: {eventArgs.Label}, Value: {eventArgs.Value}";
+    }
+}
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/ScatterCharts/ScatterChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/ScatterCharts/ScatterChartDocumentation.razor
index 1b1b02b30..3aa86ac41 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/ScatterCharts/ScatterChartDocumentation.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/ScatterCharts/ScatterChartDocumentation.razor
@@ -36,6 +36,10 @@
     <Demo Type="typeof(ScatterChart_Demo_02_Dynamic_Data)" Tabs="true" />
 </Section>
 
+<Section Size="HeadingSize.H4" Name="Click event" PageUrl="@pageUrl" Link="click-event">
+    <Demo Type="typeof(ScatterChart_Demo_03_Click_Event)" Tabs="true" />
+</Section>
+
 <ChartJSCallout />
 
 @code {
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/ScatterCharts/ScatterChart_Demo_03_Click_Event.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/ScatterCharts/ScatterChart_Demo_03_Click_Event.razor
new file mode 100644
index 000000000..ab1614c18
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/ScatterCharts/ScatterChart_Demo_03_Click_Event.razor
@@ -0,0 +1,71 @@
+<ScatterChart @ref="scatterChart" OnClick="OnClick" Width="560" Height="480" />
+
+<div class="mt-3">
+    <strong>Selected item:</strong> @selectedItemMessage
+</div>
+
+@code {
+    private ScatterChart scatterChart = default!;
+    private ScatterChartOptions scatterChartOptions = default!;
+    private ChartData chartData = default!;
+    private string selectedItemMessage = "Click a point to view its details.";
+
+    protected override void OnInitialized()
+    {
+        chartData = new ChartData
+            {
+                Datasets = new List<IChartDataset>
+                {
+                    new ScatterChartDataset
+                    {
+                        Label = "Team 1",
+                        Data = new List<ScatterChartDataPoint?>
+                        {
+                            new(15, 25),
+                            new(22, 48),
+                            new(38, 32),
+                            new(55, 67)
+                        },
+                        BackgroundColor = ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbaString(),
+                        BorderColor = ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbString(),
+                        BorderWidth = 2,
+                        HoverBorderWidth = 4,
+                        PointRadius = new List<double> { 6 },
+                        PointHoverRadius = new List<double> { 8 }
+                    },
+                    new ScatterChartDataset
+                    {
+                        Label = "Team 2",
+                        Data = new List<ScatterChartDataPoint?>
+                        {
+                            new(12, 35),
+                            new(28, 30),
+                            new(41, 52),
+                            new(63, 72)
+                        },
+                        BackgroundColor = ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbaString(),
+                        BorderColor = ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbString(),
+                        BorderWidth = 2,
+                        HoverBorderWidth = 4,
+                        PointRadius = new List<double> { 6 },
+                        PointHoverRadius = new List<double> { 8 }
+                    }
+                }
+            };
+
+        scatterChartOptions = new ScatterChartOptions { Responsive = true };
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+            await scatterChart.InitializeAsync(chartData, scatterChartOptions);
+
+        await base.OnAfterRenderAsync(firstRender);
+    }
+
+    private void OnClick(ChartClickEventArgs eventArgs)
+    {
+        selectedItemMessage = $"Dataset: {eventArgs.DatasetLabel}, Value: {eventArgs.Value}";
+    }
+}

From ea70b55f976a17bf1467ac0e05581b7b73c5729d Mon Sep 17 00:00:00 2001
From: gvreddy04 <gvreddy04@gmail.com>
Date: Wed, 18 Mar 2026 09:23:51 +0530
Subject: [PATCH 3/3] Add chart events docs and enhance chart property metadata

Updated documentation for all chart components to include "Events" and "ChartClickEventArgs Properties" sections. Enhanced BlazorBootstrapChart property metadata with [AddedVersion], [DefaultValue], and [Description] attributes for Height, HeightUnit, Width, and WidthUnit. Improved remarks to clarify default values.
---
 .../BarChart_Doc_01_Documentation.razor          |  8 ++++++++
 .../DoughnutChart_Doc_01_Documentation.razor     |  8 ++++++++
 .../LineChart_Doc_01_Documentation.razor         |  8 ++++++++
 .../PieChart_Doc_01_Documentation.razor          |  8 ++++++++
 .../PolarAreaChart_Doc_01_Documentation.razor    |  8 ++++++++
 .../RadarChart_Doc_01_Documentation.razor        |  8 ++++++++
 .../ScatterChart_Doc_01_Documentation.razor      |  8 ++++++++
 .../Components/Charts/BlazorBootstrapChart.cs    | 16 ++++++++++++++--
 8 files changed, 70 insertions(+), 2 deletions(-)

diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/BarCharts/BarChart_Doc_01_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/BarCharts/BarChart_Doc_01_Documentation.razor
index ed1a309ca..6359f74d3 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/BarCharts/BarChart_Doc_01_Documentation.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/BarCharts/BarChart_Doc_01_Documentation.razor
@@ -22,6 +22,14 @@
     <DocxTable TItem="BarChart" DocType="DocType.Methods" />
 </Section>
 
+<Section Class="p-0" Size="HeadingSize.H3" Name="BarChart Events" PageUrl="@pageUrl" Link="bar-chart-events">
+    <DocxTable TItem="BarChart" DocType="DocType.Events" />
+</Section>
+
+<Section Class="p-0" Size="HeadingSize.H3" Name="ChartClickEventArgs Properties" PageUrl="@pageUrl" Link="chart-click-event-args-properties">
+    <DocxTable TItem="ChartClickEventArgs" DocType="DocType.Properties" />
+</Section>
+
 <Section Class="p-0" Size="HeadingSize.H3" Name="ChartData Properties" PageUrl="@pageUrl" Link="chart-data-properties">
     <DocxTable TItem="ChartData" DocType="DocType.Properties" />
 </Section>
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/DoughnutCharts/DoughnutChart_Doc_01_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/DoughnutCharts/DoughnutChart_Doc_01_Documentation.razor
index 3bf6a2f84..2942f774c 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/DoughnutCharts/DoughnutChart_Doc_01_Documentation.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/DoughnutCharts/DoughnutChart_Doc_01_Documentation.razor
@@ -22,6 +22,14 @@
     <DocxTable TItem="DoughnutChart" DocType="DocType.Methods" />
 </Section>
 
+<Section Class="p-0" Size="HeadingSize.H3" Name="DoughnutChart Events" PageUrl="@pageUrl" Link="doughnut-chart-events">
+    <DocxTable TItem="DoughnutChart" DocType="DocType.Events" />
+</Section>
+
+<Section Class="p-0" Size="HeadingSize.H3" Name="ChartClickEventArgs Properties" PageUrl="@pageUrl" Link="chart-click-event-args-properties">
+    <DocxTable TItem="ChartClickEventArgs" DocType="DocType.Properties" />
+</Section>
+
 <Section Class="p-0" Size="HeadingSize.H3" Name="ChartData Properties" PageUrl="@pageUrl" Link="chart-data-properties">
     <DocxTable TItem="ChartData" DocType="DocType.Properties" />
 </Section>
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/LineCharts/LineChart_Doc_01_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/LineCharts/LineChart_Doc_01_Documentation.razor
index 5c5043178..8da0ace5e 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/LineCharts/LineChart_Doc_01_Documentation.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/LineCharts/LineChart_Doc_01_Documentation.razor
@@ -22,6 +22,14 @@
     <DocxTable TItem="LineChart" DocType="DocType.Methods" />
 </Section>
 
+<Section Class="p-0" Size="HeadingSize.H3" Name="LineChart Events" PageUrl="@pageUrl" Link="line-chart-events">
+    <DocxTable TItem="LineChart" DocType="DocType.Events" />
+</Section>
+
+<Section Class="p-0" Size="HeadingSize.H3" Name="ChartClickEventArgs Properties" PageUrl="@pageUrl" Link="chart-click-event-args-properties">
+    <DocxTable TItem="ChartClickEventArgs" DocType="DocType.Properties" />
+</Section>
+
 <Section Class="p-0" Size="HeadingSize.H3" Name="ChartData Properties" PageUrl="@pageUrl" Link="chart-data-properties">
     <DocxTable TItem="ChartData" DocType="DocType.Properties" />
 </Section>
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/PieCharts/PieChart_Doc_01_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/PieCharts/PieChart_Doc_01_Documentation.razor
index 15f573c30..6a499aa53 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/PieCharts/PieChart_Doc_01_Documentation.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/PieCharts/PieChart_Doc_01_Documentation.razor
@@ -22,6 +22,14 @@
     <DocxTable TItem="PieChart" DocType="DocType.Methods" />
 </Section>
 
+<Section Class="p-0" Size="HeadingSize.H3" Name="PieChart Events" PageUrl="@pageUrl" Link="pie-chart-events">
+    <DocxTable TItem="PieChart" DocType="DocType.Events" />
+</Section>
+
+<Section Class="p-0" Size="HeadingSize.H3" Name="ChartClickEventArgs Properties" PageUrl="@pageUrl" Link="chart-click-event-args-properties">
+    <DocxTable TItem="ChartClickEventArgs" DocType="DocType.Properties" />
+</Section>
+
 <Section Class="p-0" Size="HeadingSize.H3" Name="ChartData Properties" PageUrl="@pageUrl" Link="chart-data-properties">
     <DocxTable TItem="ChartData" DocType="DocType.Properties" />
 </Section>
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/PolarAreaCharts/PolarAreaChart_Doc_01_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/PolarAreaCharts/PolarAreaChart_Doc_01_Documentation.razor
index 03e3a562f..9602c6066 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/PolarAreaCharts/PolarAreaChart_Doc_01_Documentation.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/PolarAreaCharts/PolarAreaChart_Doc_01_Documentation.razor
@@ -22,6 +22,14 @@
     <DocxTable TItem="PolarAreaChart" DocType="DocType.Methods" />
 </Section>
 
+<Section Class="p-0" Size="HeadingSize.H3" Name="PolarAreaChart Events" PageUrl="@pageUrl" Link="polar-area-chart-events">
+    <DocxTable TItem="PolarAreaChart" DocType="DocType.Events" />
+</Section>
+
+<Section Class="p-0" Size="HeadingSize.H3" Name="ChartClickEventArgs Properties" PageUrl="@pageUrl" Link="chart-click-event-args-properties">
+    <DocxTable TItem="ChartClickEventArgs" DocType="DocType.Properties" />
+</Section>
+
 <Section Class="p-0" Size="HeadingSize.H3" Name="ChartData Properties" PageUrl="@pageUrl" Link="chart-data-properties">
     <DocxTable TItem="ChartData" DocType="DocType.Properties" />
 </Section>
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/RadarCharts/RadarChart_Doc_01_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/RadarCharts/RadarChart_Doc_01_Documentation.razor
index daaec3803..8f5edb2a6 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/RadarCharts/RadarChart_Doc_01_Documentation.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/RadarCharts/RadarChart_Doc_01_Documentation.razor
@@ -22,6 +22,14 @@
     <DocxTable TItem="RadarChart" DocType="DocType.Methods" />
 </Section>
 
+<Section Class="p-0" Size="HeadingSize.H3" Name="RadarChart Events" PageUrl="@pageUrl" Link="radar-chart-events">
+    <DocxTable TItem="RadarChart" DocType="DocType.Events" />
+</Section>
+
+<Section Class="p-0" Size="HeadingSize.H3" Name="ChartClickEventArgs Properties" PageUrl="@pageUrl" Link="chart-click-event-args-properties">
+    <DocxTable TItem="ChartClickEventArgs" DocType="DocType.Properties" />
+</Section>
+
 <Section Class="p-0" Size="HeadingSize.H3" Name="ChartData Properties" PageUrl="@pageUrl" Link="chart-data-properties">
     <DocxTable TItem="ChartData" DocType="DocType.Properties" />
 </Section>
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/ScatterCharts/ScatterChart_Doc_01_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/ScatterCharts/ScatterChart_Doc_01_Documentation.razor
index c852917b8..21686b2ee 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/ScatterCharts/ScatterChart_Doc_01_Documentation.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/ScatterCharts/ScatterChart_Doc_01_Documentation.razor
@@ -22,6 +22,14 @@
     <DocxTable TItem="ScatterChart" DocType="DocType.Methods" />
 </Section>
 
+<Section Class="p-0" Size="HeadingSize.H3" Name="ScatterChart Events" PageUrl="@pageUrl" Link="scatter-chart-events">
+    <DocxTable TItem="ScatterChart" DocType="DocType.Events" />
+</Section>
+
+<Section Class="p-0" Size="HeadingSize.H3" Name="ChartClickEventArgs Properties" PageUrl="@pageUrl" Link="chart-click-event-args-properties">
+    <DocxTable TItem="ChartClickEventArgs" DocType="DocType.Properties" />
+</Section>
+
 <Section Class="p-0" Size="HeadingSize.H3" Name="ChartData Properties" PageUrl="@pageUrl" Link="chart-data-properties">
     <DocxTable TItem="ChartData" DocType="DocType.Properties" />
 </Section>
diff --git a/blazorbootstrap/Components/Charts/BlazorBootstrapChart.cs b/blazorbootstrap/Components/Charts/BlazorBootstrapChart.cs
index 8f7aff354..58a1eaf68 100644
--- a/blazorbootstrap/Components/Charts/BlazorBootstrapChart.cs
+++ b/blazorbootstrap/Components/Charts/BlazorBootstrapChart.cs
@@ -214,8 +214,11 @@ private object GetChartDataObject(ChartData chartData)
     /// To change the unit of measure see <see cref="HeightUnit" />.
     /// </summary>
     /// <remarks>
-    /// Default value is null.
+    /// Default value is <see langword="null"/>.
     /// </remarks>
+    [AddedVersion("1.0.0")]
+    [DefaultValue(null)]
+    [Description("Gets or sets chart container height. The default unit of measure is <code>Unit.Px</code>. To change the unit of measure see <b>HeightUnit</b>.")]
     [Parameter]
     public int? Height { get; set; }
 
@@ -225,6 +228,9 @@ private object GetChartDataObject(ChartData chartData)
     /// <remarks>
     /// Default value is <see cref="Unit.Px" />.
     /// </remarks>
+    [AddedVersion("1.0.0")]
+    [DefaultValue(Unit.Px)]
+    [Description("Gets or sets chart container height unit of measure.")]
     [Parameter]
     public Unit HeightUnit { get; set; } = Unit.Px;
 
@@ -234,8 +240,11 @@ private object GetChartDataObject(ChartData chartData)
     /// To change the unit of measure see <see cref="WidthUnit" />.
     /// </summary>
     /// <remarks>
-    /// Default value is null.
+    /// Default value is <see langword="null"/>.
     /// </remarks>
+    [AddedVersion("1.0.0")]
+    [DefaultValue(null)]
+    [Description("Get or sets chart container width. The default unit of measure is <code>Unit.Px</code>. To change the unit of measure see <b>WidthUnit</b>.")]
     [Parameter]
     public int? Width { get; set; }
 
@@ -245,6 +254,9 @@ private object GetChartDataObject(ChartData chartData)
     /// <remarks>
     /// Default value is <see cref="Unit.Px" />.
     /// </remarks>
+    [AddedVersion("1.0.0")]
+    [DefaultValue(Unit.Px)]
+    [Description("Gets or sets chart container width unit of measure.")]
     [Parameter]
     public Unit WidthUnit { get; set; } = Unit.Px;