How can I override the containing dimensions of a Google Visualization?

Question

I am trying to program a bar chart using Google Visualizations.

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

The bar chart is dynamically generated and changed several times.

Google Visualizations seems to have trouble detecting the dimensions of a div element that I dynamically appended via jQuery. Hence, I would like to hard code the dimensions of the bar chart into the options that I feed into Google Visualizations.

How do I do that?

I have tried these options.

var options = {
    title: 'Comparing Kangeroos and Wallabies',
    vAxis: {title: 'Factors',  titleTextStyle: {color: 'red'}},
    legend: 'bottom',
    chartArea.width: '400px',
    fontName: 'Arial Narrow'
};

However, Chrome Web Developer just notes that there is an unexpected period in "chartArea.width."

Answer 1

try chartArea:{width:400} like it shows in the example for chartArea in the table from the page you gave.

EDIT: changed to number because it says "A simple number is a value in pixels".

Answer 2

The example shows:

title:"Yearly Coffee Consumption by Country",
            width:600, height:400,
            vAxis: {title: "Year"},
            hAxis: {title: "Cups"}

So try "width" instead of "chartArea.width"