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:

As you can see, it does cut both Horizontal-Axis and Legends, so the final result is not as good as It could be. Is there a way to solve this? I've been reading the official documentation and some posts from here, but I haven't found the way to do this.

Recap: How do we modify the legend or the axis texts so they are fully visible?

Colonize

Answer 1

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:

Colonize

Answer 2

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

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

ref https://mcmap.net/q/396493/-how-to-set-google-charts-legend-width-in-javascript

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

Provincial

Answer 3

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

Dentilingual