nvd3 line chart automatically setting fill opacity

Question

I'm trying to create a line chart using nvd3 using the following code

nv.addGraph(function ()
{
    chart = nv.models.lineChart()
        .x(function(d) { return d[0]; })
        .y(function(d) { return d[1]; })
        .showXAxis(true)
        .showYAxis(true)
        .useInteractiveGuideline(true);
    chart.xAxis     //Chart x-axis settings
        .axisLabel('Time (ms)')
        .tickFormat(function(d) {
            var format = '%H:%M';
            d = new Date(d);
            return d3.time.format(format)(d);
        }).tickValues(null);


    d3.select('#macCountGraph svg')
        .datum(graphData)
        .call(chart);

    nv.utils.windowResize(chart.update);
    return chart;
});

The above code is creating the graph as required but it is filling the graph as shown in the image below

Also, it not showing the grid lines, x-axis, y-axis and no tooltip is shown onmouseover.

I looked inside the generated svg and found this

<g class=" nv-group nv-series-0" style="stroke-opacity: 1; stroke-width: 1.5; fill: rgb(31, 119, 180); stroke: rgb(31, 119, 180); fill-opacity: 0.5;">

The above element has a fill-opacity set to 0.5. If I change it to 0 in firebug, the fill color is removed.

Tried to do it using javascript as shown below

d3.selectAll("svg .nv-groups > nv-group")
  .transition()
  .style("fill-opacity", 0);

But no luck.

Any ideas on how to solve this?

Answer 1

I had the same problem on d3 3.5.5 with nvd3 1.8.1. Setting area in the data does work, in that it sets the chart area, but separately of the problem described here (for example, if you set area: "red", you will end up with two filled regions).

Fix by setting the style of the .nv-line class element. In your case, try this:

d3.selectAll("svg .nv-line")
  .style("fill", "none"); // or whatever

Answer 2

There are two ways of doing it.

1. Add you area: false in the data, you pass into the chart

   var data = [{
       values: [],
       key: 'Time',
       color: '#7777ff',
       area: false //area - set to true if you want the area filled into the line chart.
   }];
   

2. Or you can use the following code. To test it, open the debugger toolbar paste the code on the page console here. I've tested it and it works.

   d3.select("svg g.nv-series-2").style("fill-opacity", 0);
   

Hope it helps.

Answer 3

There are two parameters for y-axis and x-axis to show the lines :

.nvd3 .nv-axis path.domain {
    stroke-opacity: .75;
}

.nvd3 .nv-axis.nv-x path.domain {
    stroke-opacity: .75;
}