Background color as gradient in stacked area chart

[reachtoakhtar]

I want to use the background colour as gradient in stacked area chart. Is it possible?

[reachtoakhtar]

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"/>'
        );
    }
}