"fill: false" option on dataset causes legend to also not fill

When specifying the fill: false option for items in a dataset, the legend for that data set is also not filled, even if backgroundColor is specified. This is unexpected behavior according to documentation, as the documentation simply says the background of the chart itself will not be filled. As a result, a white hole appears in the legend (if border is also specified).

This issue appears in version 2.9.1 installed via npm. I am running it via an angular project. A week ago, when I first installed the project to work on it, this issue did not exist. However, it appeared today when I ran npm update. This leads me to believe that the issue was introduced in versions 2.91 or 2.9.0, or another commit within the past week or so.

[designosis]

Is there a rationale as to why this would be desired behavior for line graphs?

It’s difficult to rationalize design. My team ran an A-B survey – with an admittedly small and unscreened sample base of 30 – against the two images in #6673. When asked to choose between the two images, 22 preferred solid, 2 preferred hollow, 5 were undecided, and 1 thought they were exactly the same. Our findings were as follows:

1. The unfilled hollow interrupts the compositional flow and rhythm of a graph. The eye tracks to “arbitrary non-data”, mildly reducing usability.
2. That in a layout where both solid and line-styled graphs were present, it would be necessary to have both solid and line-styled legends; Otherwise, solid is always preferable.
3. The results were heavily biased towards working professionals. We were unable to estimate which way the data would skew for those outside our test group. Some of us thought the average user would have a harder time (as unskilled cartographers), others thought the reduced familiarity would also increase indifference to such a minor detail.

To summarize, our conclusion was that the option to select fill-style was desirable.

[gmonahan]

I guess I’m in the minority then as I prefer controlling whether the legend icon is filled or not. Here’s an example why - if you have people with color blindness - you use more variance on the line dash - so if you have 3 grey lines that have a variance in dashing - the icons in the legend are now filled and are hard to distinguish.

  fill: false,
  borderColor: "rgba(255,0,0,1.0)",
  backgroundColor: '#a6cee3',
  borderWidth: 1,

With older version of chartJS, I didn’t need to specify the legend icon backgroundColor - it defaulted to a nice medium grey. With 2.9.3, the background color is ignored in the legend icon. Changing the fill to true yields the right fill color in the legend icon, at the expense of filling under the line.

I’m reverting to 2.8 until this is fixed. We need a way to color both attributes without a single attribute variable.