Menu
I am trying to center align my google chart but have been unsuccessful in doing so. I have played with padding to move it to the center but I don't want to sit there and play with firebug for long time and figure out the correct position. Is there any simpler such as aligning text text-align: center. Obviously it doesn't work with google charts. (I am new to all of this)
var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
...some code ...
<div id='chart_div' style='width: 900px; height: 400px;'></div>
although I did this padding-left: 140px but is there any better way like align: center
475
What I would do is remove the title from the chart and add a header above the chart which would allow you to center it using CSS. To remove the title from the chart use titlePosition: 'none' . For more info: Google Chart Documentation - Configuration Options. Agree, there is no other option to centre the title.
You can do this by setting the display property to "flex." Then define the align-items and justify-content property to “center.” This will tell the browser to center the flex item (the div within the div) vertically and horizontally.
To center this table, you would need to add ;margin-left:auto;margin-right:auto; to the end of the style attribute in the <table> tag.
Give the chart_div: display: block and margin: 0 auto;
68
You could also do <div id='chart_div' align='center'> This worked for me, although now my chart hovering function isn't working. Anyone else get this problem? I'm talking about when you hover the mouse over a point on the graph. It usually shows the point such as Jan Sales 440. Anyone know of a fix?
39
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
