Center Aligning the Google charts

Question

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

Saberhagen

Answer 1

Give the chart_div: display: block and margin: 0 auto;

Shadshadberry

I had to use display: inline-block, as the chart div was rendering full width. – Civism

Answer 2

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?

Jerricajerrie

This was a really easy answer to use, if you don't care about hover-functionality. – Erinaceous

Answer 3

I have been facing the same issue with a google gauge. Checking the code generated I realized that the next thing inside the <div id='chart_div'> is a table with margin 0 set as inline style.

So in order to override it I used the following css:

div.chart_div table {
    width: auto;
    margin: 0 auto !important;
}

And this worked.

Hooray

Answer 4

The accepted answer is broken; you have to use display: inline-block to center align your chart.

Theisen

Seems like a response to another post -- versus being an answer. – Heterodyne

Answer 5

Since width is fixed, try setting margin-left and margin-right to auto. It should work assuming that the position is relative.

Oligosaccharide

Answer 6

Any of these answers doesn't work for me so i did that:

<div class="chart_box">
  <div id="chart_div" style='width: 900px; height: 400px;'></div>
</div>

.chart_box {
  width: 900px;
  margin: 0 auto;
}

You need to use same width for chart_div and chart_box.

Fiske

Answer 7

Set chart_div to following properties:

#chart_div{
  display: inline-block;
  margin: 0 auto;
}

Around

Answer 8

Notice: when you remove the side menu ("legend: 'none'") the width should be altered.

This happens mostly when you go "legend: 'none'" because it leaves the side space that was there to hold that menu, not adjusting the width automatically. You need to re set the width and NARROW it, to manipulate its alignment:

var options = {
          title: 'center alignment',
          width:  350, 
          height: 350,
          legend: 'none'
        };

Rrhagia

Answer 9

I combined a few of the answers here, as follows:

Create a css class:

.customChartStyle{
    border:1px solid #eee;
    text-align:center !important;
}

and add it to the table's cells by adding the following to my table.draw() call:

'allowHtml': true, 'cssClassNames': {'tableCell': 'customChartStyle'}}

I'm new to google charts but the key for me was adding !important to the text-align style (thanks thanassis). For my case I needed the border style because overriding the tableCell style removed that otherwise. Also I prefer defining the class and letting the charts api apply it instead of overriding the styles generated by the api.

Spoils

Answer 10

Subscribe to the ready event to modify the CSS with JavaScript. Something like below will do the trick.

google.charts.load('current', {
  'packages': ['gauge']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

  var data = google.visualization.arrayToDataTable([
    ['Label', 'Value'],
    ['Memory', 80],
    ['CPU', 55],
    ['Network', 68]
  ]);

  var guageOptions = {
    width: 400,
    height: 120,
    redFrom: 90,
    redTo: 100,
    yellowFrom: 75,
    yellowTo: 90,
    minorTicks: 5
  };

  var guage = new google.visualization.Gauge(document.getElementById('my-div'));

  // HERE'S HOW TO SUBSCRIBE TO THE EVENT
  google.visualization.events.addListener(guage, 'ready', resetTableStyle);

  guage.draw(data, guageOptions);

  // HERE'S THE JAVASCRIPT TO SET YOUR CSS
  // NOTE TOGGLING A CSS CLASS HERE IS PROBABLY CLEANEST
  function resetTableStyle(){
    var myDiv = document.getElementById('my-div');
    var myTable = myDiv.getElementsByTagName('table')[0];
    myTable.style.margin = 'auto';
  }

Kilocalorie

Answer 11

Below code works for me:

width:fit-content;
margin:0 auto;

Abeu

Answer 12

By implementing a class to my div, it can now be centered.

HTML

<div id="chart_div2" class="chart_hum"></div>

CSS

.chart_hum {
    margin: 0 auto;
    display: inline-block;
}

Physicalism