Maximum width for column in bar chart

Question

I\'m looking for a way of limiting the column width in a chart, I\'m sure this ought to be relatively easy but I cant find a way of doing it.

I\'m populating a chart fro

Answer 1

Setting an absolute maximum width for the columns doesn't allow proper rendering for different screen resolutions, div sizes, etc.

In my case, I just wanted the columns not to look so large when the number of columns itself is small I found it easier and more straight-forward to play with the scale definition, by changing the maximum width (where all columns will fit), their inner and outer paddings.

var w = 600
// var w = parseInt(d3.select(parentID).style('width'), 10) // retrieve the div width dynamically
var inner_padding = 0.1
var outer_padding = 0.8
var xScale = d3.scale.ordinal().rangeRoundBands([0, w], inner_padding, outer_padding)

When rendering the plot, I just ran a switch/if-else statement, which assigns different padding values. The lower the number of columns to plot, the greater the outer_padding (and eventually inner-padding) values I use.

This way, I keep the plots responsive.