I'm using Google Chart Tools to display a simple line graph for unknown reason the labels overlap no matter how I set the "legend" parameters. In the screenshot below you can see the result for legend: {position: 'in', alignment:'center'}
. How to work around this?
Right-click on any column inside your chart. Select 'Format data series'. Drag the slider under the 'Gap width' to the right to make the columns thinner and to the left to make the columns wider.
"..when people generally complain about labels overlapping, that's due to attempting to draw in an invisible container. We currently do not support this, so you need to make sure that your container is not display:none when you draw the chart." - Sergey
Link: https://groups.google.com/forum/#!topic/google-visualization-api/c-KpZk--8p0
I had a chart loading near the bottom of a pretty complex page and this issue started. I decided to execute the creation of the chart after the page had loaded to give the parent div time to render.
$(document).ready(function(){
makeChart(data);
})
And the css for the parent div had a fixed height & width.
Hope this helps!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With