Gradient color in nvd3 area and bar charts?

Question

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?

Answer 1

Too little info in your question, however here below is an example of area chart with gradient.

This is based on SVG Gradients:

  <svg>
    <defs>
      <linearGradient id="grad3" x1="0%" y1="0%" x2="100%" y2="0%">
        <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" />
      </linearGradient>
    </defs>
  </svg>

After Gradient definition in SVG use it in CSS like this:

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

var data = [{
  "key": "Quantity",
  "bar": true,
  "area": true,
  "values": [
    [1301544000000, 2000],
    [1304136000000, 2500],
    [1306814400000, 1800],
    [1309406400000, 2100],
    [1312084800000, 2100],
    [1314763200000, 2800]
  ]
}]
nv.addGraph(function() {
  chart = nv.models.lineChart();

  chart.margin({
    left: 100,
    bottom: 100
  }).useInteractiveGuideline(true).showLegend(true).duration(250);
  chart.xAxis.axisLabel("Date").tickFormat(function(d) {
    var date = new Date(data[0].values[d][0]);
    return d3.time.format("%b-%e")(date);
  });
  chart.yAxis.axisLabel('Quantity').tickFormat(d3.format(',.2f'));

  chart.x(function(d, i) {
      return i
    })
    .y(function(d) {
      return d[1]
    })

  chart.showXAxis(true);

  d3.select('#chart svg').datum(data)
    .transition().call(chart);

  return chart;
});

#chart svg {
  height: 400px;
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://rawgit.com/novus/nvd3/master/build/nv.d3.js"></script>
<link href="https://rawgit.com/novus/nvd3/master/build/nv.d3.css" rel="stylesheet"/>

<div id="chart">
  <svg>
      <defs>
    <linearGradient id="grad3" x1="0%" y1="0%" x2="100%" y2="0%">
      <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" />
    </linearGradient>
  </defs>
  </svg>
</div>