Treat single element backgroundColor option array as string option

[Seabizkit]

Expected Behavior

BackgroundColor is inconsistent, let me explain, it takes an array but at the same time it take a single value. in other words it should be able to handle ["rgb(54, 162, 235)"] but wants it as "rgb(54, 162, 235)" but when there is multiple then it wants an array. What its not doing updating the hover colour indicator.

Current Behavior

no errors, but the hover info block colour does not match the legend!.

Possible Solution

Forcing unnecessary coding! write extra logic.

Steps to Reproduce (for bugs)

1. create bar graph
2. have 1 legend, multiple labels
3. Set the legend to 1 colour but with an array of colours, yes with only 1 in the array
   4.the hover info colour will not match the legend colour

Context

Why.... well if your mapping this back to a concrete type (java, c#), then its impossible as is it an "array" or a "string". makes it very hard to make class helpers.

Environment

• Chart.js version: 2.6, but i think its also in latest, need to check
• Browser name and version: chrome

[etimberg]

@Seabizkit I'm not sure that this is a good idea. When the background colour is an array, it applies to bars by index. If you want all bars to be the same colour, you can either set an array with the same colour for each bar or just set the colour as a string and it will apply to all indexes.

[Seabizkit]

What I'm suggesting is; instead of having both string and string[array] have it only take a one "type" string[array] and if there is only one item in the array then this is the colour, as in "bars to be the same colour". Hope that make sense.

[etimberg]

@Seabizkit gotcha. Not sure how feasible that is to implement in a backwards compatible way. I think we'll always support just setting a string because that feels more Javascript-y to change the type

[Seabizkit]

don't know the implications of changing it but my suggestion, is that its coded to support typed languages (C#), so in java-script i don't have to do things like below, where 'res' is a return back from ajax with a model which mimic the chartjs structure.
res.dataSet[0].backgroundColor = res.dataSet[0].backgroundColor[0];

Im guessing the backwards compatible way, would be if the array size is 1 then use this. otherwise default implementation.
on a side note awesome! work!

[etimberg]

This is still working the same in v3.0.0-alpha https://jsfiddle.net/w8kyt2mf/

@benmccann @kurkle any opinions on this?

[benmccann]

As a Java user I do see it being easier to make a typed backend APIs to generate data for a Chart.js frontend. And it seems fair to say that indexable options should have as many indexes as there is data I suppose.

From the JS perspective though it seems a bit odd perhaps? And I use scriptable options way more than indexable options and that's not so easy to send from a Java backend anyway. So I'm a bit split on this.

[Seabizkit]

mmm could you give more insights to how Js works in regards to how this would make sense, as i cant wrap my head around it.

how does the js code, know that when there is only 1 then its not an array and then when there is more than 1 it must be an array, surely you have to check and code for this.

and considering this i would of thought it would make more sense to be consistent.
aka it cant be an array and not an array as the same time. well at least not in typed languages.

--valid
res.dataSet[0].backgroundColor  = "blue"

--not valid
res.dataSet[0].backgroundColor  = ["blue"]

--valid
res.dataSet[0].backgroundColor  = ["blue", "Red"]

vs

--not valid
res.dataSet[0].backgroundColor  = "blue"

--valid
res.dataSet[0].backgroundColor  = ["blue"]

--valid
res.dataSet[0].backgroundColor  = ["blue", "Red"]