Google BarChart set width of bars?

Question

I'm generating a BarChart with Google's javascript visualization libraries. I would like to make the bars in the chart to be wider than they currently are, but I can't find anything in the documentation which shows how to configure the width of the bars of each data set.

Any help?

Familiarity

Answer 1

Had this same question, figured I'd post for posterity. The bar.groupWidth appears to be the way to set this.

https://developers.google.com/chart/interactive/docs/gallery/barchart

For example:

 var options = {
        title: "Density of Precious Metals, in g/cm^3",
        width: 600,
        height: 400,
        bar: {groupWidth: "95%"},
        legend: { position: "none" },
      };
 var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
 chart.draw(view, options);

Incongruity

bar: {groupWidth: "95%"} For example – Time

Nice find, but after setting the bars smaller, how do you set the space between them smaller? – Boo

@Boo Not aware of any API methods to do that, sorry :( – Incongruity

Is this bar.groupWidth value treated as a minimum, maximum, or fixed amount? My graph has one bar per day. So on day 1, the bar fills the whole width of the chart. As days go by, more bars come in, they shrink to fit, and start to look like bars. I used bar.groupWidth to set it to 50 pixels and it looks good now, but will the bars still automatically shrink their width once there are more bars than will fit in the graph as 50px wide each? I was hoping for a bar.maxWidth option. – Multiflorous

@Multiflorous It appears that there is some logic that prevents the bars from being any larger than the space allotted to them, regardless of what you set the width to. Check this fiddle: jsfiddle.net/8zp1fasb – Incongruity

Answer 2

Try below format so the graph will have decently look, its not fixed but this solved our issue.

options: {
  titlePosition: "none",
  bar: { groupWidth: "50%" }
  // ...
}

data.push([" ", "t1","t2","t3","t4"]); // headings
data.push([" ", 0, 0, 0, 0]); // dummy bar so graph will display good
// push you actual data here
data.push([" ", 0, 0, 0, 0]); // dummy bar so graph will display good

Atlantis