I'm using Chartjs.Blazor, and I haven't been able to do the same as described here : How to change the color of Chart.js points depending on the label
I've got a list of colors (rgba, or color name, I can choose) under the form of List<String>.
colors = ["rgba(255,0,0,1)", "rgba(0,255,0,1)", "rgba(0,0,255,1)", "rgba(255,0,0,1)", "rgba(0,255,0,1)"];
I tried to specify colors using the LineDataset.PointBackgroundColor property :
var _linebarDataSet = new ChartJs.Blazor.ChartJS.LineChart.LineDataset<ChartJs.Blazor.ChartJS.Common.Point>
{
Label = lineSet.Title,
Hidden = false,
Fill = false,
PointBackgroundColor = colors,
BorderWidth = 3,
PointBorderWidth = 0,
LineTension = 0,
PointRadius = 0,
};
for (int i = 0; i < lineSet.XAxisData.Count; i++)
{
_linebarDataSet.Add(new ChartJs.Blazor.ChartJS.Common.Point(i, lineSet.YAxisData[i]));
}
and tried to pass RGB values as in the example or colors name. It seems only the first definition is applied to all points.
I also tried to use javascript as :
await JSRuntime.InvokeAsync<string>("colorizePoints.HideOtherDatasetsFunc", valuesPoints, this.m_ValuesDataset.Colors);
and this code :
HideOtherDatasetsFunc: function (reference, colors, barchart) {
let colorsCode = []
for (var i = 0, len = colors.length; i < len; i++) {
colorsCode.push(colors[i]);
}
for (var i = 1; i <= reference.data.length - 1; i++) {
reference.pointBackgroundColor[i] = colorsCode[i];
}
}
And think Javascript like this would interfer with the Blazor server side rendering.
My problem using the javascript is to get the 2d context, as it's done in the link using :
var ctx = document.getElementById('lineChart').getContext('2d');
I can't set a fixed id as the CharJS, and retrieve it from javascript, because blazor components cannot stand id properties.
Has anybody an idea how to achieve this goal ?
Thank you for your reading-
