How to set bar and labels size in Google Charts

1,398 views
Skip to first unread message

Chris Cole

unread,
Oct 23, 2015, 10:51:04 AM10/23/15
to Google Visualization API
I am drawing a barchart with data from [here][1], but I am not able to set the bars' labels' width and reduce the spacing between each bar. How do I do that? 

The result (You can find corresponding HTML page of the result attached): 


This is my code:

    function drawVisualization() {
      var chart = new google.charts.Bar(document.getElementById('columnchart_material'));


      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Country');
      data.addColumn('number', 'Migrants entering a country');
      data.addColumn('number', 'Migrants leaving a country');


      loadMigrationData();


      function loadMigrationData() {
        // console.log(countrySelected.value);


        d3.csv("NetMigrationRate.csv", function(csv) {
          csv = csv.filter(function(row) {
            return row;
          })
          console.log(csv.length);


          data.setColumns([csv.length, {
            calc: cmToInches,
            type: 'number',
            label: 'Height in Inches'
          }]);
          data.addRows(csv.length);


          var migrants;
          for (var index in csv) {
            country = csv[index]['Country'];
            migrants = csv[index]['Migrants'];


            var ind = parseInt(index);
            data.setCell(ind, 0, country);


            if (migrants > 0) {


              data.setCell(ind, 1, migrants);


            } else if (migrants < 0) {


              data.setCell(ind, 2, migrants);
            }
          }
          var optionsCount = {
            isStacked: "true",
            bar: {
              groupWidth: "100%"
            },
            bars: 'horizontal',
            width: 600,
            height: 2600,
            legend: {
              position: "none"
            },
          };
          chart.draw(data, optionsCount);
        });
      }
    }



I have already tried to set
 
bar: {groupWidth: "100%"},

to increase the bars' width but with no results.
How do I reduce the bar's labels' height and at the same time reduce the bars' width, in order to beautify the whole chart?

Thank you in advance helpers!

Screen Shot 2015-10-23 at 14.03.47.png

Sergey Grabkovsky

unread,
Oct 23, 2015, 11:00:35 AM10/23/15
to Google Visualization API
Hi,

In order for the bar.groupWidth option to register, you need to run your options through the options converter. To reduce the height of the labels, you'll need to change their font size, which you can do using the domainAxis.textStyle.fontSize option. Here's an example of a Bar chart using both these options and the options converter: http://jsfiddle.net/hr56z87y/

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/52910a5d-df84-4b35-9b3b-d2968a0bb246%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Chris Cole

unread,
Oct 23, 2015, 11:30:44 AM10/23/15
to Google Visualization API

Thank you! What you have said works nicely, but I think I found one more problem ruining the display... it looks as if some space is arbitrarily created where it shouldn't, here it is:


How possibly is that?

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.

Sergey Grabkovsky

unread,
Oct 23, 2015, 11:36:18 AM10/23/15
to Google Visualization API
It looks like the stacked option didn't register. Not sure why that would be; my guess is that you're not converting your options properly. If you could post the code that generates this chart (preferably in a jsfiddle), that would be helpful.

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/e10c0c0e-89bf-4f30-b1a0-9c1c81cdb161%40googlegroups.com.

Chris Cole

unread,
Oct 23, 2015, 12:18:35 PM10/23/15
to Google Visualization API
This is the link to the jsfiddle (though I have no idea why it does not display anything)  -> http://jsfiddle.net/MisterObama/thw6g/1/
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.

Sergey Grabkovsky

unread,
Oct 23, 2015, 12:21:54 PM10/23/15
to Google Visualization API
Your fiddle doesn't appear to have any chart code in it. I'm guessing that that's why it doesn't display anything.

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/e53bb781-9699-48c9-9bae-a833370f80fd%40googlegroups.com.

Chris Cole

unread,
Oct 23, 2015, 12:26:22 PM10/23/15
to Google Visualization API
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.

Chris Cole

unread,
Oct 23, 2015, 12:30:16 PM10/23/15
to Google Visualization API
Jsfiddle is giving me trouble. Here is a Plunker -> http://plnkr.co/edit/nDBhiUJF4akKrgZJPZqr?p=preview

Sergey Grabkovsky

unread,
Oct 23, 2015, 1:05:33 PM10/23/15
to Google Visualization API
You commented out the isStacked option, which will allocate space for both series within the group (effectively splitting the group size in two). If you uncomment the isStacked option, then the bars should take up the whole group width.

Chris Cole

unread,
Oct 23, 2015, 1:47:21 PM10/23/15
to Google Visualization API
It worked perfectly, thank you ;)
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
Reply all
Reply to author
Forward
0 new messages