nvd3 space between bars - charts

Question

I've made a MultiBarChart with NVD3.
It works, however, a colleague said I needed more space between each Australian state.
So, Tasmania further from Victoria etc.
Here is the data visualisation
I can not find a forum that explains this in non-developer language. I'm not a developer, but having a go.
Here is my code...
var chart;
nv.addGraph(function() {
chart = nv.models.multiBarHorizontalChart()
.x(function(d) { return d.label })
.y(function(d) { return d.value })
.margin({top: 30, right: 105, bottom: 30, left: 103})
.tooltips(true)
.showControls(false);
chart.yAxis
.tickFormat(d3.format(',.1f'));
d3.select('#chart1 svg')
.datum(long_short_data)
.transition().duration(1400)
.call(chart);
nv.utils.windowResize(chart.update);
chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
return chart;
});
Thanks you super kind and smart people!

Answer 1

No Need to use too much code for spacing just use below code :
var chart = nv.models.multiBarChart();
//added by santoshk for fix the width issue of the chart
chart.groupSpacing(0.8);//you can any value instead of 0.8

Answer 2

This is unfortunately something you can't configure in NVD3. However, you can change the height of the bars after the chart has been created to make it appear as if there's more space between them. The code to do this is simple:
d3.selectAll(".nv-bar > rect").attr("height", chart.xAxis.rangeBand()/3);
The default height is chart.xAxis.rangeBand()/2 -- you can adjust this as you see fit. The only thing to keep in mind when running this code is that NVD3 animates its elements, so not everything will be there in the beginning or values may be overwritten. You can solve this by waiting a small amount of time before calling that code using setTimeout:
setTimeout(function() {
d3.selectAll(".nv-bar > rect").attr("height", chart.xAxis.rangeBand()/3);
}, 100);

Answer 3

Just found this question while searching for a way to add more space between bars. Like Lars said, you can change the bar size after the chart has been drawn. However, when you increase the bar height without changing the space between each bar, it overflows. To add space between the bars you should use xRange:
var chart = nv.models.multiBarHorizontalChart().xRange([0, 125])