I am working with Google Chart API and have developed a pie chart with reference to Visualization: Pie Chart

Screenshot of my pie chart:-

Screenshot shows the container via firebug...

Here is the problem arises, the low opacity blue color is the container(i.e. div) in which the chart is appearing, some what it doesn't fit to that outer div in which its contained and showing some useless whitespaces, the pie chart should fit the div anyhow if my code is right...

Working on this code:-

var options_pie = {
chartArea: { left: 0, top: 0, width: "100%", height: "60%"},
colors: ['#59ea54', '#a14660', '#f3cf4a', '#16a2c2', '#ce7374', '#39ae9b'],
legend: 'none',
};

var chartPie = new google.visualization.PieChart(document.getElementById('chart_pie'));
chartPie.draw(data, options_pie);

I dont know, am i missing something or its the problem with the api?

I am working with Google Chart API and have developed a pie chart with reference to Visualization: Pie Chart

Screenshot of my pie chart:-

Screenshot shows the container via firebug...

Here is the problem arises, the low opacity blue color is the container(i.e. div) in which the chart is appearing, some what it doesn't fit to that outer div in which its contained and showing some useless whitespaces, the pie chart should fit the div anyhow if my code is right...

Working on this code:-

var options_pie = {
chartArea: { left: 0, top: 0, width: "100%", height: "60%"},
colors: ['#59ea54', '#a14660', '#f3cf4a', '#16a2c2', '#ce7374', '#39ae9b'],
legend: 'none',
};

var chartPie = new google.visualization.PieChart(document.getElementById('chart_pie'));
chartPie.draw(data, options_pie);

I dont know, am i missing something or its the problem with the api?

• javascript
• google-api
• google-visualization
• pie-chart

• Is it any different without the left: 0, and top: 0;? – GusRuss89 Commented Jun 7, 2013 at 12:21
• @GusRuss89 Thanks for reply, that also tried, but no effect... – SaurabhLP Commented Jun 7, 2013 at 12:50

1 Answer 1

Try to modify width and height, for example :

 options.chartArea = {left:0, 'width': '80%', 'height': '80%'}