NVD3 force specific width of bar in bar chart

Question

I am trying to get a specific width value set on a nvd3 discrete bar chart. I can change the rect elements after the initial render, but it seems like there would be some way to designate a bar width in the set-up of the chart.

Here is 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 am assuming since I can't find any posted questions about this particular issue, it is probably so simple I am missing it. Thanks in advance.

Answer 1

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

Answer 2

A good way to solve this is with CSS:

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

This is what we did within our application and it worked great.

Answer 3

In Nvd3, the width of individual bar in your bar chart depends on number of data items of the chart.

Alright so firstly, groupSpacing works in multi-bar chart of nvd3 and not in discrete-bar chart. However, it won't solve this problem of yours.

Other fixes such as changing css property of bar(rect) and setting width to a fix value or using dispatch event will sure reduce the width of your bars but will disrupt the layout and you will have to manually make calculations to set your datalabels and other values according to your change in bar width.

.nv-groups .nv-group rect{
    width: 50px;
}

or

 chart.dispatch.on("renderEnd", (d) => {
    d3.selectAll("rect.discreteBar").attr('width', 50);
    d3.selectAll("g.nv-bar text").attr('x', 30);
    d3.selectAll(".nv-discretebar").attr('transform', 'translate(100,0)');  
}
);

Anyways so I did not want to patch the library or add manual calculations as I had dynamic data with no fixed particular length of data.

What worked for me in dealing with this problem was to change the library from nvd3 to apexcharts(http://apexcharts.com/).

The shift just needs a little bit of time in changing the format of data needed for apexcharts but apexcharts does have so many functionalities and your problem can be easily solved by just setting the columnWidth property in plotOptions of bar.

Answer 4

To answer my own question I had to "manually" change the values using jQuery to get the chart to display as I wanted it to.

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

As Lars pointed out, the library dynamically calculates the widths based on the number of items, which makes sense.