[FEATURE] - Line Chart with Colored Filled Regions (instead of a single color only)

Expected Behavior

Most color options in chart.js accept either a single color or an array of colors to control the corresponding element. For example, you can configure a line chart to have different colored points using the pointBackgroundColor option and passing in an array.

However, this same concept is currently not supported for the line chart fill color (e.g. backgroundColor)

Current Behavior

The new behavior would allow the line chart backgroundColor option to accept an array of colors to produce colored fill areas. Here is an example.

Possible Solution

Based on the tagged v2.5.0 source, logic could be added to Chart.elements.Line.draw() to build a canvas linear gradient based on the position of each point and use this as the ctx.fillStyle instead of a single color.

Here is a codepen example where I have added the logic in at runtime.

Context

I needed this capability in some charts used within my company. I figured if I needed it then others might need it as well.

Environment

• Chart.js version: v2.5.0
• Browser name and version: All
• Link to your project: http://codepen.io/jordanwillis/pen/BWxErp

[jordanwillis]

@etimberg Sounds good! Let me review the latest line fill code changes and get back with you on an implementation approach.

[etimberg]

Added a sample file showing how to use gradients as a fill in #6666. This can be used to implement this case