CODEWITHSUNDEEP
htmlcsspositioninggoogle-visualization
SherCoder
SherCoder

Reputation: 688

Center Aligning the Google charts

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

Upvotes: 16

Views: 56504

Answers (12)

user3495363
user3495363

Reputation: 419

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

Upvotes: 1

drumgertjuhhh
drumgertjuhhh

Reputation: 1

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

Upvotes: 0

Erick Pacas
Erick Pacas

Reputation: 1

Below code works for me:

width:fit-content;
margin:0 auto;

Upvotes: 0

Pardesi_Desi
Pardesi_Desi

Reputation: 2711

Set chart_div to following properties: 

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

Upvotes: 1

Mimoid
Mimoid

Reputation: 802

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.

Upvotes: 2

Ronnie Smith
Ronnie Smith

Reputation: 18555

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

Upvotes: 0

Mich. Gio.
Mich. Gio.

Reputation: 301

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

Upvotes: 7

nvioli
nvioli

Reputation: 4209

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.

Upvotes: 0

user1504583
user1504583

Reputation: 235

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?

Upvotes: 10

thanassis
thanassis

Reputation: 691

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.

Upvotes: 8

Soufiane Hassou
Soufiane Hassou

Reputation: 17750

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

Upvotes: 2

Robert Niestroj
Robert Niestroj

Reputation: 16131

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

Upvotes: 22

Related Questions