Formatting legend and axis in Google Charts

Question

I\'m new with Google Charts and I am not able to obtain a fine result with the texts surrounding the graph.

This is how my chart looks:

Answer 1

Its basically about setting your chart area vs width / height.

width: [yourChoice]px,
chartArea: {width: '50%'}

ref https://stackoverflow.com/a/6870732/661584

Also as @ArcDare says using the other available styling options such as font size etc

Answer 2

For optmized chart area,

chartArea: {'width': '90%', 'height': '60%'}, 
legend: { position: 'bottom' },
hAxis : { textStyle : { fontSize: 10} },
vAxis : { textStyle : { fontSize: 10} },

The trick is setting axis textStyle fontsize will enable better placement of legend on the bottom of the chart as the chart Area is about 60-70%

Feel free to use my custom Google Charts plugin which creates both chart and table. https://github.com/cosmoarunn/gapiExt

Answer 3

After some time experimenting, I daresay it is not posible to choose how much part of the words on legend or axis you can show.

However, you can play with their sizes and position so you get -more or less- what we were looking for. This is what can be done:

legend: {position: 'top', textStyle: {fontSize: 14}}

I've also made the image a little bit bigger so it fits the x-axis without problems (There was also the option of making its text smaller).

So doing this, this is what you get: