Color of individual bars in BarDataSet based on value

[larschristensen20]

In Chartjs i can do something like:

myBarChart.datasets[0].bars[0].fillColor = "#2ECC71"; myBarChart.datasets[0].bars[0].highlightFill = "#58D68D"; myBarChart.datasets[0].bars[1].fillColor = "#3498DB"; myBarChart.datasets[0].bars[1].highlightFill = "#5DADE2";

To set the color of individual bars of a bar chart.

I have a bar chart that shows both "real" data and "fake (calculated)" data, and I would like to give users a way to distinguish between each type, thus my need to set a bar one color if "real" and another if "fake". Is it possible to do this in Blazor?

I found that you can supply an array of background colors, however this does not fix my issue.

[Joelius300]

Thanks for the issue. This is not implemented the way you mention it but you can always fall back to interop if necessary.

I found that you can supply an array of background colors, however this does not fix my issue.

Could you elaborate? As far as I understand, that would be exactly what you want to use for your scenario.

[larschristensen20]

Could you elaborate? As far as I understand, that would be exactly what you want to use for your scenario.

I'm sorry I should have been a bit more precise.

My chart features several data sets defined by the level of detail each set provides, where use the AddRange() method to display my data.

So my chart shows a yearly overview (level 1), monthly (level 2), daily (level 3) and hourly (level 4), where a higher level of detail is shown each time a user clicks a bar.

At the fourth level I would like to dynamically set the color of each bar based on a value depicting whether or not the data shown in the bar is "real" or "fake".

However, using the array of background colors appears to me to be static, where each bar in the set would simply be assigned the color based on the array index once created. I haven't been able to update the bar color afterwards. I might have been to quick to assess whether or not this would in fact solve my problem.

I guess I could determine the data count in the current set I'm working on, and create an array of colors, one for each bar, with the correct color, and then produce a "new BarDataSet" supplying the mentioned color array. Any comments or suggestions on that?

Hopefully everything makes sense.

[Joelius300]

I haven't been able to update the bar color afterwards.

Could you show us the code you tried? You should just be able to set a new array with different values, call Update and it should be changed. I have very little time currently and cannot test but as far as I remember one of our samples actually does this.

EDIT:
Although otherwise quite busted, our horizontal bar chart sample demonstrates this.

[larschristensen20]

Although otherwise quite busted, our horizontal bar chart sample demonstrates this.

Sorry for the late response, I haven't had time to check it out before today. I ended up doing what you did in the said sample.

// Run through the sorted data and find entries that are "calculated in the system".
for (int i = 0; i < sortedData.Count(); i++) {
  if (sortedData[i].Reading == null) // calculated
 { 
    listColors.Add("#eb3434");
  } else 
  {
    listColors.Add("#0820fc");
  }
}
barSet.BackgroundColor = listColors.ToArray();

_config.Data.Datasets.Add(barSet);

My confusion stemmed from having this code handed over from a colleague, and I was simply too fast with opening an issue, instead of looking at the samples!

Thank you for the assistance.