Migrate to BlazorExpress.ChartJS and enhance chart interactivity

BlazorBootstrap.Demo.RCL/BlazorBootstrap.Demo.RCL.csproj

@@ -11,6 +11,7 @@
   </ItemGroup>
 
   <ItemGroup>
+    <PackageReference Include="BlazorExpress.ChartJS" Version="1.2.4" />
     <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="10.0.0" />
     <PackageReference Include="Microsoft.Extensions.Configuration" Version="10.0.0" />
   </ItemGroup>

BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChartDocumentation.razor

@@ -10,11 +10,6 @@
 
 <DocsLink Href="@DemoRouteConstants.Docs_URL_BarChart" />
 
-<Section Size="HeadingSize.H4" Name="Prerequisites" PageUrl="@pageUrl" Link="prerequisites" />
-<div class="mb-3">
-    Refer to the <a href="/getting-started/blazor-webassembly">getting started guide</a> for setting up charts.
-</div>
-
 <Section Size="HeadingSize.H4" Name="How it works" PageUrl="@pageUrl" Link="how-it-works" />
 <div class="mb-3">
     In the following example, a <a href="/utils/color-utility#categorical-12-color">categorical 12-color</a> palette is used.
@@ -71,16 +66,18 @@
 </div>
 <Demo Type="typeof(BarChart_Demo_11_Combo_Bar_Line)" 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 />
+<Section Size="HeadingSize.H4" Name="Click event" PageUrl="@pageUrl" Link="click-event">
+    <div class="my-3">
+        Set the <code>OnClick</code> callback to react when a chart data item is selected. The callback receives <code>ChartClickEventArgs</code> with the dataset index and label, data-item index and label, and raw value.
+    </div>
+    <Demo Type="typeof(BarChart_Demo_12_Click_Event)" Tabs="true" />
+</Section>
 
 @code {
     private const string pageUrl = DemoRouteConstants.Demos_URL_BarChart;
     private const string pageTitle = "Blazor Bar Chart";
-    private const string pageDescription = "A Blazor Bootstrap bar chart component is used to represent data values as vertical bars. It is sometimes used to show trend data and to compare multiple data sets side by side.";
+    private const string pageDescription = "A BlazorExpress.ChartJS bar chart component is used to represent data values as vertical bars. It is sometimes used to show trend data and to compare multiple data sets side by side.";
     private const string metaTitle = "Blazor Bar Chart Component";
-    private const string metaDescription = "A Blazor Bootstrap bar chart component is used to represent data values as vertical bars. It is sometimes used to show trend data and to compare multiple data sets side by side.";
+    private const string metaDescription = "A BlazorExpress.ChartJS bar chart component is used to represent data values as vertical bars. It is sometimes used to show trend data and to compare multiple data sets side by side.";
     private const string imageUrl = "https://i.imgur.com/IX3bajc.png";
 }

BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_01_Examples.razor

@@ -1,4 +1,4 @@
-<BarChart @ref="barChart" Width="500" Height="300" />
+<BarChart @ref="barChart" Width="500" Height="300" />
 
 <div class="mt-5">
     <Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await RandomizeAsync()"> Randomize </Button>
@@ -120,16 +120,16 @@
 
     private BarChartDataset GetRandomBarChartDataset()
     {
-        var c = ColorUtility.CategoricalTwelveColors[datasetsCount].ToColor();
+        var c = ColorUtility.CategoricalTwelveColors[datasetsCount].ToChartColor();
 
         datasetsCount += 1;
 
         return new BarChartDataset()
             {
                 Label = $"Product {datasetsCount}",
                 Data = GetRandomData(),
-                BackgroundColor = new List<string> { c.ToRgbString() },
-                BorderColor = new List<string> { c.ToRgbString() },
+                BackgroundColor = new List<string> { c.ToChartRgbString() },
+                BorderColor = new List<string> { c.ToChartRgbString() },
                 BorderWidth = new List<double> { 0 },
             };
     }

BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_02_Horizontal_BarChart.razor

@@ -1,4 +1,4 @@
-<BarChart @ref="barChart" Width="500" Height="300" />
+<BarChart @ref="barChart" Width="500" Height="300" />
 
 @code {
     private BarChart barChart = default!;
@@ -23,7 +23,7 @@
 
         barChartOptions = new BarChartOptions();
         barChartOptions.Responsive = true;
-        barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index, Axis = InteractionAxis.Y };
+        barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y };
         barChartOptions.IndexAxis = "y";
 
         barChartOptions.Scales.X!.Title = new ChartAxesTitle { Text = "Visitors", Display = true };

BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_03_Stacked_BarChart.razor

@@ -1,4 +1,4 @@
-<BarChart @ref="barChart" Width="500" Height="300" />
+<BarChart @ref="barChart" Width="500" Height="300" />
 
 @code {
     private BarChart barChart = default!;
@@ -46,7 +46,7 @@
 
         barChartOptions = new();
         barChartOptions.Responsive = true;
-        barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index, Axis = InteractionAxis.Y };
+        barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y };
         barChartOptions.IndexAxis = "y";
 
         barChartOptions.Scales.X!.Title = new ChartAxesTitle { Text = "Visitors", Display = true };

BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_04_Locale.razor

@@ -1,4 +1,4 @@
-<BarChart @ref="barChart" Width="500" Height="300" />
+<BarChart @ref="barChart" Width="500" Height="300" />
 
 @code {
     private BarChart barChart = default!;
@@ -47,7 +47,7 @@
         barChartOptions = new();
         barChartOptions.Locale = "de-DE";
         barChartOptions.Responsive = true;
-        barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index, Axis = InteractionAxis.Y };
+        barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y };
         barChartOptions.IndexAxis = "y";
 
         barChartOptions.Scales.X!.Title = new ChartAxesTitle { Text = "Visitors", Display = true };

BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_05_Stacked_BarChart_with_Datalabels.razor

@@ -1,4 +1,4 @@
-<BarChart @ref="barChart" Width="500" Height="300" />
+<BarChart @ref="barChart" Width="500" Height="300" />
 
 @code {
     private BarChart barChart = default!;
@@ -50,7 +50,7 @@
 
         barChartOptions = new();
         barChartOptions.Responsive = true;
-        barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index, Axis = InteractionAxis.Y };
+        barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y };
         barChartOptions.IndexAxis = "y";
 
         barChartOptions.Scales.X!.Title = new ChartAxesTitle { Text = "Visitors", Display = true };

BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_07_Dataset_Animation.razor

@@ -18,26 +18,26 @@
                     {
                         Label = "Product A",
                         Data = new List<double?> { 65, 59, 80, 81, 56, 55 },
-                        BackgroundColor = new List<string> { colors[0].ToColor().ToRgbString() },
-                        BorderColor = new List<string> { colors[0].ToColor().ToRgbString() },
+                        BackgroundColor = new List<string> { colors[0].ToChartColor().ToChartRgbString() },
+                        BorderColor = new List<string> { colors[0].ToChartColor().ToChartRgbString() },
                         BorderWidth = new List<double> { 0 },
                         Animation = new ChartAnimation { Delay = 0, Duration = 1200 }
                     },
                     new BarChartDataset
                     {
                         Label = "Product B",
                         Data = new List<double?> { 28, 48, 40, 19, 86, 27 },
-                        BackgroundColor = new List<string> { colors[1].ToColor().ToRgbString() },
-                        BorderColor = new List<string> { colors[1].ToColor().ToRgbString() },
+                        BackgroundColor = new List<string> { colors[1].ToChartColor().ToChartRgbString() },
+                        BorderColor = new List<string> { colors[1].ToChartColor().ToChartRgbString() },
                         BorderWidth = new List<double> { 0 },
                         Animation = new ChartAnimation { Delay = 250, Duration = 1200 }
                     },
                     new BarChartDataset
                     {
                         Label = "Product C",
                         Data = new List<double?> { 18, 38, 50, 29, 66, 47 },
-                        BackgroundColor = new List<string> { colors[2].ToColor().ToRgbString() },
-                        BorderColor = new List<string> { colors[2].ToColor().ToRgbString() },
+                        BackgroundColor = new List<string> { colors[2].ToChartColor().ToChartRgbString() },
+                        BorderColor = new List<string> { colors[2].ToChartColor().ToChartRgbString() },
                         BorderWidth = new List<double> { 0 },
                         Animation = new ChartAnimation { Delay = 500, Duration = 1200 }
                     }

BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_09_Border_Radius.razor

@@ -53,16 +53,16 @@
 
     private BarChartDataset GetRandomBarChartDataset()
     {
-        var color = ColorUtility.CategoricalTwelveColors[datasetsCount].ToColor();
+        var color = ColorUtility.CategoricalTwelveColors[datasetsCount].ToChartColor();
 
         datasetsCount += 1;
 
         return new BarChartDataset
             {
                 Label = $"Product {datasetsCount}",
                 Data = GetRandomData(),
-                BackgroundColor = new List<string> { color.ToRgbaString(0.5) },
-                BorderColor = new List<string> { color.ToRgbString() },
+                BackgroundColor = new List<string> { color.ToChartRgbaString(0.5) },
+                BorderColor = new List<string> { color.ToChartRgbString() },
                 BorderWidth = new List<double> { 2 },
                 BorderRadius = new List<double> { 10 }
             };

BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_10_Animation_Delay.razor

@@ -43,7 +43,7 @@
 
         barChartOptions = new();
         barChartOptions.Responsive = true;
-        barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index, Axis = InteractionAxis.Y };
+        barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y };
         barChartOptions.IndexAxis = "y";
         barChartOptions.Scales.X!.Title = new ChartAxesTitle { Text = "Visitors", Display = true };
         barChartOptions.Scales.Y!.Title = new ChartAxesTitle { Text = "Browser", Display = true };

BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_11_Combo_Bar_Line.razor

@@ -7,8 +7,8 @@
 
     protected override void OnInitialized()
     {
-        var revenueColor = ColorUtility.CategoricalTwelveColors[0].ToColor();
-        var targetColor = ColorUtility.CategoricalTwelveColors[1].ToColor();
+        var revenueColor = ColorUtility.CategoricalTwelveColors[0].ToChartColor();
+        var targetColor = ColorUtility.CategoricalTwelveColors[1].ToChartColor();
 
         chartData = new ChartData
             {
@@ -19,16 +19,16 @@
                     {
                         Label = "Revenue",
                         Data = new List<double?> { 65, 59, 80, 81, 56, 55 },
-                        BackgroundColor = new List<string> { revenueColor.ToRgbaString() },
-                        BorderColor = new List<string> { revenueColor.ToRgbString() },
+                        BackgroundColor = new List<string> { revenueColor.ToChartRgbaString() },
+                        BorderColor = new List<string> { revenueColor.ToChartRgbString() },
                         BorderWidth = new List<double> { 0 }
                     },
                     new LineChartDataset
                     {
                         Label = "Target",
                         Data = new List<double?> { 50, 55, 60, 70, 72, 78 },
-                        BackgroundColor = targetColor.ToRgbaString(),
-                        BorderColor = targetColor.ToRgbString(),
+                        BackgroundColor = targetColor.ToChartRgbaString(),
+                        BorderColor = targetColor.ToChartRgbString(),
                         PointRadius = new List<double> { 4 },
                         PointHoverRadius = new List<double> { 6 }
                     }

BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_12_Click_Event.razor

@@ -0,0 +1,54 @@
+<BarChart @ref="barChart" Width="600" OnClick="HandleClickAsync" />
+
+@if (selectedChartItem is not null)
+{
+    <p class="mt-3 mb-0">
+        Selected: @selectedChartItem.DatasetLabel (dataset @selectedChartItem.DatasetIndex),
+        @FormatLabel(selectedChartItem) (index @selectedChartItem.Index),
+        value @FormatValue(selectedChartItem)
+    </p>
+}
+
+@code {
+    private BarChart barChart = default!;
+    private BarChartOptions barChartOptions = default!;
+    private ChartData chartData = default!;
+    private ChartClickEventArgs? selectedChartItem;
+
+    protected override void OnInitialized()
+    {
+        chartData = new ChartData
+        {
+            Labels = new List<string> { "January", "February", "March" },
+            Datasets = new List<IChartDataset>
+            {
+                new BarChartDataset
+                {
+                    Label = "Orders",
+                    Data = new List<double?> { 45, 68, 54 },
+                    BackgroundColor = new List<string> { "#36A2EB" },
+                },
+            },
+        };
+
+        barChartOptions = new BarChartOptions { Responsive = true };
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+            await barChart.InitializeAsync(chartData, barChartOptions);
+
+        await base.OnAfterRenderAsync(firstRender);
+    }
+
+    private Task HandleClickAsync(ChartClickEventArgs eventArgs)
+    {
+        selectedChartItem = eventArgs;
+        return Task.CompletedTask;
+    }
+
+    private static string FormatLabel(ChartClickEventArgs eventArgs) => eventArgs.Label ?? $"item {eventArgs.Index}";
+
+    private static string FormatValue(ChartClickEventArgs eventArgs) => eventArgs.Value?.ToString() ?? "null";
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BubbleCharts/BubbleChartDocumentation.razor

@@ -1,4 +1,4 @@
-@attribute [Route(pageUrl)]
+@attribute [Route(pageUrl)]
 @layout DemosMainLayout
 
 <DemosPageHeadSection PageUrl="@pageUrl"
@@ -10,12 +10,6 @@
 
 <DocsLink Href="@DemoRouteConstants.Docs_URL_BubbleChart" />
 
-<Section Size="HeadingSize.H4" Name="Prerequisites" PageUrl="@pageUrl" Link="prerequisites">
-    <div class="mb-3">
-        Refer to the <a href="/getting-started/blazor-webassembly">getting started guide</a> for setting up charts.
-    </div>
-</Section>
-
 <Section Size="HeadingSize.H4" Name="How it works" PageUrl="@pageUrl" Link="how-it-works">
     <div class="mb-3">
         The bubble chart visualizes three dimensions of data by mapping each point to <code>X</code>, <code>Y</code>, and <code>R</code> values.
@@ -27,13 +21,18 @@
     <Demo Type="typeof(BubbleChart_Demo_01_Examples)" Tabs="true" />
 </Section>
 
-<ChartJSCallout />
+<Section Size="HeadingSize.H4" Name="Click event" PageUrl="@pageUrl" Link="click-event">
+    <div class="my-3">
+        Set the <code>OnClick</code> callback to react when a bubble is selected. The callback receives <code>ChartClickEventArgs</code> with the dataset, point index, label, and structured raw <code>X</code>, <code>Y</code>, and <code>R</code> value.
+    </div>
+    <Demo Type="typeof(BubbleChart_Demo_02_Click_Event)" Tabs="true" />
+</Section>
 
 @code {
     private const string pageUrl = DemoRouteConstants.Demos_URL_BubbleChart;
     private const string pageTitle = "Blazor Bubble Chart";
-    private const string pageDescription = "A Blazor Bootstrap bubble chart component is used to display three dimensions of data at the same time. The location of the bubble is determined by the first two dimensions and the size of each bubble represents a third value.";
+    private const string pageDescription = "A BlazorExpress.ChartJS bubble chart component is used to display three dimensions of data at the same time. The location of the bubble is determined by the first two dimensions and the size of each bubble represents a third value.";
     private const string metaTitle = "Blazor Bubble Chart Component";
-    private const string metaDescription = "A Blazor Bootstrap bubble chart component is used to display three dimensions of data at the same time. The location of the bubble is determined by the first two dimensions and the size of each bubble represents a third value.";
+    private const string metaDescription = "A BlazorExpress.ChartJS bubble chart component is used to display three dimensions of data at the same time. The location of the bubble is determined by the first two dimensions and the size of each bubble represents a third value.";
     private const string imageUrl = "https://i.imgur.com/GEox0tS.png";
-}
+}