Add conditional colouring to Line/ResponsiveLine

[zkldi]

Is your feature request related to a problem? Please describe.
Hi, I'm currently looking to render a line graph that changes colours conditionally, such as when Y is greater than 50.

Describe the solution you'd like
Maybe extending the colors prop to support taking an array that maps to points, or putting colours on the data itself would make sense?

Describe alternatives you've considered
I've checked the source code and it seems like this isn't currently possible at all. Maybe there's a way to do this with conditional gradients, or something else I've missed?

[wyze]

You can pass a function to colors prop to probably achieve what you want: https://codesandbox.io/s/prod-rain-xmx89?file=/src/App.tsx

[zkldi]

Hi, sorry, this isn't what I'm looking for - My description might've been a bit poor 😅

Here's an example image of what I'm trying to replicate with Nivo - In your example the first datapoint controls the colour of the whole dataset, but I want the dataset to change colour depending on the value of any given datapoint.

edit: to be clear just the line part of this - not the background - if that's possible too that'd be great but I doubt it is.

[wyze]

Here you go: https://nivo.rocks/storybook/?path=/story/line--highlighting-negative-values

[zkldi]

Oh wow! That's a pretty smart workaround - thank you!!

[3nt3]

That doesn't work when you don't conveniently have points that are exactly on the breakpoint though because the component won't render the x values correctly but always have an equal distance between all points