20

I try to create bar chart using google chart example

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');

    data.addColumn('number', 'Slices');

    data.addRows([
      ['Mushrooms', 5],
      ['Onions', 4],
      ['Olives', 3]
      ['Zucchini', 2],
      ['Pepperoni', 1]
    ]);

Chart is created successfully but on X-Axis it shows value from 0 to 6. When i pass all values as 0 it shows X-Axis from -1 to +1.

Is it possible to set X-Axis to always start from 0% to 100%.

3 Answers 3

51

You can force the x-axis of a BarChart to always show a certain range by setting the hAxis.viewWindow.min and hAxis.viewWindow.max options:

hAxis: {
    viewWindow: {
        min: 0,
        max: 100
    },
    ticks: [0, 25, 50, 75, 100] // display labels every 25
}
4
  • I tested it in chrome and firefox and on max:100 it shows range upto 80 and when i set it to max:100.1 it shows range upto 100.
    – dmay
    Jan 29, 2014 at 18:36
  • I assume you are referring to the axis labels, since the actual range of the axis should be 0-100 in the example case. If you want to change the labels chosen by the API by default, you can override them with the hAxis.ticks option; I'll update the answer with an example.
    – asgallant
    Jan 29, 2014 at 19:56
  • Is there a way to create viewWindow with date range? I tried viewWindow: { min: new Date(2016,1,1), max: new Date(2016,1,8) } but the resulting range on the x-axis is not 1-8 of jan .. it seems to be off..
    – Dimitry K
    May 18, 2016 at 8:40
  • Oh. my bad works as it should. January month has index 0 . So should be viewWindow: { min: new Date(2016,0,1), max: new Date(2016,0,8) } to have as range 1st-jan to 8th-jan. Also be_sure NOT to start your month or days with leading zero eg. 012 because JS will interpret it as octal constant.
    – Dimitry K
    May 18, 2016 at 8:43
4

Set the tick values:

vAxis: { 
         ticks: [{v:0, f:'0%'},{v:10, f:'10%'},{v:20, f:'20%'},{v:30, f:'30%'}]
}
2

u can set x axis by modifing count value as we are using DataTable()

var databmi = new google.visualization.DataTable();

 data.addColumn('string', 'Country');
      data.addColumn('number', 'GDP');
      data.addRows([
        ['US', 16768100],
        ['China', 9181204],
        ['Japan', 4898532],
        ['Germany', 3730261],
        ['France', 2678455]
      ]);

     var options = {
       title: 'GDP of selected countries, in US $millions',
       width: 500,
       height: 300,
       legend: 'none',
       bar: {groupWidth: '95%'},
       vAxis: { 
             title :'your choice',
             gridlines: { count: 4 } 
              },
        hAxis: {
               title :'your choice',
                gridlines: {count: 4}
              }
     };

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.