nvd3 line chart - set the color of the line by Y value

Question

I am using nvd3 line chart and I would like that points under certain y value (let's say y=4) will be red, and above that they will be their nvd3 color (orange, etc..)

How can I achieve this kind of effect?

Answer 1

This can be done by adding a color value to the points of the linechart data.

Therefore, instead of having just x and y objects:

{...{"y": "0.05885", "x": "1692"}, {"y": "0.05906", "x": "1693"}...}

You have to add a color value:

{...{"y": "0.05885", "x": "1692", "color": "#ff0000"}, 
{"y": "0.05906", "x": "1693","color": "#ff0000"}...}.

This can then be accessed and changed as you normally would. For the required data points, you can make the color e.g. red as needed.

EDIT:

If that doesn't work, i don't think its possible, nicely. The problem is, is that the line itself is a actual line and its one element. If you look into the generated html code, you will see its a single element. Therefore, the line can only have a single colour property. What you can do is set that to a gradient link. Making the colour property be e.g.stroke: linear-gradient(to right, red , blue);, ofcourse with stops and starts when needed, look at this: link.

The way you access the line element is in css:

#graphid g.nv-series-0 path.nv-line { //0 is the series number
     #color:red; //old
     stroke: linear-gradient(to right, red , blue); //new
}