CODEWITHSUNDEEP
javascriptd3.jsnvd3.js
nanno
nanno

Reputation: 81

NVD3 force specific width of bar in bar chart

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.

Upvotes: 7

Views: 11286

Answers (4)

Parth Choksi
Parth Choksi

Reputation: 186

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.

Upvotes: 2

David Parker
David Parker

Reputation: 128

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.

Upvotes: 3

Sandeep
Sandeep

Reputation: 29341

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

Upvotes: 11

nanno
nanno

Reputation: 81

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.

Upvotes: 1

Related Questions