chartjs / Chart.js

Simple HTML5 Charts using the <canvas> tag
https://www.chartjs.org/
MIT License
63.92k stars 11.89k forks source link

Typescript: Incompatible types when generating backgroundColor array from context callback #11711

Closed agreen254 closed 3 months ago

agreen254 commented 3 months ago

Expected behavior

The backgroundColor property accepts the generated array.

Current behavior

The callback only works when a single backgroundColor is generated. Returning an array of colors from the callback, even one that does not rely on the context object, causes the issue.

Without using the callback, specifying an array of strings to represent the colors causes no issues.

The error will go away if I immediately invoke the function or input the array without using the callback, but then I lose access to the context object.

The charts appear to be functioning normally despite this compiler error.

Reproducible sample

Here

Optional extra steps/info to reproduce

No response

Possible solution

Extend the ControllerDatasetOptions interface to allow for this possibility.

Context

No response

chart.js version

v4.4.2

Browser name and version

No response

Link to your project

No response

agreen254 commented 3 months ago

So I have just realized that the callback appears to fire for each individual datapoint,.

My previous understanding was that making one color from the callback would cause the entire dataset to become that color, but I believe I misunderstood.

Example:

// alternate background colors of the same dataset between black and white
backgroundColor: function(context) {
  return context.dataIndex % 2 === 0 ? "#000" : "#FFF";
}

With this I think I can close the issue.