Dynamic change the color of Line chart depending on other data line

[ui-ninja]

I want to change the color of the line chart if certain conditions are met. But I don't want the entire line color to change. There are 2 lines.

Line 1 : Actual Cost
Line 2 : Forecast Gross Cost

I want only the color of the affected portion to change color. For example on line 1, if the Forecast > Actual for the month of November, I want just that portion of the line to turn red(), else, it should be blue().

Anyone have any thoughts on how to achieve this?

[benmccann]

You can use scriptable options. Here's a gradient sample which is somewhat similar #6666

[sheixt]

@benmccann do you have any code examples we could look at?

I'm attempting to adjust the line colour dependant on the value, not another dataset, but this seems a similar query.

I have made some progress but have only been successful in changing the point colors, not the line colors. I have detailed my attempts in response to another issue: #2123 (comment)

I ask so not to raise another issue 🤞

[benmccann]

Here's an example: https://www.chartjs.org/samples/master/advanced/line-gradient.html

This example is against 3.x, which isn't released yet. I'm not sure if it works with 2.9.x or not

[sheixt]

@benmccann thanks for the quick response! Could you answer a couple of quick questions for me:

1. Does the data.datasets[i].borderColor parameter accept an array? (Just I've tried passing an array and the line defaults back to the standard grey)
2. By settings the borderColor parameter, will this adjust the line between two points or just the point itself?