How to have a definite boundary on a d3.js horizontal bar chart

Question

I'm using a NVD3 and D3 to create some simple visuals, one of which is a horizontal bar chart. The options are:

{
    "type": "multiBarHorizontalChart",

    "height": 600,

    "showControls": false,
    "showValues": true,
    "duration": 500,
    "xAxis": {
        showMaxMin: false,
        axisLabelDistance: 400,
        axisLabelWidth: 500,
    },
    "yAxis": {
        "axisLabel": "",
        "tickFormat": function (d) { return d; }
    },
    "yDomain" : [0, 10000],
    x : (function(d) { return d.label }),
    y : (function(d) { return d.value }),

    showLegend: false,
    valueFormat: d3.format(".0f"),
}

And the output looks like:

Default output

However, the project style police don't like that the range of the graph appears unbounded and they'd like it to look like this:

Desired output

Is this possible?

Thanks

Answer 1

The actual problem here was how the library build on top of D3 (NVD3) chose to draw it's bar charts.

Rather than re-invent the wheel, a decision was made to use Amcharts instead.