Gradient color in nvd3 area charts?

[anish-g-nair]

Hi there,

Is it possible to apply gradient color to area(filled-line) charts in nvd3. I have seen a workaround in d3 charts, using the svg object.

But is there a simpler way to do this, or any hack to get the same done?

[anish-g-nair]

Is there a way to get this done?

[jjustin3]

@anishnair02, reference here: https://stackoverflow.com/a/10898304/7395194

It'll be a little bit of work, but this should work out for you. I'd recommend using the JQuery SVG plugin offered up in that answer. Each area is going to be within the <svg><path class="nv-area-X">...</path></svg>. The 'X' in the class name references which of the areas you are trying to change based on the data i.e. DataSet 1 --> class="nv-area-0". Keep in mind that the legend will still display the original color before modified to the gradient, so you must repeat this for the legend if you choose to do so.

I have yet to do try this out, but please let us know if it works.

[megaroeny]

Any progress with this?

[reachtoakhtar]

Hi @anishnair02, just found a workaround.

Found a workaround. Insert a linearGradient element inside svg by using the callback attribute in chart and apply the following css:

.nv-area {
  fill: url(#grad3) !important;
}

chart: {
    type: 'stackedAreaChart', 
    height: 350,
    ...
    ...
    callback: function (chart) {

        // Add gradient color to graph.
        var linearGrad = d3.select("svg").append("linearGradient");
        linearGrad.attr('id', 'grad3');
        linearGrad.attr("x1", "0%");
        linearGrad.attr("x2", "100%");
        linearGrad.attr("y1", "0%");
        linearGrad.attr("y2", "100%");
        linearGrad.html(
            '<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>' +
            '<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>'
        );
    }
}