How to create areas between two lines?

[yiranx6]

Hi, I met a problem in filling the area between two lines. I am using ResponsiveLine and try to use this demo:https://nivo.rocks/storybook/iframe.html?id=line--custom-layers&viewMode=story to figure out how to fill the area between them. However, my data was not like any of those. It is made up of four different line components and I want to get two of them and fill the area between them. When I try to construct the function and it pops out that my data input is not a number(which I cannot turn into a number). Is there any method I can do to fill colours in two lines between?

[plouc]

@yiranx6, there's no such feature to just create an area between two specific lines, you can create stream charts using the @nivo/stream package or fill areas for all lines using the @nivo/line package. It's a bit too specific to have it builtin in high level components such as those that nivo provide.

That being said, you should be able to use an extra layer to achieve that, won't be simple, but should definitely be doable, if you can share a codesandbox with what you have already, I might be able to have a look.

[plouc]

Closing this due to lack of reply.

[joesaunderson]

@plouc we use Nivo heavily and love it!

We'd like to put something like this together, can you make any recomendations on how you'd approach it?

[danfaro]

@plouc We are looking to create something like this as well. Is it possible?

[plouc]

@danfaro, as I said before, it's not built-in, so you would have to create an extra layer, maybe the points, series, xScale or yScale properties passed to the layer to feed an area shape generator from d3-shape. I haven't tried it myself, but this should be doable.