How To Position Nvd3 Line Graph Above All Other Area / Bar Graphs?

The Plunker example In the example above you can see that the line is rendered under the orange area graph: Was reading this trend here, then I tried this d3.select('svg#chart .li

Solution 1:

Add this to move your line(line chart) DOM element after the line(Area Chart) DOM element.

d3.select('.lines2Wrap').node().parentNode.insertBefore(d3.select('.stack1Wrap').node(), d3.select('.lines2Wrap').node());

Full working code here

Hoe this helps! :)

Solution 2:

As I struggled with a similar problem for two days I will post my solution here in case it helps someone.

In my chart settings I have dispatch function which will append a rectangle to the chart and then lower it to the bottom:

dispatch: {
  renderEnd: () => {
     drawThresholds();
     lowerThresholdAreas();
  }
}

In the drawThresholds I draw the actual rectangle:

constdrawThresholds = () => {
  try {
    let svgContainer = d3.select(`svg g`);

     svgContainer.append('rect')
        .attr('x', 0)
        .attr('y', 2)
        .attr('width', 200)
        .attr('height', 200)
        .attr('class', 'threshold_area')
        .attr('fill', 'yellow');
    }
    catch (err) {
    // Selector throws an error instead of returning empty list// when element is not found.// Ignore exceptions, they occur because page is not loaded yet.
    }
  };

And finally after rectangles are appended, I need to place them to the bottom by calling lowerFunction. use d3 selectAll to get all .threshold_area classes and then insert them before the line.

constlowerThresholdAreas = () => {
  d3.selectAll('.threshold_area').each(function () {
    this.parentNode.insertBefore(this, this.parentNode.firstChild);
  });
};

And what is happening, is that on SVG canvas there is no z-index. It means the order of appends defines the layers, meaning if you append the rectangle as last item, it will be on top. So the order of elements needs to be changed.

Also a step where I did mistake was that I first used ES6 function declaration and it doesn't work with "this" as I supposed it would.

Read more about selection: https://github.com/d3/d3-selection/blob/master/README.md#select

Read more about lowering or raising items: https://github.com/d3/d3-selection/blob/master/README.md#selection_lower

Here is a working plunker for seeing it in action: https://plnkr.co/edit/QI2HcxcJYRAv0FzXWihd?p=preview

Solution 3:

I think it's just that on your particular graph, the line series is under lines2wrap, not lines1wrap. IIRC, this has to do with which series is 'first'. In your plunker, I changed the 1 to a 2 and it worked.

It's a hacky workaround (that's mine from Github, thanks for notifying me), and probably requires some tinkering to be more generally useful.