chartjs / chartjs/Chart.js

Add `above` and `below` line color options (similar to fill origin)

Open
#12,013 2 comments 2 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

I'm using Chart.js to plot data that can fluctuate above or below zero. Currently, I can easily create an area chart and color the fill based on whether a point is above or below the origin by using:

fill: {
target: 'origin',
above: 'rgba(16, 185, 129, 0.2)',
below: 'rgba(244, 63, 94, 0.2)',
}

This is a great feature because it automatically splits the fill color. However, if I also want to add a line/border to that area, it suddenly becomes much more complicated.

Why not implement the same logic for the border color, something like:

borderColor: {
target: 'origin',
above: 'rgba(16, 185, 129, 0.2)',
below: 'rgba(244, 63, 94, 0.2)',
}

### Possible Implementation

_No response_

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.