chartjs / chartjs/Chart.js

Line graph: Per-data-point (vertical) backgroundColor capabilities

Open
#11,179 3 comments 0 reactions 0 assignees View on GitHub
type: enhancement
Dominant language
JavaScript
Stars
67.7k
Forks
11.9k
Avg merge
7h 39m
Merged PRs (30d)
5

Description

### Feature Proposal

It would be nice to create a method option "backgroundColor" which could return, on a per data-point basis, a backgroundColor so that we could fill a chart like so (example from the exercise game "Zwift"):

![example from the exercise game "Zwift"](https://i.stack.imgur.com/hcs3G.png)

This would allow coloring in line graphs to better portray the data within.

I feel like this would have been addressed before in the past. Please let me know if it has and please link me as I haven't been able to find a related issue. I apologize in advance if this has been addressed before.

### Possible Implementation

```
{ ...
datasets: [{
data: [ ... ],
backgroundColor: function(item) {
if (item.y) {
return getColorForY(item.y); // if argument is a datapoint, return a backgroundColor pertinent to the value
}
return 'rgba(0, 0, 0, 0)'; // otherwise return transparent
},
}, ...],
... }
```

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.