Blazor Chart.js 2.0.2 raises onClick error - chart.js

Question

I'm trying to create a stacked bar chart with Clartjs.Blazor version 2.0.2. After a long research, I found the source code of this library.
The application is a Blazor WebAssembly. So, I added in the index.html
<script src="lib/moment.js/moment.js"></script>
<script src="lib/Chart.js/chart.js"></script>
<script src="_content/ChartJs.Blazor.Fork/ChartJsBlazorInterop.js"></script>
In the page I added the graph
#page "/"
#using ChartJs.Blazor.BarChart
#using ChartJs.Blazor.BarChart.Axes
#using System.Drawing
#using System.Collections.Generic
#using System.Collections.ObjectModel
<Chart Config="_config" #ref="_chart"></Chart>
<button #onclick="RandomizeData">Randomize Data</button>
#code { private const int InitalCount = 7;
private BarConfig _config;
private Chart _chart;
protected override void OnInitialized()
{
_config = new BarConfig
{
Options = new BarOptions
{
Responsive = true,
Title = new OptionsTitle
{
Display = true,
Text = "Chart.js Bar Chart - Stacked"
},
Tooltips = new Tooltips
{
Mode = InteractionMode.Index,
Intersect = false
},
Scales = new BarScales
{
XAxes = new List<CartesianAxis>
{
new BarCategoryAxis
{
Stacked = true
}
},
YAxes = new List<CartesianAxis>
{
new BarLinearCartesianAxis
{
Stacked = true
}
}
}
}
};
IDataset<int> dataset1 = new BarDataset<int>(RandomScalingFactor(InitalCount))
{
Label = "Dataset 1",
BackgroundColor = ColorUtil.FromDrawingColor(ChartColors.Red)
};
IDataset<int> dataset2 = new BarDataset<int>(RandomScalingFactor(InitalCount))
{
Label = "Dataset 2",
BackgroundColor = ColorUtil.FromDrawingColor(ChartColors.Blue)
};
IDataset<int> dataset3 = new BarDataset<int>(RandomScalingFactor(InitalCount))
{
Label = "Dataset 3",
BackgroundColor = ColorUtil.FromDrawingColor(ChartColors.Green)
};
_config.Data.Labels.AddRange(Months.Take(InitalCount));
_config.Data.Datasets.Add(dataset1);
_config.Data.Datasets.Add(dataset2);
_config.Data.Datasets.Add(dataset3);
}
private void RandomizeData()
{
foreach (IDataset<int> dataset in _config.Data.Datasets)
{
int count = dataset.Count;
dataset.Clear();
dataset.AddRange(RandomScalingFactor(count));
}
_chart.Update();
}
private static readonly Random _rng = new Random();
public static class ChartColors
{
private static readonly Lazy<IReadOnlyList<Color>> _all = new Lazy<IReadOnlyList<Color>>(() => new Color[7]
{
Red, Orange, Yellow, Green, Blue, Purple, Grey
});
public static IReadOnlyList<Color> All => _all.Value;
public static readonly Color Red = Color.FromArgb(255, 99, 132);
public static readonly Color Orange = Color.FromArgb(255, 159, 64);
public static readonly Color Yellow = Color.FromArgb(255, 205, 86);
public static readonly Color Green = Color.FromArgb(75, 192, 192);
public static readonly Color Blue = Color.FromArgb(54, 162, 235);
public static readonly Color Purple = Color.FromArgb(153, 102, 255);
public static readonly Color Grey = Color.FromArgb(201, 203, 207);
}
public static IReadOnlyList<string> Months { get; } = new ReadOnlyCollection<string>(new[]
{
"January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"
});
private static int RandomScalingFactorThreadUnsafe() => _rng.Next(-100, 100);
public static int RandomScalingFactor()
{
lock (_rng)
{
return RandomScalingFactorThreadUnsafe();
}
}
public static IEnumerable<int> RandomScalingFactor(int count)
{
int[] factors = new int[count];
lock (_rng)
{
for (int i = 0; i < count; i++)
{
factors[i] = RandomScalingFactorThreadUnsafe();
}
}
return factors;
}
public static IEnumerable<DateTime> GetNextDays(int count)
{
DateTime now = DateTime.Now;
DateTime[] factors = new DateTime[count];
for (int i = 0; i < factors.Length; i++)
{
factors[i] = now.AddDays(i);
}
return factors;
}
}
For future reference, this code should create the following graph. I found this code in GitHub.
Obviously, it didn't work for me. When I run the application Blazor raises an error
crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
Unhandled exception rendering component: Cannot read properties of undefined (reading 'onClick')
TypeError: Cannot read properties of undefined (reading 'onClick')
at getDefaultFunc (https://localhost:44384/_content/ChartJs.Blazor.Fork/ChartJsBlazorInterop.js:75:116)
Is it only me that facing this issue? Is there a way to fix it?

Answer 1

I had this same problem and it came down to the version of chart.js.
I was using chart.js v3.5.1.
When I switched to v2.9.4 the onClick was resolved.