Fill area between two lines

Apologies for such a basic question. Is it possibly to fill the area between two lines?

For example, I have historical high/low temperature data. I'd like to create a shaded area between these two timeseries.

I've tried using the area feature of a lineChart like this:

return [     {         values: tsData.normal,         key: 'Historical Normal',         classed: 'dashed'     },     {         area: true,         values: tsData.hi,         key: 'Historical Max',         color: '#0000ff'     },     {         area: true,         values: tsData.low,         key: 'Historical Min',         color: '#ffffff',         fillOpacity: 1     } ]; 

Which results in this image:

Fill area between two lines

Note that the gridlines below the Historical Min line are hidden by the filled areas. This solution is a bit hacky and ugly. Is there a more direct way to do this?


Category: nvd3.js Time: 2016-01-26 Views: 0
Tags: nvd3.js

Related post

iOS development

Android development

Python development

JAVA development

Development language

PHP development

Ruby development


Front-end development


development tools

Open Platform

Javascript development

.NET development

cloud computing


Copyright (C), All Rights Reserved.

processed in 0.194 (s). 12 q(s)