Re: Bar Chart Height

[asgallant]

You could make the chart height proportional to the number of rows of data.

// set the height equal to 15 pixels per row of data, plus some padding for the top and bottom
var height = data.getNumberOfRows() * 15 + 30;
chart.draw(data, {
    height: height,
    // other options
});

On Monday, August 19, 2013 7:52:41 AM UTC-4, Mark Wade wrote:

I have a bar chart with a variable number of rows.

Currently, I'm not specifying a height for the container div that I put the chart into, and with one row, it looks great:

But with more rows... not so much:

How can I figure out and set the best height?

[Mark Wade]

Hi,

I tried, but it doesn’t seem to work properly. With my one-bar example, it now looses it’s legend:

And the one with lots of rows gets loads of padding at the top, and is still squashed (though not as much):

I tried fiddling with the numbers, but it seems for the chart with lots of rows, it just gets more and more stretched - the padding at the top continues to increase and the numbers begin to look odd as the text stretches rather than actually display at a normal font size.

[asgallant]

Post the code you are using to draw the chart and I'll test it out.  It should not be behaving that way.

[Mark Wade]

[asgallant]

I modified the code like this:

var height = data.getNumberOfRows() * 30 + 60;

var chart2 = new google.visualization[ 'BarChart' ]( document.getElementById('chart2') );
chart2.draw(data, {
    isStacked: true,
    legend: {
        position: 'bottom'
    },
    height: height
});

and it worked fine for me.

[Mark Wade]

When I do that, the legend disappears for the first chart, and the second gets a lot of padding at the top, which increases as more and more roes get added - if the chart had 50 rows, it would be half way down the page.

[asgallant]

You can do some more tweaking of the chart's dimensions using the "chartArea" option.  See this as an example: http://jsfiddle.net/asgallant/eHhpM/1/

[Mark Wade]

That's perfect, thanks!