Adjusting position of google linechart - html

Question

I need to center a google line chart.
The problem is, I cannot use align = "center" because it causes my tooltip hover to lag behind, I'm not sure why.
I found a way to center the chart in the inspector by removing position: relative two divs deep in my chart div.
I thought to override this with
#electricalLineChart div div{
position: static!important
}
But it ignores this code even with !important
I haven't found anything in the documentation that addresses positioning. I tried using legend just for kicks but it doesn't seem to do anything.
Here is my chart code:
// line chart
var linechart1 = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'electricalLineChart',
dataTable: joinedData,
options: {
colors: ['#4DC3FA', '#185875'],
animation: {
duration: 1000,
easing: 'out',
},
width: 800,
height: 500,
legend: { position: 'static'},
title: 'Line Chart',
explorer: {},
hAxis: {
title: 'Month'
},
vAxis: {
format: formatPattern
//title: 'Amount Billed ($), Consumption (kWh)',
}
},
});
RELEVENT HTML:
<div style="overflow-x:auto;">
<table class="container">
<tbody id="electrical-tables">
<tr id="odd-cells">
<td>
<div id="electricalLineChart"></div>
</td>
</tr>
.... other rows removed for clarity
</tbody>
</table>
</div>
RELEVENT CSS:
#electricalLineChart, #Request_line_chart1{
width: 80%;
margin: auto;
}
Essentially, the third div down in the image with dir= "ltr" needs to be position: static not position: relative.

Answer 1

the problem, <div> elements are block elements, which means they expand the total width of their parent element.
even though the chart does not take up the entire width,
the <div> still expands to the width of the parent.
to prevent this behavior, add the following css to the <div>,
which will allow it to be centered...
display: inline-block;
e.g.
#electricalLineChart, #Request_line_chart1{
width: 80%;
margin: auto;
display: inline-block;
}