Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
rabbitgomes7 opened this issue Jan 30, 2025 · 1 comment
Open

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

rabbitgomes7 opened this issue Jan 30, 2025 · 1 comment

Comments

@rabbitgomes7
Copy link

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

@FabTechAT
Copy link
Contributor

FabTechAT commented Apr 15, 2025

Here's a polyfill: https://jsfiddle.net/1bd2570y/

edit: nevermind, doesn't work if lines cross between segments

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants