chartjs / Chart.js

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

How to apply gradient on the opposite side of the Line chart? #11778

Open nikmace opened 1 month ago

nikmace commented 1 month ago

Feature Proposal

I can only apply the gradient below the line.

Currently the Line chart looks like this:

Screenshot 2024-05-19 at 14 33 49

What is the expected behavior?

The gradient appears on the opposite side of the line, meaning from the line to the top of the chart.

And I want to make the gradient like this: (so it appears where I have drawn white lines, so it is inverted in relation to the line)

Screenshot 2024-05-19 at 14 34 11

Possible Implementation

No response

LeeLenaleee commented 1 month ago

You can specify the fill as an object and set the above property: https://www.chartjs.org/docs/4.4.3/charts/area.html#example-with-multiple-colors