Add chart data point click event support (#1276)

* 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.

* 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.

* 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.

Author: gvreddy04

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 {

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}";
+    }
+}

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 {

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}";
+    }
+}

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 {

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}";
+    }
+}

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 {

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}";
+    }
+}

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 {

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}";
+    }
+}