How to place NVD3 line chart over all other areas / histograms?

Question

Plunker example

In the above example, you see that the line is displayed below the graph of the orange area:

I read this tag here , then I tried this d3.select('svg#chart .lines1Wrap').moveToFront(); but got an error moveToFront not a function.

Chart code

 var data = [{ "key": "Price", "type": "line", "yAxis": 2, "values": [ [1443621600000, 71.89], [1443619800000, 75.51], [1443618000000, 12.49], [1443616200000, 20.72], [1443612600000, 70.39], [1443610800000, 59.77], ] }, { "key": "Quantity1", "type": "area", "yAxis": 1, "values": [ [1136005200000, 1], [1138683600000, 5], [1141102800000, 10], [1143781200000, 0], [1146369600000, 1], [1149048000000, 0], ] }]; data = data.map(function(series) { series.values = series.values.map(function(d) { return { x: d[0], y: d[1] } }); return series; }); nv.addGraph(function() { var chart = nv.models.multiChart() .margin({ top: 20, right: 40, bottom: 50, left: 40 }) .yDomain1([0, 10]) .yDomain2([0, 100]) // hard-coded :< .interpolate("linear") // don't smooth out the lines .color(d3.scale.category10().range()); chart.xAxis.tickFormat(function(d) { return d3.time.format('%I:%M')(new Date(d)); }); chart.yAxis1.tickFormat(d3.format(',f')); chart.yAxis2.tickFormat(function(d) { return '$' + d3.format(',f')(d) }); d3.select('svg#chart') .datum(data) .transition().duration(500).call(chart); d3.selection.prototype.moveToFront = function() { return this.each(function() { this.parentNode.appendChild(this); }); }; d3.select('svg#chart .lines1Wrap').moveToFront(); chart.update(); nv.utils.windowResize(chart.update); return chart; }); 

---

UPDATE Found this answer here , tried to use a solution:

 d3.selection.prototype.moveToFront = function() { return this.each(function() { this.parentNode.appendChild(this); }); }; d3.selection.prototype.moveToBack = function() { return this.each(function() { var firstChild = this.parentNode.firstChild; if (firstChild) { this.parentNode.insertBefore(this, firstChild); } }); }; d3.select('svg#chart .lines1Wrap').moveToFront(); d3.select('svg#chart .nv-areaWrap').moveToBack(); 

No more errors, however, the blue line graph is not yet moving in front of everyone else.

Answer 1

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

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

Full working code here

Wash it helps! :)

Answer 2

I think that it is on your particular chart that the series of lines is under the lines of line2wrap, not line1wrap. IIRC, this is due to the fact that the series is "first." In your plunter, I changed 1 to 2, and it worked.

This is a hacky workaround (this is mine from Github, thanks for notifying me), and probably requires some kind of intervention to be more helpful.