NVD3 Stacked Bar Chart Plus Line Overlapped

Question

I'm using NVD3's MultiChart to create a stacked bar chart plus line. I modified the multiChart models a bit to make the bars become stacked. Now the problem is that the lines are at the back of the bars such that I cannot hover over the lines to see the tooltip for line. Is there any options in NVD3 to bring the lines to front?

I created the JSFiddle here: http://jsfiddle.net/n2hfN/50/

Javascript source:

var margin = {
    top: 50,
    right: 50,
    bottom: 120,
    left: 70
};
var svg = "#chart svg";

var normalisedData = [{
    "key": "Group A",
        "type": "bar",
        "yAxis": 1,
        "values": [{
        "x": 0,
        "y": 6
    }, {
        "x": 1,
        "y": 5
    }, {
        "x": 2,
        "y": 3
    }, {
        "x": 3,
        "y": 6
    }, {
        "x": 4,
        "y": 9
    }, {
        "x": 5,
        "y": 10
    }]
}, {
    "key": "Group B",
        "type": "bar",
        "yAxis": 1,
        "values": [{
        "x": 0,
        "y": 5
    }, {
        "x": 1,
        "y": 7
    }, {
        "x": 2,
        "y": 5
    }, {
        "x": 3,
        "y": 3
    }, {
        "x": 4,
        "y": 9
    }, {
        "x": 5,
        "y": 8
    }]
}, {
    "key": "Group A Benchmark",
        "type": "line",
        "yAxis": 1,
        "values": [{
        "x": 0,
        "y": 0
    }, {
        "x": 1,
        "y": 1
    }, {
        "x": 2,
        "y": 0
    }, {
        "x": 3,
        "y": 3
    }, {
        "x": 4,
        "y": 0
    }, {
        "x": 5,
        "y": 1
    }]
}, {
    "key": "Group B Benchmark",
        "type": "line",
        "yAxis": 1,
        "values": [{
        "x": 0,
        "y": 1
    }, {
        "x": 1,
        "y": 2
    }, {
        "x": 2,
        "y": 1
    }, {
        "x": 3,
        "y": 1
    }, {
        "x": 4,
        "y": 2
    }, {
        "x": 5,
        "y": 0
    }]
}];

var axisKeys = ["2014-Jan", "2014-Feb", "2014-Mar", "2014-Apr", "2014-May", "2014-Jun"];

nv.addGraph(function () {
    var chart = nv.models.multiChart()
        .options({
        reduceXTicks: false
    })
        .margin(margin)
        .color(d3.scale.category10().range());

    chart.xAxis.tickFormat(function (d) {
        // If there is such element, return it
        if (typeof axisKeys[d] !== "undefined") {
            return axisKeys[d];
        }
        return "";
    });

    // Get normalised data for chart
    var seriesData = normalisedData;

    chart.yDomain1([0, 20]);

    // Set chart
    d3.select(svg)
        .datum(seriesData)
        .call(chart);

    // Auto resize chart on window resize
    nv.utils.windowResize(chart.update);

    return chart;
});

HTML source:

<div id="chart">
    <svg></svg>
</div>

Thanks in advance!

Would this trick have helped to avoid the effort of modifying the multiChart code and in its turn the problem with the lines behind the bars? — Alex Klaus

shabeer90 shabeer90 · Accepted Answer · 2014-10-15T07:46:26

Draw the lines after the after the stacked bars

gEnter.append('g').attr('class', 'bars1Wrap');
gEnter.append('g').attr('class', 'bars2Wrap');
gEnter.append('g').attr('class', 'stack1Wrap');
gEnter.append('g').attr('class', 'stack2Wrap');

gEnter.append('g').attr('class', 'lines1Wrap');
gEnter.append('g').attr('class', 'lines2Wrap');

Hope it helps

NVD3 Stacked Bar Chart Plus Line Overlapped

1 Answers