-
Notifications
You must be signed in to change notification settings - Fork 11.9k
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
[FEATURE] - Line Chart with Colored Filled Regions (instead of a single color only) #4068
Comments
@jordanwillis I like this idea and the I know that some developers at the BBC built https://github.com/bbc/Chart.Bands.js/ which automates the process of gradient creation to change the line colour above a certain data value. Maybe this would fit in there too? It's a bit different in implementation in that it does not change the line drawing but instead just assigns the gradient as the line fill (which should already work). |
@etimberg I actually came across the plugin that you mentioned as well, but it seemed fundamentally different to me in that it's purpose is to configure a horizontal gradient (around a certain y-axis value). A.k.a. it adds a new concept that does not currently exist anywhere within chart.js (thus it requires a whole set of it's own configuration options). Also, it seemed you guys were already working on something similar in the chart.js core based on #4008 ( In my case, I was thinking it might make sense to allow the line chart It just so happens that the only way to accept So long story short (thanks for sticking with me so far!), I wanted to first check to see if you were interested in pulling this directly into the core since it seems to be in line with all other chart color options. Otherwise, I'd be more than happy to publish as a standalone plugin that would overwrite the line chart |
@jordanwillis sorry for the super late reply on this. I'd be happy to consider an improvement here. As you noticed, we refactored some of the line fill code into an internal plugin so this would probably fit in OK there. I think allowing @simonbrunel thoughts? |
@etimberg Sounds good! Let me review the latest line fill code changes and get back with you on an implementation approach. |
https://github.com/bbc/Chart.Bands.js/ Doesn't work with chartjs version 2.6. |
What ever happened with this request? |
Hallo. Very nice job. I have just implemented this in my app but the only thing that goes wrong is that you are actually overriding the LINE type chart, so when i want to use a LINE chart ( the regular one ) , I cant. It will throw an exception because it looks for an array of colors. |
Hello, Thanks for your help! For a large line chart time, i.e a year chart, the line below needs to be changed from: var colorStopPosition = roundNumber((point._model.x - minX) / (maxX - minX), 2); to: var colorStopPosition = roundNumber((point._model.x - minX) / (maxX - minX), 3); |
Added a sample file showing how to use gradients as a fill in #6666. This can be used to implement this case |
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 thectx.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
The text was updated successfully, but these errors were encountered: