CODEWITHSUNDEEP
htmlcssgoogle-visualizationcenterlinechart
Melody Anoni
Melody Anoni

Reputation: 243

Adjusting position of google linechart

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.

enter image description here

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.

Upvotes: 1

Views: 94

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

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;
}

Upvotes: 1

Related Questions