NVD3 sets a specific bandwidth in a histogram

Question

I am trying to get a specific width value set on a nvd3 discrete histogram. I can change the rect elements after the initial rendering, but it looks like the bar width will be indicated in the chart setup.

Here are my current chart settings.

nv.addGraph -> chart = nv.models.discreteBarChart() .x (d) -> return d.label .y (d) -> return d.value .staggerLabels(false).showValues(false) .color(['#56bd78']).tooltips(false) .margin({top: 0, right: 0, bottom: 30, left: 0}) chart.tooltipContent (key, x, y, e, graph) -> return '<h3><span>' + parseFloat(y) + '</span><em>' + key + '</em></h3>' chart.xAxis.tickFormat (d) -> return d3.time.format('%b')(new Date('2013/'+d+'/01')) # chart.xAxis.tickPadding({top: 0, bottom: 0, left: 20, right:30}) d3.select(element).datum(data).transition().duration(500).call(chart) nv.utils.windowResize(chart.update) return chart 

I assume that since I cannot find any published questions about this particular problem, it is probably so simple that I miss it. Thanks in advance.

Answer 1

Try chart.groupSpacing(0.5) and change the value accordingly to see if it solves the problem.

Answer 2

A good way to solve this with CSS:

 .nv-bars rect { width: 20px; } 

This is what we did in our application, and it worked perfectly.

Answer 3

To answer my own question, I had to “manually” change the values ​​using jQuery to display the chart the way I wanted it.

 $(element+' rect.discreteBar').attr('transform', 'translate(17)').attr('width', 20) $(element+' .nv-axis g text').attr('transform', 'translate(0, 5)') 

As Lars noted, the library dynamically calculates the width based on the number of elements, which makes sense.